Adipoli is a simple jQuery plugin used to bring stylish image hover effects.
How To Use
Enabling image hover effect is very simple. Place the below references inside your head tag.
|
1 2 3 |
<link href="css/adipoli.css" rel="stylesheet" type="text/css"/> <script src="js/jquery-1.7.1.js" type="text/javascript"></script> <script src="js/jquery.adipoli.min.js" type="text/javascript"></script> |
If you need image hover on an image with id ‘image1′, call adipoli plugin like this:
|
1 2 3 |
<script> $('#image1').adipoli(); </script> |
Adding Options:
|
1 2 3 4 |
$('#image1').adipoli({ 'startEffect' : 'normal', 'hoverEffect' : 'popout' }); |
Available Options
- startEffect : Default style of image
- hoverEffect : Image style on mouse over
- imageOpacity : opacity of image considered when start effect is transparent or overlay
- animSpeed : Animation speed for the effect
- fillColor : Overlay color
- textColor : Text Color
- overlayText : Default HTML to be displayed on overlay
- slices : Number of slices for slice animations
- boxCols : Number of boxes in a row for box animations
- boxRows : Number of rows for box animations
- popOutMargin : Margin of Image popout
- popOutShadow : Shadow length of popout image. Shadow works for those browsers which support text-shadow css.
Start Effects:
- transparent
- normal
- overlay
- grayscale
Hover Effects:
- normal
- popout
- sliceDown
- sliceDownLeft
- sliceUp
- sliceUpLeft
- sliceUpRandom
- sliceUpDown
- sliceUpDownLeft
- fold
- foldLeft
- boxRandom
- boxRain
- boxRainReverse
- boxRainGrow
- boxRainGrowReverse
Hi, I was wondering being a total noob, how do set animation speed? And also can you start normal and transition to greyscale on hover?
We will create a demo file which will be added to download file list. It will help you to start.
contactme
Thank you, I try first
Hi, this is a great plugin.
It is free to use in a commercial project?
Thanks Costin. You can use it for commercial project.
Does this version of Adipoli keep image sizes set to their original size, or the size that is being displayed? The reason I ask is because when using responsive image dimensions that are being controlled by CSS, the Adipoli version would use the image at it’s actual dimensions. This would cause a problem when the image that popped up would appear to zoom or size down smaller, depending on the size difference.
Awesome thanks for sharing.
Thanks Hammad
Only the hover and popout effect works. the rest don’t. Am I missing a js library?
Sorry for that. The Grayscale effect works only in HTML5 browsers.
I Like Adipoli
Muchas gracias desde Argentina,
me encanta el jquery
Mouse over function also would like to add a click event, after clicking the picture is always color, how to do it?
haha, Modify the Plug-in, finally solved my problem ,now this effect is I need. Thank you!
Amazing plugin,this is what i need.
It’s very helpful for me.Thanks for your work.
Hi! Amazing effects!! but i’m trying to add some text too..says it has a text overlay function but i can’t figure out how it works has anyone got a working example.? or something that can guide me? Thank you@!
Great plugin, is there any demo for it?
There is a demo link in this page.
Can I use it for slices box animation?
Yes you can.
Woawww.. It’s wonderful I like it very much.. I want use in my project on (pptbackgrounds.net) It’s possible?
Absolutely Go ahead.
Can you write an example of box slider? Thanks
What about mouse out reverse effect?
Adipoli .. .. is the auther A Malayalee?
athe. oru pure malayalee anu
I think this is one of the such a lot important information for me. And i am satisfied studying your article. But should remark on few common issues, The web site style is great, the articles is in point of fact great : D. Just right task, cheers
I don’t get where I’m supposed to put the js code in my html file for each image. I’m new to this but I really want to learn!
This part :
$(‘#image1′).adipoli({
‘startEffect’ : ‘normal’,
‘hoverEffect’ : ‘popout’
});
In the html page put this:
$(window).load(function () {
$(‘#image1′).adipoli({
‘startEffect’ : ‘normal’,
‘hoverEffect’ : ‘popout’
});
});
inside a script tag
Hi,
nice script! I’ll use the grayscale effect
Someone knows how can i use that grayscale effect but to display pictures that are not square or rectangle?
Like that 4 images: HERE