javascript - Get content in same div jQuery -
i've got gallery on website each of them unique id. i'm trying idea work: click on first image = content of first image. click on second image = content of second image.. etc etc.
currenlty i've set each image unique id seen below:
echo "<img src='http://bsc.ua.edu/wp-content/uploads/2012/01/white-placeholder-100x100.jpg' data-original='$thumbnail[0]' width='$thumbnail[1]' height='$thumbnail[2]' class='lazygallery' id='$thumb_id'/>";
and jquery can content in screen, 1 one. if click img1 content 1.
got 2 loops, 1 thumbnails , 1 content: thumbnail:
echo '<div class="gallery">'; while ($loop->have_posts()) : $loop->the_post($post->id); $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id($post->id), 'gallery-thumb', true, ''); $thumb_id = get_the_id(); echo "<img src='http://bsc.ua.edu/wp-content/uploads/2012/01/white-placeholder-100x100.jpg' data-original='$thumbnail[0]' width='$thumbnail[1]' height='$thumbnail[2]' class='lazygallery' id='$thumb_id'/>"; endwhile; echo '</div>';
the content loop same other functions in side (like the_content(), , bunch of custom stuff).
my script currently:
<script> $(document).ready(function () { $('#<?php echo $thumb_id ?>').on('click', function () { var idimg = $(this).attr('id'); alert('id: ' + idimg); $('.content_<?php echo $thumb_id ?>').toggle(); }); }); </script>
full question how can script work this: img1 gets clicked - show content1 img2 gets clicked - empty div, set content2 img3 gets clicked - empty div, set content3
we first need make 'display' div visible.
e.g.:
<div id="information"></div>
with css such this:
#information { position:fixed; margin-top:50px; margin-left:50px; background-color:grey; }
this div display information of images click on.
now update div information, following:
$(document).ready(function () { $('#<?php echo $thumb_id ?>').on('click', function () { // correct content id var idimg = $(this).attr('id'); var contentid = '.content_' + idimg; // update information div $('#information').html($(contentid).html()); }); });
Comments
Post a Comment