基本的jQuery Gallery

如果有人能幫我解決一個小問題，我將不勝感激。我對編寫jQuery返回精通HTML CSS和實現jQuery插件沒有任何認識。基本的jQuery Gallery

我正在建立一個畫廊頁面到這個網站。目前我在jquery carosel中有一排完美的縮略圖。

HERES我所需要的：

當用戶點擊縮略圖我想它的大圖像淡入淡出過大的圖像是當前的階段（第一縮略圖）的頂部。

我相信這對於編寫jquery有基本知識的人來說足夠簡單。

這是我當前的源代碼。

http://www.silverbackstudios.co.uk/laurenmitchell/wedding-gallery.html

謝謝您的幫助！

Jarrett

來源

2012-01-15 jarrett owen

首先你需要一個ID添加到你的大圖像

<img id="gallery-big" src="images/gallery/wedding/large/1.jpg" width="940" height="445" />

之後，我會改變圖像的名稱，以便大圖像和縮略圖都具有相同的名稱，但一個重新放在不同的文件夾中，這樣的：

images/gallery/wedding/large/1.jpg 
images/gallery/wedding/thumbs/1.jpg

如果這樣做了，你可以添加以下的jQuery代碼

var clickable = true; 

$(document).on("click", ".thumb a", function(event) 
{ 
    event.preventDefault(); 

    if (clickable == true) 
    { 
     clickable = false; 

     // Get URL of the large image 
     var nameIMG = $("img", this).attr("src"); 
     nameIMG = nameIMG.replace("thumbs/", "large/"); 

     // Fade in the new image 
     $("#gallery").append('<div class="big-overlay"><img src="' + nameIMG + '" width="940" height="445" /></div>'); 
     $(".big-overlay").fadeIn("slow", function() 
     { 
      // Change the original <img> to the new image 
      $("#gallery-big").attr("src", nameIMG).load(function() 
      { 
       // Remove the overlay 
       $(".big-overlay").remove(); 
       clickable = true; 
      }); 
     }); 
    } 
});

...下面CSS規則

.big-overlay 
{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 10; 
    display: none; 
}

這是什麼代碼的作用是它添加了一個包含大版本點擊縮略圖的疊加層並將其淡入。當這樣做完成後，它會改變原始圖像的搜索路徑（＃gallery-big），然後刪除重疊。

它可能不是最好的解決方案，但它應該做的工作:)

來源

2012-01-15 13:55:28 Tom

感謝您的幫助！我認爲我已經做了你所說的一切正確的，但它不工作。圖像只是在自己的窗口中打開。這裏是更新的來源：http://www.silverbackstudios.co.uk/laurenmitchell/wedding-gallery1.html – 2012-01-15 14:15:19

可能已經錯過了一些東西，將看看它 – Tom 2012-01-15 14:59:24

@jarrettowen - 改變了JQuery代碼一點，它應該在工作，在忙。順便說一句，你必須添加＃大覆蓋CSS到你的樣式表，你還沒有完成。 http://www.fameuppsala.com/test/test.html演示（只有第二個拇指的作品，因爲你沒有爲其他人添加大圖） – Tom 2012-01-15 15:16:23

試試jQuery燈箱插件。

http://leandrovieira.com/projects/jquery/lightbox/

來源

2012-01-15 13:31:57 Shyju

感謝您的回覆。我以前使用燈箱，但他們不是我想要的這個項目。 – 2012-01-15 14:00:05

如果你想自己做，然後添加data-src="location_of_full_size_image.jpg"以拇指和onClick方法大拇指

$('#gallery-big').attr('src', self.data('src'))

來源

2012-01-15 13:34:00 Hauleth

感謝您的快速回復。不幸的是我需要一些幫助來實現你的建議。你能否在上下文中給我一個例子。或者通過Skype聊天。謝謝 – 2012-01-15 13:58:48

基本的jQuery Gallery

回答

相關問題