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

Popular posts from this blog

java - Oracle EBS .ClassNotFoundException: oracle.apps.fnd.formsClient.FormsLauncher.class ERROR -

c# - how to use buttonedit in devexpress gridcontrol -

nvd3.js - angularjs-nvd3-directives setting color in legend as well as in chart elements -