Hazırladığınız fotoğraf galeri örneklerinde yada kategorilerinizde sıralanmış olan resimlerin üzerine mouse geldiği anda değişik geçiş efektlerinin çalışabilmesi için yapılmış olan bir örnek. Joby Joseph tarafından geliştirilmiş olan Adipoli uygulaması ile sekiz farklı 2D resim efekti kullanabilmeniz mümkün. Her resme farklı farklı hover efektleri uygulayabileceğiniz gibi gruplar halinde de albümler oluşturarak her fotoğraf için aynı hover efektini kullanabilirsiniz.

 Kullanım

• Head etiketleri arasına eklenmesi gereken bölümler.

Js ve Css dosya adresleri : 

<link href="css/adipoli.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.adipoli.min.js" type="text/javascript"></script>

 Javascript :

<script type="text/javascript">
 $(function(){
  $('.resim1').adipoli({
    'startEffect' : 'normal',
    'hoverEffect' : 'popout'
  });
});
</script>

•  Body etiketleri arasına eklenmesi gereken bölüm.

Html :

<img class="img-style resim1" src="img/6_1.jpg"/>

Yukarıda verdiğim JavaScript  ve resim Html koduna bakarsanız hover efektinin resimlere nasıl  sğlandığını daha iyi  farkedebilirsiniz. JavaScript içerisinde  Hover efekti  eklenecek olan nesneye resim1  dedik. Bu işlem iki satırdan oluşuyor ‘startEffect’  görüntünün ilk hali ve ‘hoverEffect’ resmin mouse ile karşılaştıktan sonraki hali.

Hover efektleri eklemek istediğimiz  resimlere javascript elementini yerleştirmemiz gerekiyor. Normal bir resim adresi <img src=”img.jpg”/> şeklindedir  bunun içine yukarıdaki html kodda olduğu gibi class=”img-style resim1″ eklememiz gerekiyor. Resim1  ilk  javascript  seçicimiz. Bunu  daha da  arttırarak her resme farklı farklı  efektler sağlayabiliriz.

Örnek JavaScript :

<script type="text/javascript">
 $(function(){
  $('.resim1').adipoli({
    'startEffect' : 'normal',
    'hoverEffect' : 'popout'
  });
  $('.resim2').adipoli({
    'startEffect' : 'overlay',
    'hoverEffect' : 'sliceDown'
  });
  $('.resim3').adipoli({
   'startEffect' : 'transparent',
   'hoverEffect' : 'boxRandom'
  });
  $('.resim4').adipoli({
   'startEffect' : 'overlay',
   'hoverEffect' : 'foldLeft'
  });
  $('.resim5').adipoli({
    'startEffect' : 'transparent',
    'hoverEffect' : 'boxRainGrowReverse'
  });
  $('.resim6').adipoli({
    'startEffect' : 'greyscale',
    'hoverEffect' : 'normal'
  });
});
</script>

Örnek Html :

     <img class="img-style resim1" src="img/6_1.jpg"/>
     <img class="img-style resim2" src="img/6_2.jpg"/>
     <img class="img-style resim3" src="img/6_3.jpg"/>
     <img class="img-style resim4" src="img/1_1.jpg"/>
     <img class="img-style resim5" src="img/1_2.jpg"/>
     <img class="img-style resim6" src="img/1_3.jpg"/>

StartEffect için kullanılabilecek fonksiyonlar

1. transparent
2. normal
3. overlay
4. grayscale

HoverEffect için kullanılabilecek fonksiyonlar

1. normal
2. popout
3. sliceDown
4. sliceDownLeft
5. sliceUp
6. sliceUpLeft
7. sliceUpRandom
8. sliceUpDown
9. sliceUpDownLeft
10. fold
11. foldLeft
12. boxRandom
13. boxRain
14. boxRainReverse
15. boxRainGrow
16. boxRainGrowReverse