网站图片库

Image gallery for website

本文关键字：图片库 网站      更新时间：2023-09-26

我目前正在尝试制作一个类似于此网站的图片库：

http://www.sandrageringinc.com/artists/nancy-dwyer/

目前我已经做到了：

http://port-80-rzczno273y.treehouse-app.com/

但我真的不知道下一步该去哪里。我不在乎造型，因为我能做到。我的弱点在于我的功能，我只是不知道该怎么办。目前我已经实现了在点击时将缩略图渐变为更大的图像。然而，我现在希望能够单击箭头并按照缩略图的顺序移动到下一张图片，就像示例中箭头的工作方式一样我在顶部发帖。正如我之前所说，我只是不确定如何实现这一目标，我正在寻找如何实现结果的方向或建议。提前感谢您的帮助。

html代码

<div id="container">
    <div id="gallery">
      <a href="img/large/dotted-large.jpg"><img src="img/small/dotted-small.jpg"</a>
      <a href="img/large/gold-large.jpg"><img src="img/small/gold-small.jpg"</a>
      <a href="img/large/purple-large.jpg"><img src="img/small/purple-small.jpg"</a>
      <a href="img/large/dotted-large.jpg"><img src="img/small/dotted-small.jpg"</a>
      <a href="img/large/gold-large.jpg"><img src="img/small/gold-small.jpg"</a>
      <a href="img/large/purple-large.jpg"><img src="img/small/purple-small.jpg"</a>
      <a href="img/large/dotted-large.jpg"><img src="img/small/dotted-small.jpg"</a>
      <a href="img/large/gold-large.jpg"><img src="img/small/gold-small.jpg"</a>
      <a href="img/large/purple-large.jpg"><img src="img/small/purple-small.jpg"</a>
      <a href="img/large/dotted-large.jpg"><img src="img/small/dotted-small.jpg"</a>
      <a href="img/large/gold-large.jpg"><img src="img/small/gold-small.jpg"</a>
      <a href="img/large/purple-large.jpg"><img src="img/small/purple-small.jpg"</a>
    </div>
    <div id="photo">
      <a class="next" href="#">&rarr;</a>
      <a class="prev" href="#">&larr;</a>
    </div>
  </div>

javascript代码：

$(document).ready(function() {

$('#gallery a').click(function(evt) {
        //don't follow link
         evt.preventDefault();
         //get path to new image
       var imgPath = $(this).attr('href');
         //get reference to old image
         var oldImage = $('#photo img');
             //create HTML for new image
             var newImage = $('<img src="' + imgPath +'">');
             //make new image invisible
             newImage.hide();
             //add to the #photo div
             $('#photo').prepend(newImage);
             //fade in new image
             newImage.fadeIn(1000);
             //fade out old image and remove from DOM
             oldImage.fadeOut(1000,function(){
             $(this).remove();
                });      
    }); // end click
    $('#gallery a:first').click();
}); // end ready

如果你正在制作同一个库，为什么不看看这个库的代码，看看它是如何工作的？

看起来http://www.sandrageringinc.com/artists/nancy-dwyer/使用

<script type="text/javascript" src="http://prod-assets.exhibit-e.com/exhibit-e.com/js_libs/mootools/eE/Slideshow.js"></script>

在CCD_ 1上。

因此，只需下载此文件并检查其工作方式即可。它甚至没有缩小。

或者直接在你的网站上使用它。

相关文章：