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
Post a Comment