Question

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

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

Answer 1

如果你正在制作同一个画廊，为什么不要只看到这个画廊的代码并找出它是如何工作的？

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

on div#slideshow。

所以只需下载此文件并检查其工作原理。它甚至没有缩小。

或者只是在您的网站上使用它。

网站图片库

1 个答案: