image not showing in prettyphoto

Question

I am using prettyphoto for gallery.For the purpose when i click cover image of album the images of that album is shown via prettyphoto.Everything is working fine except the image is not showing. Code: html

<div id="album_5" class="album_images" style="display:none">
<div class="albumimgs">
<a albumid="5" title="" href="http://localhost/sharepoint/image/album/1000/0/album_309_1379593500.jpg" rel="prettyPhoto[5]">
<img src="http://localhost/sharepoint/image/album/400/400/album_309_1379593500.jpg">
</a>
</div>
</div>

Here 5 is album Id.

JavaScript code:

$('img').live('click', function(){ //click the album cover img
  var parents = $(this).parents('div.albums');
  var albumId = parents.find('a').attr('rel');
  var url = 'js/jquery.prettyPhoto.js';
  $.getScript(url)
     .done(function(){
        $("a[rel^='prettyPhoto["+albumId+"]']").prettyPhoto({
            theme:'pp_kalypso',
            deeplinking: false
       });
       $('div#album_'+albumId).find('a[albumid="'+albumId+'"]').trigger('click');
  });
})

The div portion of prettyphoto() where image must be shown is null. any suggestion is welcome.

Answer 1

Sammy, i think the possibility is that you have multiple images with the same value for albumid. So when you trigger the click for prettyPhoto all of them gets clicked.

Try to use eq() or :first as

$('div#album_'+albumId).find('a[albumid="'+albumId+'"]:eq(0)').trigger('click');

OR

$('div#album_'+albumId).find('a[albumid="'+albumId+'"]:first').trigger('click');

Enjoy....