Nanogallery2 un plugin para galerías web



Nanogallery2 un plugin para galerías web es un plugin que trabaja con javascript para crear galerías de imágenes hermosas, modernas y de alta calidad, el trabajo de este plugin es simple ya que convierte etiquetas img de html en un excelente visor de imágenes, una de las cualidades es que es compatible con la mayoría de los manejadores de contenido populares.

En el siguiente enlace: http://nanogallery2.nanostudio.org/demonstration.html puedes ver el ejemplo.

Su implementación consiste en agregar referencias a los archivos css y js como se puede ver en la siguiente linea de código.


 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <link href="https:[email protected]/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
 <script type="text/javascript" src="https:[email protected]/dist/jquery.nanogallery2.min.js"></script>

Una vez que agregues esto, puedes agregar la estructura de imágenes como se muestra en las siguientes lineas de código:

<div id="nanogallery2" data-nanogallery2='{
        "thumbnailHeight": 210, "thumbnailWidth": 210,
        "thumbnailL1GutterWidth": 90,
        "thumbnailL1GutterHeight": 90,
        "itemsBaseURL": "http://nanogallery2.nanostudio.org/samples/",
        "thumbnailStacks": 4,
        "thumbnailStacksTranslateZ": 0.3,
        "thumbnailStacksRotateX": 0.9,
        "galleryBuildInit2": "perspective_900px|perspective-origin_50% 150%",
        "thumbnailHoverEffect2": "thumbnail_translateZ_0px_100px_easeOutQuad_400 | thumbnail_rotateX_0deg_10deg_easeOutBack_200 | thumbnail_rotateX_10deg_0deg_delay250_keyframe_hoverin_easeOutBack_400"
      }'>
      <a href="berlin1.jpg" data-ngthumb="berlin1t">Berlin 1</a>
      <a href="berlin2.jpg" data-ngthumb="berlin2t">Berlin 2</a>
      <a href="berlin3.jpg" data-ngthumb="berlin3t">Berlin 3</a>
    </div>

You may also like...