Posted by : Magnus Wednesday 13 June 2012

Adipoli: jQuery Image Hover Plugin
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

Leave a Reply

Subscribe to Posts | Subscribe to Comments

- Copyright © Bjonk Design -