JQuery FadeIn для миниатюр изображений в DIV - код не работает - PullRequest
Новая
       23

JQuery FadeIn для миниатюр изображений в DIV - код не работает

0 голосов
/ 20 февраля 2012

У меня есть div, который содержит кучу миниатюр изображений.Каждое изображение имеет атрибут rel, и я хотел бы использовать это значение для отображения полноразмерного изображения миниатюры в другом элементе div.

Я хочу использовать функцию jQuery fadeIn.Мой код не работает ... и я не очень хорошо знаю jQuery.

Что не так с этим кодом? 

<html>

<head>

  <script src="http://code.jquery.com/jquery-latest.js"></script>


<style type="text/css">
.imgdiv {

    /* initially overlay is hidden */
    display:none;

</style>    

</head>

<body>

    <div id="book">
    <img src="thumbnails/book1.png" width="100" height="123" rel="photo1"/>

    <img src="thumbnails/book2.png" width="100" height="123" rel="photo2"/>
    </div>


<div class="imgdiv" id="photo1">
    <img src="thumbnails/booklarge1.png" />
</div>

<div class="imgdiv" id="photo2">
    <img src="thumbnails/booklarge2.png" />
</div>        

<script>
    $('#book img').click(function() {      
      $('#book img[rel]').fadeIn('slow'); 
    });       

</script>

</body>
</html>

Ответы [ 3 ]

2 голосов
/ 20 февраля 2012

Измените код внутри функции щелчка на эту

$("#"+$(this).attr("rel")).fadeIn('slow');

см. здесь

0 голосов
/ 20 февраля 2012

Я бы предложил использовать атрибут данных html5 над rel. Что-то вроде data-largeimage="#photo1"

Кроме того, определите событие щелчка в функции готовности документа: $(function(){ //do stuff })

Расширение кода Навида: 

$(function(){

 $('#book > img').click(function() {      
  $("div.imgdiv").hide();
  var largeImage = $(this).data('largeimage');
  $(largeImage ).fadeIn('slow'); 

 }); 

});

Если вы хотите использовать свой старый селектор, измените $('#book img[rel]') на $('#book img[rel="' + variable + '"]')

0 голосов
/ 20 февраля 2012

Simple: 

 $('#book > img').click(function() {      
      $("div.imgdiv").hide();
      $(this).fadeIn('slow'); 
 });
...