jQuery script for swapping images on hover/rollover on Drupal 7 + Views

Submitted by BXTra on Thu, 01/24/2013 - 10:27

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
3. Configure Rollover image field
 

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
4. Configure Regular image field
4. Configure Regular image field

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 :

rollover.js file location

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 :

zeropoint.info

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

Phinkalily

Thu, 06/13/2013 - 20:17

thanks for the tutorial :)
I think this one is more simpler ,I think CSS can do the trick
Goal: To make a rollover state for images in the view.
I have a regular image field and rollover image field in my views.
I just display both of them using "image" as formatter.
My arrangement of the fields are : Regular image then Rollover image
~~In my css~~
I make the regular image field "position:absolute"
so it's on the top now of the rollover image
When hover , I give the regular image field "opacity:0.1" so that the rollover image at the back will appear.
No JQuery , No other modules installed.. I think it can do the trick :)

Math

Sun, 06/29/2014 - 04:05

Hi Phinkalily
Could you share your CSS code with us?
Many thnaks

Jake Postell

Wed, 08/07/2013 - 09:42

I currently have several images using this code on a page and when switching from one to another sometimes they duplicate to another image or switch hover states. Is there something wrong with this code and the current version of Drupal 7?

Hetal

Sun, 10/13/2013 - 07:34

I have tried above call and it's working perfectly fine. It's working on image hover. I would like to change image image on link hover. Can you suggest me any solution???

Urmila

Thu, 03/05/2015 - 01:20

javascript for rollover is working in other browsers but, for IE8 & IE9 it is not working. Can you suggest any solution?

Capono

Sat, 05/30/2015 - 00:20

Nice tutorial, works like a charm. I would like to add something:
- clear cache after changing .info file (/admin/config/development/performance)
- add title and alt attributes to image tag in views (in my case it's term name)
<img src="[field_regular_image]" rel="[field_rollover_image]" class="rollover" alt="[name]" title="[name]"/>

Balakrishnan

Fri, 09/04/2015 - 00:11

I want to give a link to image, when clicking particular image then redirect to that particular content. How to do that ?

farmingsimulator

Sun, 01/05/2020 - 23:56

Cultivating Simulator 20 highlights more than 100 dependably repeated cultivating vehicles and apparatuses from a wide scope of industry-driving producers. With the arrival of driving agribusiness hardware makers like Case IH, New Holland, Challenger, Fendt, Valtra, Krone, Deutz-Fahr and some increasingly, Farming Simulator 20 additionally presents John Deere, the world's biggest organization of its sort.
https://farmingsimulator20.com/

adharcardly

Mon, 01/20/2020 - 22:10

Adhaar card fills in so far another evidence of personality and an extraordinary national character card. Yet, to note, it doesn't supplant or function as an other instead of driving permit, Voter ID, PAN, and so on. Holding an Adhaar Card is intentional however has gotten obligatory so as to profit number of appropriations and plans connected with it. There are number of plans and appropriations by government divisions, banks, and numerous different foundations where holding an Aadhar card is required so as to profit the advantages gave by the individual establishments. We have given the perusers a rundown on a portion of the plans and appropriations where Aadhar is Mandatory.
https://aadhar-uidai.in/

beautifulovequote

Tue, 01/28/2020 - 05:35

Dig inside, and find out what you would love to have show up for your lifestyles this 12 months. This enables you do your element. https://www.bestinfohub.com/cute-love-quotes It is an affirmation which you're inquisitive about completely residing life inside the year to return.” - Melody Beattie, Writer it marks the day of the sun's transit into zodiac signal Makara

erobberzz

Tue, 01/28/2020 - 23:41

The expression application is all the more usually utilized when alluding to a portable application on a cell phone or tablet while application is utilized all the more regularly while depicting work area applications. Be that as it may, these terms can be utilized conversely. The repeating theme is they are intended for client collaboration.

<a href="https:...

Tue, 01/28/2020 - 23:42

The expression application is all the more usually utilized when alluding to a portable application on a cell phone or tablet while application is utilized all the more regularly while depicting work area applications. Be that as it may, terms can be utilized conversely. The repeating theme is they are intended for client collaboration.

erobberzz

Tue, 01/28/2020 - 23:43

The expression application is all the more usually utilized when alluding to a portable application on a cell phone or tablet while application is utilized all the more regularly while depicting work area applications. Be that as it may, these terms can be utilized conversely. The repeating theme is they are intended for client collaboration.

erobberzz

Tue, 01/28/2020 - 23:43

The expression application is all the more usually utilized when alluding to a portable application on a cell phone or tablet while application is utilized all the more regularly while depicting work area applications. Be that as it may, https://www.erobber.in/2019/03/omegle-download.html these terms can be utilized conversely. The repeating theme is they are intended for client collaboration.

fbfullsiteez

Mon, 02/03/2020 - 00:19

It is a very entangled and untidy procedure, which you find through google Safari UA String hack. Have a reinforcement http://karmaloungeofwestchester.com/facebook-full-site-desktop-version/ of your records and give it a shot. It will empower you to have full forms of the considerable number of locales you visit. Never empower the Request work area rendition when you have gotten to the URL "m.facebook.com" which will take you to the iPad or Tablet adaptation of Facebook which is simply in zoom form of the facebook fundamental variant.

milf343

Mon, 02/03/2020 - 07:21

milf cam http://milf-cam.xyz

milf413

Mon, 02/03/2020 - 09:29

milf cam http://milf-cam.xyz

shotbytesgo

Wed, 02/05/2020 - 04:45

Music could be of various sorts by the soothing song of antique Hindi movie tunes to the peppy element songs of the modern-day world. https://shotbytes.com/9xmovies/ Among the factors for that music is most commonly utilised in modern times is thru workout or exercise sessions. Music gives motivation.

newfshreviews

Thu, 02/13/2020 - 03:21

This delightful interlocking heart configuration is one of the most well known cake serving sets available. This plan is from the Finishing contacts Collection that highlights handles made of white poly tar with interlocking hearts and a hardened https://freshupreviews.com/ steel server and treated steel blade cutting edge.
The proportions of these two wonderful frill are 12 1/8" x 1 for the cake blade and 9 ¾" x 2 for the cake server. The handles fit serenely in your grasp for simple cake cutting and treat serving. This stunning cake serving set comes bundled in a container with an unmistakable top and damask plan in dark and white to keep them in when you are not utilizing them.

V

Thu, 02/13/2020 - 23:36

The office archives the recent developments, gives the data, screens the realities, and breaks down and deciphers the occasions utilizing the most recent media innovations.

sanjuneez

Sat, 02/15/2020 - 04:08

There are numerous such https://carsforyourhelp.com/dealerships-with-car-donation-programs/ autonomous foundations on vehicle gift which offer the vehicle to the destitute and the needy individuals like understudies, single parents or for business and so forth. You can get some answers concerning them through your nearby church. Preceding making any commitment please guarantees that they are not charging you any cash for the procedure. This can prompt a bogus cause bunch too. Along these lines, better stick with the notable names as it were.

camera de recu...

Sun, 02/16/2020 - 21:12

Bonne Vision Nocturne Une puce de capteur améliorée guarantee une visibilité claire dans des conditions de faible luminosité. L'éclairage peut être aussi bas que 0,1 lux (pour votre référence, une nuit avec la pleine lune est évaluée à environ 0,1 lux et une journée ensoleillée à environ 10 000 lux.

<a href="https:...

Fri, 02/21/2020 - 03:55

It truly gives a assignment if you have as many taxes, license costs, integrity costs … to have sports activities books operators in Illinois be able to make money.”Since then, the IGB has been figuring out the regulations that will govern how playing on sports activities .

Add new comment

More information about text formats

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.