懸停在鏈接上需要WordPress hack /插件，在DIV（圖庫）中顯示圖像

我正在開發一個藝術畫廊的WordPress網站。客戶想要一個藝術家花名冊圖像庫完全像這樣一個：http://www.walkercontemporary.com/artists/懸停在鏈接上需要WordPress hack /插件，在DIV（圖庫）中顯示圖像

我創建了一個自定義帖子類型，生成一個列表，鏈接到一個藝術家的具體內容。現在我需要一個效果，在鏈接的鼠標懸停的相鄰DIV上顯示示例圖像。基於查看上述網站的源代碼，我確信這是一個Dreamweaver功能。我希望將我的解決方案集成到易於使用的CMS的CMS功能中。否則，我會建議客戶尋求另一種解決方案。他們沒有足夠的空間來保存大量藝術家進行手動編碼，他們也不希望縮略圖讓遊客徘徊（這是多少其他解決方案的方法）。

理想情況下，我希望某種REL值或自動生成的onmouseover值在調用與自定義帖子類型中每個藝術家關聯的精選圖像的列表項中生成。這可能嗎？ -thx - Steve

來源

2012-07-06 weevie833

我認爲你必須加載頁面加載所有圖像，然後保持隱藏，除了當前選定的一個，因爲如果你加載它們懸停然後它會讓你等待，直到圖像來自服務器。 – 2012-07-06 03:58:23

由於某種原因，我無法訪問您的網站查看示例。

但是，如果我的理解沒錯，你需要的是3-4行的jQuery的..

$('#thumbs img').click(function(){ 
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large')); 
    $('#description').html($(this).attr('alt'));// if you want to add description also 
});

DEMO

編輯我

OP的評論後 -

我承認我錯了......你不需要4行代碼 - 你只需要2行。 :-)

但我沒有錯，關於相同的代碼將適用於懸停和點擊的事實。它本質上是一樣的。

你只需要改變字（功能）「點擊」與「盤旋」（注意，沒有別的改變）

$('#thumbs img').hover(function(){ 
     $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large')); 
    });

我也承認，有時我理所當然的一些基本技能，我不應該這樣做。當我學習時，我遇到了同樣的問題。所以如果你仍然有疑問 - 我做了3個演示小提琴。

交換讚許
交換與實時鏈接
交換與虛擬鏈接

看到它們在這裏：Demo

我現在希望它是明確的。

編輯II

MY GOD！我又錯了。代碼應該甚至更快！（無需更換（））

$('#largeImage2').attr('src',$(this).attr('href'));

最終Demo（短碼）

（和BTW - 有沒有這樣的事，作爲一個「Dreamweaver的功能」時，該網站是活的服務器上 - Dreamweaver中只是一個生成CODE的UI，可能是html/javascript/php或其他任何東西，它最後只是TXT文件，在這方面 - 它沒有任何「功能」來執行代碼。作爲記事本的GUI :-)。您看到的代碼中的「MM」部分，只是通過Dreamweaver插入的普通JAVASCRIPT（甚至不是最優的）。這是所有）

來源

2012-07-06 03:23:24

我想你不明白這個問題！ – 2012-07-06 03:58:51

也許如此，就像我說的，你的示例URL不能被我訪問。但再看看DEMO。 – 2012-07-06 04:35:03

我沒有問過這個問題，他提到懸停效果可以暫時改變主圖像。 – 2012-07-06 04:39:15

懸停在鏈接上需要WordPress hack /插件，在DIV（圖庫）中顯示圖像

回答

相關問題