Technical Solution

Image popup / popout effect when hovering over an image - How to implement using jQuery adipoli plugin on Drupal/non-Drupal sites

Kiran.kumar | | 1 min read

Enabling the jQuery effects on a page is now no more a mess. Using a plugin called Adipoli, it is as simple as this to show different effects for our content:

  1. Add the necessary js files and css files.
  2. Select the element on which the effect is to be applied.
  3. Invoke the tooltip plugin.


So here is the code:

$(document).ready(function(){
    $('.imgsmile').adipoli({
      'hoverEffect' : 'popout' 
    });
  });

There are still more effects that you can add up on other than popout:

  • normal
  • sliceDown
  • sliceDownLeft
  • sliceUp
  • sliceUpLeft
  • sliceUpRandom
  • sliceUpDown
  • sliceUpDownLeft
  • fold
  • foldLeft
  • boxRandom
  • boxRain
  • boxRainReverse
  • boxRainGrow
  • boxRainGrowReverse


Just change them in the code to see how each of them works.

See the following page for a demo: http://jobyj.in/adipoli/#demo

Download the Adipoli plugin from the following URL: http://jobyj.in/adipoli/#download

You can add either the jquery.js file or jquery.min.js file as you wish. With jquery.min.js, you will have a shorter download time.
So add the jquery.js file, the jquery.adipoli.js file, adipoli.css file and your custom js file to the where you want to use this.

 

 

Related Topics