0

I am using .appened to add some HTML to a div in markup that is being outputted when prettyphoto light-box clone opens.

I am trying to figure out how to only load the appended HTML to the light-box once and not every time the a new image in the gallery is viewed by using the back/next button.

From what I have found this would be done by using .bind/.unbind but writing this function does not seem to work.

I am using the following even handler inside the prettyphoto open function

$.prettyPhoto.open=function(event){

$(".pbdog-gAd").append('<p style="text-align: center;"><a href="' + prettyLink + '" target="_blank"><img src="' + prettyAd + '" width="468" height="60" alt="" /></a></p>');

Which results in the desired output...

My problem is that each time the next/previous buttons are clicked it runs the script again and adds an additional ad image below the current one, as seen below. It keeps doing this until prettyphoto eventually crashes

From what I can understand I need to write a function that will call this event the first time but not each time the next/previous button is clicked

I have tried the following with no luck

$(".pbdog-gAd").bind("click", function( event ) {
$(".pbdog-gAd").append('<p style="text-align: center;"><a href="' + prettyLink + '" target="_blank"><img src="' + prettyAd + '" width="468" height="60" alt="" /></a></p>');
$(this).unbind( event );
});

Doing the above seems to make prettyphoto ignore this function all together. Doing the below seems to break prettyphoto

$.prettyPhoto.bind("click", function( event ) {
$(".pbdog-gAd").append('<p style="text-align: center;"><a href="' + prettyLink + '" target="_blank"><img src="' + prettyAd + '" width="468" height="60" alt="" /></a></p>');
$(this).unbind( event );
});

I obviously don't understand what I am doing here so any help would be greatly appreciated.

1 Answer 1

0

The solution I found to this was to just use .removeClass after the .append has been run. This stopped the image from being loaded a 2nd time and also removed the class so no formatting is applied to the space if no values are loaded for during the .append process.

$(".pbdog-gAd").append('<p style="text-align: center;"><a href="' + JprettyLink + '" target="_blank"><img src="' + JprettyAd + '" width="468" height="60" alt="" /></a></p>');
$(".pbdog-gAd").removeClass("pbdog-gAd");

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.