没有拇指的图片库答案

【问题标题】：Image Gallery without Thumbs没有拇指的图片库
【发布时间】：2012-09-25 15:59:14
【问题描述】：

我正在尝试创建一个 jQuery 图片库（我宁愿创建一个，而不是使用插件）我看过几个不同的教程和选择器，每个都使用拇指。现在我当前的代码是这样的：

$(document).ready(function(){
  $('img').click(function(){
    $(this).clone().appendTo('#imageViewer').css({"opacity":1,"height":"50%"});
  })
});

问题，我有它，当单击另一个图像时，我无法替换图像。有没有办法只使用常规图像但使用 CSS 来缩小它们，即 >height: 20%;不透明度：0.2；但是当点击时，它们会显示在页面上的一个 div 中 >height: 50%;不透明度：1；

【问题讨论】：

标签： jquery image gallery clone appendto

【解决方案1】：

见DEMO

HTML

<div id="content">
    <div id="mainImg"><img src="http://youchew.net/wiki/images/9/9c/One.png" /></div>
  <div id="allImg">
    <img src="http://youchew.net/wiki/images/9/9c/One.png" >
    <img src="http://seo-hacker.com/wp-content/uploads/2010/04/22.png" >
    <img src="http://webtrafficnews.com/wp-content/uploads/2012/03/3.png" >

  </div>
  </div>

CSS

#content {width:300px;border:solid 1px #f00;overflow:auto; margin:0 auto;}
#allImg {}
#allImg img{ float:left; width:30%;opacity:.5; cursor:pointer; margin:5px}

jQuery

$(function(){

  $("#allImg").on("click","img",function(){
    $("#mainImg img").prop("src",$(this).prop("src"));

  });

});

编辑：

Updated slideDemo

CSS

#mainImg {width:300px; height:300px;}

jQuery

$("#allImg").on("click","img",function(){
    newImage = $(this);
    $("#mainImg img").slideUp(500,function()
      {
        $("#mainImg img").prop("src",newImage.prop("src"));

       $("#mainImg img").slideDown(500);
      });

  });

【讨论】：

你可以添加任何你想要的动画
你将如何添加动画，即>幻灯片？

【解决方案2】：

尝试将所有图像放入包装器 div 中。将 div 设置为“position:relative”，将图像设置为“position:absolute;top:0;left:0”。

然后，JavaScript：

var galleryImages = $('#galleryWrapper').find('img');
var firstImage = galleryImages.first(), lastImage = galleryImages.last();
var currentImage=firstImage;

//hide all images but the first
firstImage.siblings().hide();

galleryImages.click(function(){
    //hide the current image
    currentImage.hide();

    //if not last image, show the next
    if (currentImage!=lastImage){
        currentImage=currentImage.next();
        currentImage.show();
    }

    //if last image, go back to the first
    else {
        currentImage=firstImage;
        currentImage.show();
    }
});

随意调整 CSS 中的图片大小。

【讨论】：