jQuery script for swapping images on hover/rollover on Drupal 7 + Views
Category:
I tried to find the way to make do the rollover image using Views but after searching and looking into many websites, it doesn't seem to have clear the instruction how to do it. So, here is what I did to make it work. First of all, you need to download and install Image URL Formatter here -> http://drupal.org/project/image_url_formatter
1. Create a new content with 2 image fields. The Regular image field and a Rollover image field.
2. Create a new view. In the FIELDS, add Rollover image field first, follow by Regular image field.
3. Configure Rollover image field
- Check on "Exclude from display"
- Set Formatter as Image URL
Rollover Image Setting Screen Capture
4. 3. Configure Regular image field as below :
- Set Formatter as Image URL
- Check on Rewrite the output of this field
- Type below HTML into the text box
<img src="[field_regular_image]" rel="[field_rollover_image]" class="rollover" />
Regular Image Setting Screen Capture
5. Now, save your views. Then, you have to create a JS file to make it work. Let's created it in your theme directory. I use Zeropoint Theme, so, I create rollover.js in _custom folder under Zeropoint directory :
6. in rollover.js, paste the code below into it :
(function ($) { $(document).ready(function() { //rollover swap images with rel var img_src = ""; var new_src = ""; $(".rollover").hover(function(){ //mouseover img_src = $(this).attr('src'); //grab original image new_src = $(this).attr('rel'); //grab rollover image $(this).attr('src', new_src); //swap images $(this).attr('rel', img_src); //swap images }, function(){ //mouse out $(this).attr('src', img_src); //swap images $(this).attr('rel', new_src); //swap images }); //preload images var cache = new Array(); //cycle through all rollover elements and add rollover img src to cache array $(".rollover").each(function(){ var cacheImage = document.createElement('img'); cacheImage.src = $(this).attr('rel'); cache.push(cacheImage); }); }); })(jQuery);
7. Now, edit "zeropoint.info" to load rollover.js. Just add below line into the file :
scripts[] = /_custom/rollover.js
It will look like below image :
That's it. Now, test your rollover image. It should work the way we want it to be.
Software Tested :
- Drupal 7.18
- Views 7.x-3.5
- Image URL Formatter 7.x-1.0
Source :
- http://grasmash.com/article/simple-jquery-script-swapping-images-hoverrollover
Comments
Elian Eve
Thu, 03/25/2021 - 00:57
Permalink
Check It
Usually I never comment on blogs but your article is so convincing that I never stop myself to say something about it. You are doing a great job Man. keep it up. Here am also tried something. You may check it.
https://bit.ly/3cp1Ln3
Ruslanbow
Thu, 03/25/2021 - 21:57
Permalink
стеклянные перегородки цены в минске
Привет друзья!
Предлагаем Вашему вниманию изделия из стекла для дома и офиса. Наша организация работает 10 лет на рынке этой продукции в Беларуси. Изготовим для вас и установим душевую кабину из стекла на заказ. Профессиональные замерщики и монтажники. Мы используем различные типы материалов и фурнитуры для создания душевых кабин и душевых перегородок любого дизайна и конструкции, устанавливаем на поддоны или без поддонов. У нас вы сможете заказать стекло для душевой кабины по индивидуальным размерам и проекту. Выполним доставку изделия и его монтаж.
Более подробная информация размещена https://drive.google.com/file/d/13CAPanRKgpkKCcaHzI0EiaMtWM0saPJO/view?u...
techrotsz
Tue, 04/13/2021 - 22:46
Permalink
In this male ruling world, a
In this male ruling world, a ton of ladies have good thoughts and a little wish to go into business. For some ladies it simply remains as https://www.stuffroots.com Planning to switch your telephone? This is actually an energizing and bright thing. Yet, kindly remember the significant information put away on the old telephone.
techrotsz
Wed, 04/14/2021 - 21:42
Permalink
Extraordinary compared to
Extraordinary compared to other tip I can give you is that you Trust is one of the fundamental business resources. On the off chance that you https://www.stuffroots.com expect to improve the change rates, maybe you should begin by upgrading your image trust. As Steve Forbes says, "Your image is the absolute most significant speculation you can make in your business.
Pages
Add new comment