Technical Solution
Image popup / popout effect when hovering over an image - How to implement using jQuery adipoli plugin on Drupal/non-Drupal sites
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:
- Add the necessary js files and css files.
- Select the element on which the effect is to be applied.
- 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.