如何使用jQuery加載照片？

我正在使用jquery在縮略圖單擊時在窗口中顯示更大的圖像。這方面效果很好。但是，我有一系列的窗口，當我關閉一個窗口時，當我打開一個新窗口時，主圖像無法加載。如何使用jQuery加載照片？

我的工作在本頁面：http://ee.rouviere.com/web/portfolio

如果單擊縮略圖中的任何一個它會彈出一個窗口，您可以通過點擊縮略圖。當你關閉窗口時，jQuery清除這些值。但是，當您單擊另一個縮略圖時，直到您單擊其中一個縮略圖纔會加載主圖像。

如何在窗口打開時加載主圖像？

這是我使用的jQuery。我從這開始：

$("a:has(img.web-port)").click(function() { 
    var largePath = $(this).attr("href"); 
    var caption = $(this).attr("title"); 
    $(".photo_large").attr({ src: largePath}); 
    $(".caption1").text(caption); 
    return false; 
});

這很適合觸發較大的圖像。但後來我加了這一點，因爲最後的主圖像也不會在我打開下一個窗口中加載：

$("#fancybox-close").click(function(){ 
    $(".photo_large").attr({ src: ''}); 
    $(".caption1").text(''); 
});

我真的很感激一些這方面的幫助。運營商正在等待您的迴應。

謝謝！

來源

2011-03-25 fmz

爲什麼你不只是將fancybox附加到使用正常的方式？你似乎正在重寫fancybox本來會使用的方法。 – 2011-03-25 18:47:27

你的錯誤是，你選擇所有元素白色class =「photo_large」的惠普jQuery選擇器$（「。photo_large」）。所有這些都在頁面中 - 甚至是隱藏的，所以這就是爲什麼當你從主頁打開另一個縮略圖時，你看到舊的大圖像...很簡單。

您的解決方案也是錯誤的，因爲當您關閉預覽窗口時，您選擇了所有元素$（「。photo_large」）並將它們的「src：」更改爲無！

所以這裏是我的解決方案：

刪除：

$("#fancybox-close").click(function(){ 
    $(".photo_large").attr({ src: ''}); 
    $(".caption1").text(''); 
});

替換：

$(".photo_large").attr({ src: largePath}); 
$(".caption1").text(caption);

有了：

$(this).parent().parent().parent().prev().find(".photo_large").attr({ src: largePath});    
$(this).parent().parent().parent().next().find(".caption1").text(caption);

應該工作，如果我算上父母的權利.. 。:) GBY！

來源

2011-03-25 19:18:09

輝煌。謝謝。 – fmz 2011-03-25 19:48:12

對不起，但這簡直是無稽之談。如果你不打算正確使用它的方法，爲什麼要加載一個jQuery插件？和parent（）。parent（）。parent（）？認真爲什麼不父母（選擇）？閱讀API！這是jQuery IMO的問題，入門級太低，所以太容易做不好。 – 2011-03-25 19:57:50

@James：這對你來說可能是一個問題，但對於那些沒有JS經驗的人來說，它是通向一種優秀語言的門戶。我同意做事情有正確的方式和錯誤的方式，但錯誤的方式有時對某些人來說工作得很好。爲什麼不把這個作爲答案來提供，並且可能得到它的一些功勞，而不是發表一個相當苦澀的評論？ – Dutchie432 2011-03-25 20:27:55

如果不是清除源代碼，而只是在關閉時隱藏圖像，並在打開時再次顯示它？

$("a:has(img.web-port)").click(function() { 
    var largePath = $(this).attr("href"); 
    var caption = $(this).attr("title"); 
    $(".photo_large").attr({ src: largePath}); 
    $(".photo_large").show(); // <---------------------------LOOK HERE 
    $(".caption1").text(caption); 
    return false; 
}); 

$("#fancybox-close").click(function(){ 
    $(".photo_large").hide(); // <---------------------------LOOK HERE 
    $(".caption1").text(''); 
});

來源

2011-03-25 18:42:23 Dutchie432

我添加了代碼，它仍然執行相同的操作。請看一下。 – fmz 2011-03-25 18:51:40

在仔細審視這件事。顯示大圖像取決於點擊縮略圖。窗口打開時必須有某種東西可以觸發它。 – fmz 2011-03-25 18:57:43

只要使用本地fancybox方法來做到這一點。

<a id="exampleOne" title="title you want to pass" href="path to large image"> 
    <img alt="exampleOne" src="path to small image"> 
</a> 

$(document).ready(function(){ 
    $("a#exampleOne").fancybox(); 
});

來源

2011-03-25 18:51:41

James。在這裏幫助我。我在該頁面上有16個條目，更不用說裏面的所有縮略圖。這將如何涵蓋這種情況？謝謝。 – fmz 2011-03-25 18:56:05

這裏沒有問題的例子。 http://jsfiddle.net/jamessouth/6fXup/ – 2011-03-25 19:12:42

你的問題是你的目標是你的.class選擇器的所有元素。他們應該是相對於當前顯示的.frame。它

實施例上jsfiddle工作。

來源

2011-03-25 19:39:02

馬克。是的，這個選項也起作用。這比上面的選項複雜一點，但值得采用。謝謝。 – fmz 2011-03-25 20:09:43

如何使用jQuery加載照片？

回答

相關問題