在循環中更換縮略圖圖像

我有個問題。我正在與wordpress合作，並有一個博客文章以縮略圖形式呈現。當你將鼠標放在上面時，我希望這些縮略圖會發生變化。問題是我想要不同的圖像更改縮略圖。基本上，每個縮略圖將具有其獨特的翻轉圖像。問題是我不知道如何將js代碼附加到循環中。以及它應該如何爲不同的帖子創建不同的翻轉圖像
如果我將js代碼添加到永久鏈接，它會將所有縮略圖更改爲相同的圖片。還有，我被告知可以用jquery做。這是值得的嗎？
我試圖儘可能清楚
任何幫助表示讚賞！在循環中更換縮略圖圖像

來源

2011-03-29 Sasha

您可以爲每個帖子添加一個名爲hoverImg的自定義字段，該值是指向要用作翻轉圖像的圖像的鏈接。

然後你在取環的鏈接，並將其添加：

<?php $hover_image = get_post_meta($post->ID, 'hoverImg', true); ?> 

<img class="hover-img" src="<?php echo $hover_image; ?>" />

這個形象應該是最初不可見的，並定位爲覆蓋到你的縮略圖。然後用jquery懸停顯示它。

因爲我沒有你的形象，我創建了一個用的jsfiddle兩個div，一個代表你的縮略圖，以及一個代表你的鼠標經過圖像模擬的效果：

http://jsfiddle.net/9Xa92/1/

你應該只需更換在jsfiddle中的<div class="hover-img"></div>與實際縮略圖（上面創建）。

來源

2011-03-29 23:27:04

我設法將自定義字段和函數插入到循環中，但現在我的hoverImg正好站在縮略圖的旁邊，並且它是可見的。這可能是由於我使用< ul >將縮略圖放入特定位置另一件事是我不知道jQuery的太多，所以我結束了這樣的代碼（這可能是錯誤的） 'jQuery（document）.ready（ function（）{jQuery（'img.wp-post-image'）。hover（ function（）{ jQuery（'this'）。attr（「src」，「hoverImg」）; }，function（） { jQuery（'this'）。attr（'src'，'wp-post-image'）; }）;' 我使用jQuery而不是$，導致我閱讀WP無法識別$ – Sasha 2011-03-30 03:05:41

Wordpress可以正常使用$ - 你在哪裏讀過的其他地方？這不應該引用，所以將JQuery（'this'）更改爲$（this）並從那裏開始 – 2011-03-30 08:23:10

在循環中更換縮略圖圖像

回答

相關問題