圖像庫沒有大拇指

我想創建一個jQuery圖像庫（我寧願創建一個，比使用插件）我看了幾個不同的教程和選擇器，其中每個使用大拇指。現在我當前的代碼是這樣的：圖像庫沒有大拇指

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

的問題，我認爲，在單擊另一個圖像時，我不能沒有圖像。有沒有反正只是使用常規圖像，但使用CSS縮小它們，即>高度：20％;不透明度：0.2;但點擊後，它們會顯示在頁面上的div> height：50％;不透明度：1;

來源

2012-10-04 user1720424

看到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); 
     }); 

    });

來源

2012-10-04 16:03:46 Champ

你可以添加任何你想要的動畫 – Champ

你將如何添加動畫即幻燈片？ – user1720424

請參閱updateDemo – Champ

嘗試把所有的圖像放在包裝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的圖像無論你請。

來源

2012-10-04 15:51:43

圖像庫沒有大拇指

回答

相關問題