tabaiba tabaiba - 2 months ago 16
jQuery Question

Jquery .click does not work in combination with PrettyPhoto

PrettyPhoto gallery script.

I want to load only first 3 photos of each gallery. If user starts viewing these first photos, the script must load all photos of that gallery.

<a href="photo_1.jpg" data-bid="6780" data-rel="PrettyPhoto[g1a][1]"><img src="thumbnail_1.jpg" />
<a href="photo_2.jpg" data-bid="6781" data-rel="PrettyPhoto[g1a][1]"><img src="thumbnail_2.jpg" />
<a class="loadimgs" data-gallery="1" href="photo_3.jpg" data-bid="6782" data-rel="PrettyPhoto[g1a][1]"><img src="thumbnail_3.jpg" />


As you can see above, the link of photo_3.jpg contains class="loadimgs". When user clicks on the 3rd thumbnail, the PrettyPhoto must show the full image and Jquery at the same time must send a request to more-images.php to load all links/thumbnails of this gallery to the container .load_more_images

<div style="display:none" class="load_more_images" id="1"></div>


Unfortunately, it does not work. Does not work means that

$(document).on('click',".loadimgs", function()


is totally ignored.
When I click on the 3rd thumbnail, PrettyPhoto, opens a full size photo but there is no request to more-images.php file. Browser console does not show any errors, nothing.

Is it possible that .click does not work in combination with PrettyPhoto? If so, can you suggest any other way how to call the more-images.php file when user clicks on 3rd thumbnail?

$("a[data-rel^='PrettyPhoto[g1a]']").PrettyPhoto({
allow_resize:0,
deeplinking:false
});

$(document).on('click',".loadimgs", function(){
var gallery_id=$(this).attr("data-gallery");
$('.load_more_images').load("/more-images.php?gallery_id="+gallery_id");
alert("It works");
});

Answer

Replace the way you attach the event with this:

$('.loadimgs').click(function(ev){
    var gallery_id=$(this).attr("data-gallery");
    $('.load_more_images').load("/more-images.php?gallery_id="+gallery_id);
    alert("It works" + gallery_id);
});

You also have a quote that cause a fail at the end of this, before the last parentheses: $('.load_more_images').load("/more-images.php?gallery_id="+gallery_id");