[英]Change thumbnail image on rollover in the loop
I've got a question. 我有一个问题。 I am working with wordpress and have a blog which posts are presented with thumbnails.
我正在与wordpress合作,并且有一个博客,其中的帖子均带有缩略图。 I'd like those thumbnails change when you put your mouse on.
我希望您将鼠标放在上面时缩略图会改变。 The problem is that I want different images change thumbnails.
问题是我希望其他图像更改缩略图。 basically, each thumbnail would have its unique rollover image.
基本上,每个缩略图都有其唯一的翻转图像。 the problem is that i don't quite know how to attach js code to the loop.
问题是我不太了解如何将js代码附加到循环中。 And how it should look like to create different rollover images for different posts
以及如何为不同的帖子创建不同的翻转图像
if i attach js code to the permalink, it will change all thumbnails into the same picture. 如果我将js代码附加到永久链接,它将把所有缩略图更改为同一张图片。 also, i was told it is possible to do with jquery.
另外,有人告诉我可以用jquery做。 is it worthy?
值得吗
i was trying to be as clear as possible 我试图尽可能清楚
any help is appreciated! 任何帮助表示赞赏!
You could add a custom field to each of your posts called hoverImg
, which value is the link to the image you want to use as a rollover image. 您可以在每个帖子中添加一个自定义字段,称为
hoverImg
,该值是指向您要用作过渡图像的图像的链接。
Then you fetch the link in the loop, and add it: 然后,您在循环中获取链接,并将其添加:
<?php $hover_image = get_post_meta($post->ID, 'hoverImg', true); ?>
<img class="hover-img" src="<?php echo $hover_image; ?>" />
this image should be initially invisible, and positioned as an overlay to your thumbnail. 此图像最初应该是不可见的,并且应作为缩略图的叠加层放置。 Then just show it on hover with jquery.
然后只需将其显示在jquery上即可。
Since I dont have your image, I've created a jsFiddle with two divs, one representing your thumbnail, and one representing your rollover image to mimic the effect: 由于我没有您的图像,因此我创建了一个jsFiddle,它具有两个div,一个代表您的缩略图,一个代表您的过渡图像,以模仿效果:
http://jsfiddle.net/9Xa92/1/ http://jsfiddle.net/9Xa92/1/
You should just replace the <div class="hover-img"></div>
in the jsfiddle with the actual thumbnail image (created above). 您只需将jsfiddle中的
<div class="hover-img"></div>
替换为实际的缩略图(如上创建)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.