Question

我被指派去做照片库。

中间有一张大图（1000x1000），下方有三张小缩略图（200x200）。

我获得了这个有用的功能

getBigImg(thumbnail); // Returns big image

我们假设已经为我们提供了CSS，我们不必担心。

<div class="big image">
    <img src="big picture"/>
</div>

<div class = "thumbnails">
    <div id="placement1>   img src thumbnail 1  </div>
    <div id="placement2>   img src thumbnail 2  </div>
    <div id="placement3>   img src thumbnail 3  </div>
</div>

我所做的就是简单地创建.HTML的3个副本，并在每个缩略图的前面做。每当用户点击图像时，它将重定向到.html，其中大图像是缩略图的大图像。

有人告诉我，我可以通过使用JQuery来解决所有这些麻烦。他们指的是什么？

Answer 1

您可以执行this example：

之类的操作

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
    $(document).ready(function() {

        $(".galImg").click(function() {
            var image = $(this).attr("rel");
            $('#feature').fadeOut('slow');
            $('#feature').html('<img src="' + image + '"/>');
            $('#feature').fadeIn('slow');
        });
    });
</script>

Answer 2

使用此HTML：修复小错误

<div class="big image">
    <img class="bigImage" src="big picture"/>
</div>

<div class="thumbnails">
    <div id="placement1" >   <img src="thumbnail1" />  </div>
    <div id="placement2" >   <img src="thumbnail2" />  </div>
    <div id="placement3" >   <img src="thumbnail3" />  </div>
</div>

并将其添加到您的HTML：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script type="text/javascript">

$(function(){
   $(document).on('click', '.thumbnails > div', function(){
    var img = $(this).find('img').attr('src');
    $('.bigImage').attr('src', img);
   });
});

</script>

Jquery反对使用按钮

2 个答案: