viernes, 12 de septiembre de 2014

jQuery Photo Image Effects - Plugin para aplicar efectos a imágenes


jQuery Photo Image Effects es un plugin jQuery que permite aplicar diferentes efectos a la imagen o imágenes seleccionadas.

Se toma una lista de uno o más elementos de imagen en una página HTML y aplica diferentes efectos de imagen utilizando atributos CSS.

Permite girar una imagen con un ángulo fijo o aleatorio dentro de un rango determinado, añadir un borde, añadir una sombra, etc ...


Entre los archivos descargados vas a encontrar un archivo de ejemplo en examples/example1.html

jQuery Photo Image Effects - Plugin para aplicar efectos a imágenes
jQuery Photo Image Effects - Plugin para aplicar efectos a imágenes

Código de example1.html 


<!DOCTYPE html>
<html>
  <head>
    <title>Create photo effect on images</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- load jQuery -->
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <!-- load jQuery plugin for photoImages -->
    <script src="../jquery.photoimages.min.js"></script>
    <script>
      jQuery(document).ready(function() {
        // Create photoImages with a seed-based rotation
        jQuery('.test1').photoImages({
          boxShadowOffsetX: '10px',
          boxShadowOffsetY: '10px',
          boxShadowLength: '10px',
          boxShadowColor: '#7f7f7f',
          marginRight: '10px',
          rotate: 'seed'
        });
        // Create photoImages with a random-based rotation
        jQuery('.test2').photoImages({
          boxShadowOffsetX: '10px',
          boxShadowOffsetY: '10px',
          boxShadowLength: '10px',
          boxShadowColor: '#7f7f7f',
          marginTop: '15px',
          marginRight: '15px',
          marginBottom: '15px',
          rotateMin: -20,
          rotateMax: 20,
          rotate: 'random'
        });
        // Create photoImages with aa animated rotation
        jQuery('.test3').photoImages({
          rotate: 'animate',
          rotateStep: -3,
          rotateDelay: 20
        });
      });
    </script>
  </head>
  <body>
    <div>
      <img src="images/image1.png" class="test1" />
      <img src="images/image2.png" class="test1" />
      <img src="images/image3.png" class="test1" />
      <img src="images/image4.png" class="test1" />
      <img src="images/image5.png" class="test1" />
    </div>
    <div>
      <img src="images/image1.png" class="test2" />
      <img src="images/image2.png" class="test2" />
      <img src="images/image3.png" class="test2" />
      <img src="images/image4.png" class="test2" />
      <img src="images/image5.png" class="test2" />
    </div>
    <div>
      <img src="images/image1.png" class="test3" />
      <img src="images/image2.png" class="test3" />
      <img src="images/image3.png" class="test3" />
      <img src="images/image4.png" class="test3" />
      <img src="images/image5.png" class="test3" />
    </div>
  </body>
</html>