Изменить миниатюру изображения на ролловере в цикле

Question

У меня есть вопрос. Я работаю с WordPress и у меня есть блог, сообщения которого представлены с миниатюрами. Я хотел бы, чтобы эти миниатюры менялись, когда вы нажимаете на них Проблема в том, что я хочу, чтобы разные картинки меняли миниатюры. в основном, каждая миниатюра будет иметь свое уникальное изображение ролловера. проблема в том, что я не совсем знаю, как прикрепить код js к циклу. И как должно выглядеть создание разных ролловеров для разных постов
если я прикреплю код js к постоянной ссылке, он превратит все миниатюры в одно и то же изображение. Кроме того, мне сказали, что это можно сделать с помощью jquery. это достойно?
я пытался быть максимально ясным
любая помощь приветствуется!

Answer 1

Вы можете добавить настраиваемое поле для каждого из ваших сообщений под названием hoverImg, значение которого является ссылкой на изображение, которое вы хотите использовать в качестве ролловера.

Затем вы получаете ссылку в цикле и добавляете ее:

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

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

это изображение должно быть изначально невидимым и размещаться как наложение на миниатюру. Тогда просто покажите это при наведении курсора.

Поскольку у меня нет вашего изображения, я создал jsFiddle с двумя элементами div, один из которых представляет ваш эскиз, а другой - ваше изображение при наведении курсора, чтобы имитировать эффект:

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

Вы должны просто заменить <div class="hover-img"></div> в jsfiddle с фактическим уменьшенным изображением (созданным выше).