La plataforma Futudownloads está en desarrollo.

31 may. 2012

Efectos para imagenes con Jquery Adipoli

A muchas personas les gusta agregar efectos a las imagenes que agregan a su sitio, como bordes que cambian de color, galerias animadas y efectos de imagen insertada.
Jquery y desarrolladores de aplicaciones web le permiten a las personas encontrar una variedad de estos complementos para las imagenes dependiendo de el estilo del sitio y el gusto de la persona.
el siguiente plugin jquery se llama Adipoli jQuery Image Hover Plugin for Blogger.
Estos son efectos animados que se muestran al pasar en mouse (cursor) encima.
Lo malo de este plugin es que si cambias el tamaño de la imagen el efecto saldra mal.
esto es para imagenes en su tamaño real.
  • Ve a Plantilla, luego has click en Edicion de HTML y busca la etiqueta </head>.
  • justo encima de ella agrega lo siguiente.
 <link href='http://dl.dropbox.com/u/53097108/ihojosestudios/example/Adipoli-jquery-img-hover-fx/adipoli.css' rel='stylesheet' type='text/css'/>
<script src='http://dl.dropbox.com/u/53097108/ihojosestudios/example/mfriendlytooltip/jquery-1.7.2.min.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/53097108/ihojosestudios/example/Adipoli-jquery-img-hover-fx/jquery.adipoli.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/53097108/ihojosestudios/example/Adipoli-jquery-img-hover-fx/jquery.adipoli.min.js' type='text/javascript'/>
<script type='text/javascript'>
           // IJ tutorials //<![CDATA[
            $(function(){
                $('.row1').adipoli({
                    'startEffect' : 'normal',
                    'hoverEffect' : 'popout'
                });
                $('.row2').adipoli({
                    'startEffect' : 'overlay',
                    'hoverEffect' : 'sliceDown'
                });
                $('.row3').adipoli({
                    'startEffect' : 'transparent',
                    'hoverEffect' : 'boxRandom'
                });
                $('.row4').adipoli({
                    'startEffect' : 'overlay',
                    'hoverEffect' : 'foldLeft'
                });
            $('.row5').adipoli({
                'startEffect' : 'transparent',
                'hoverEffect' : 'boxRainGrowReverse'
            });
            $('.row6').adipoli({
                'startEffect' : 'grayscale',
                'hoverEffect' : 'normal'
            });
        });
            //]]>
        </script>
  • Guardas los cambios.
  • Ahora cuando vallas a crear una entrada y insertas una imagen puedes hacer cualquiera de estos cinco efectos.
PopOut
Codigo:
<img class='row1' src='URL de la imagen'/>
Ejemplo:


sliceDown
Codigo:
<img class='row2' src='URL de la imagen'/>
Ejemplo:


boxRandom
Codigo:
<img class='row3' src='URL de la imagen'/>
Ejemplo:


FoldLeft
Codigo:
<img class='row4' src='URL de la imagen'/>
Ejemplo:


boxRainGrowReverse
Codigo:
<img class='row5' src='URL de la imagen'/>
Ejemplo:


Fuente | Jobyj.in