Get content in same div jQuery

3 Views

I’ve got a gallery on my website with each of them a unique ID. I’m trying to get this idea to work:
Click on the first image = the content of first image. Click on the second image = the content of second image.. etc etc.

Currenlty i’ve set each image with a unique id as seen below:

Read More
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 with jQuery i can get all content in the screen, one for one. So if I click img1 I get content 1.

Got 2 loops, one for the thumbnails and one for the 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 is almost the same but then just other functions in side it (like the_content(), and a 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 I get the script too work like this:
Img1 gets clicked – show Content1
Img2 gets clicked – empty the div, then set Content2
Img3 gets clicked – empty the div, then set Content3

Post Views: 3

Related posts

Leave a Reply

1 comment

  1. We first need to make a ‘display’ div which is always visible.

    E.g.:

     <div id="information"></div>

    With CSS such as this:

     #information {
     position:fixed;
     margin-top:50px;
     margin-left:50px;
     background-color:grey;
 }

    This div will display the information of the images we click on.

    Now to actually update this div with the information, we do the following:

    $(document).ready(function () {
     $('#<?php echo $thumb_id ?>').on('click', function () {
         // get the correct content id
         var idimg = $(this).attr('id');
         var contentId = '.content_' + idimg;  

         // update information div
         $('#information').html($(contentId).html());
     });
});