javascript - Displaying the right picture associated with a dynamically created thumbnail -


have been working on long now. before loads of answers suggesting image gallery scripts wanted learn how works myself. have created thumbnail gallery dynamically ajax , php, thing cannot quite right when thumbnail clicked full size image displays in pop box. without jquery disable default link action corret image displays in new tab, know dynamically created code ok. have set code href attribute of dynamic link , there think i'm having issue, can ony 1 image show no matter thumbnail clicked on

code creates thumbnail

<script type="text/javascript">  $(document).ready(function() {//ready func  $(".albumname").click(function(){//click      var albumid = this.id;      $('#imageframe').empty();      $.post("includes/viewgallery.php",{albumid:albumid},function(data)  {//json         console.log(data);           data = jquery.parsejson(data);            $.each(data, function(key, val) {//iterate each data                 var albumname = val.albumname;                var photoid = val.photoid;                var photoname = val.photoname;                var photourl = val.photourl;                var thumbid = val.thumbid;                var thumbname = val.thumbname;                var thumbnailurl = val.thumbnailurl;                var href = "http://217.199.187.191/mandingaarts.co.uk";                 $('#imageframe').append('<a id"'+photoid+'" class="lightbox" href="'+href+'' +photourl+ '"><img id"'+thumbid+'" class="thumbnail" src="'+href+'' +thumbnailurl+ '"/></a>');                 })//iterate each data           });//json      });//click  });//ready func </script> 

the code gets fullsize image , displays in popup box

<script type="text/javascript">  $('#imageframe').on('click', '.thumbnail', function(e) {      e.preventdefault()     var a_href = $('.lightbox').prop('href');     console.log(a_href)     $('#lightboximage').prop('src', a_href) $("#faded").fadetoggle("scale"); });  $('#lightbox').on('click', '#closelightbox', function() {     $('#faded').fadetoggle("scale")     $('#lightboximage').prop('src', '#') });  </script> 

you appending lot of anchors #imageframe div. each of anchors has class of lightbox.

then on click retreiving array of elements class of lightbox , getting href property of 1 of them - first element.

since onlick image try like

a_href = $(this).parent().prop('href');


Comments

Popular posts from this blog

c++ - Difference between pre and post decrement in recursive function argument -

php - Nothing but 'run(); ' when browsing to my local project, how do I fix this? -

php - How can I echo out this array? -