Получить контент в том же div jQuery

Question

У меня есть галерея на моем веб-сайте с каждым из них уникальный идентификатор. Я пытаюсь заставить эту идею работать: Нажмите на первое изображение = содержимое первого изображения. Нажмите на втором изображении = содержание второго изображения .. и т.д. и т.п.

Currenlty Я установил каждое изображение с уникальным идентификатором, как показано ниже:

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'/>"; 

И с JQuery я могу получить все содержимое на экране, один на один. Так что, если я нажимаю img1 я получаю Содержание 1.

Got 2 петли, один для эскизов и один для содержания: Миниатюра:

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() и куча пользовательских материалов).

Мой сценарий в настоящее время:

<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> 

Полный Вопрос Как я могу получить сценарий тоже работают так: Img1 получает щелкнул - показать Content1 Img2 получает щелкнул - опорожнить DIV, а затем установите Content2 Img3 получает щелчок - пустой div, затем устанавливается Content3

Answer 1

Сначала нам нужно сделать «дисплей» div, который всегда виден.

т.д .:

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

С помощью CSS, такие как это:

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

Этот DIV будет отображать информацию из изображений мы щелкнули.

Теперь фактически обновить это Див с информацией, мы делаем следующее:

$(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()); 
    }); 
});