6.08.14, 16:07
0 комментарий
  Уроки / Скрипты

jQuery lightGallery: миниатюрная галерея с jQuery-лайтбоксом

jQuery lightGallery представляет собой миниатюрную галерею с лайтбоксом для отображения изображений и видеороликов. Она представлена с адаптивным шаблоном и поддержкой touch для использования посредством мобильных устройств. Она отлично поддерживает размещение видео с youtube и vimeo. Стоит отметить, что она отлично работает во всех современных браузерах.

Как использовать lightGallery?

Код
Добавьте следующий код в head вашего сайта.

<link type="text/css" rel="stylesheet" href="css/lightGallery.css" />                    
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/lightGallery.js"></script>
// Do not include both lightGallery.js and lightGallery.min.js


Структура HTML
Создание элементов ul и li и добавление пути к изображение или видео внутри data-src, которые вы хотите открыть в lightGallery.

<ul id="lightGallery">
  <li data-src="img/img1.jpg">
    <img src="img/thumb1.jpg" />
  </li>
  <li data-src="img/img2.jpg">
    <img src="img/thumb2.jpg" />
  </li>
  ...
</ul>


Вызов lightGallery!

<script type="text/javascript">
  $(document).ready(function() {
    $("#lightGallery").lightGallery(); 
  });
</script>


Играть с настройками

<script type="text/javascript">
  $(document).ready(function() {
    $("#lightGallery").lightGallery({
      // Elements
      thumbnail   : true,  // Whether to display a button to show thumbnails.
      caption     : false, // Enables image captions. Content is taken from "data-title" attribute.
      captionLink : false, // Makes image caption a link. URL is taken from "data-link" attribute.
      desc        : false, // Enables image descriptions. Description is taken from "data-desc" attr.
      counter     : false, // Shows total number of images and index number of current image.
      controls    : true,  // Whether to display prev/next buttons.
 
      //preload
 
      preload     : 1,  //number of preload slides. will exicute only after the current slide is fully loaded. ex:// you clicked on 4th image and if preload = 1 then 3rd slide and 5th slide will be loaded in the background after the 4th slide is fully loaded.. if preload is 2 then 2nd 3rd 5th 6th slides will be preloaded.. ... ...
 
      // Transitions
      mode   : 'slide',  // Type of transition between images. Either 'slide' or 'fade'.
      useCSS : true,     // Whether to always use jQuery animation for transitions or as a fallback.
      easing : 'linear', // Value for CSS "transition-timing-function" prop. and jQuery .animate().
      speed  : 1000,     // Transition duration (in ms).
 
      // Navigation
      hideControlOnEnd : false, // If true, prev/next button will be hidden on first/last image.
      loop             : false, // Allows to go to the other end of the gallery at first/last img.
      auto             : false, // Enables slideshow mode.
      pause            : 4000,  // Delay (in ms) between transitions in slideshow mode.
      escKey           : true,  // Whether lightGallery should be closed when user presses "Esc".
 
      // Mobile devices
      mobileSrc         : false, // If "data-responsive-src" attr. should be used for mobiles.
      mobileSrcMaxWidth : 640,   // Max screen resolution for alternative images to be loaded for.
      swipeThreshold    : 50,    // How far user must swipe for the next/prev image (in px).
 
      // Video
      vimeoColor    : 'CCCCCC', // Vimeo video player theme color (hex color code).
      videoAutoplay : true,     // Set to false to disable video autoplay option.
      videoMaxWidth : 855,      // Limits video maximal width (in px).
 
      // i18n
      lang : { allPhotos: 'All photos' }, // Text of labels.
 
      // Callbacks
      onOpen        : function() {}, // Executes immediately after the gallery is loaded.
      onSlideBefore : function() {}, // Executes immediately before each transition.
      onSlideAfter  : function() {}, // Executes immediately after each transition.
      onSlideNext   : function() {}, // Executes immediately before each "Next" transition.
      onSlidePrev   : function() {}, // Executes immediately before each "Prev" transition.
      onBeforeClose : function() {}, // Executes immediately before the start of the close process.
      onCloseAfter  : function() {}, // Executes immediately once lightGallery is closed.
 
      // Dynamical load
      dynamic   : false, // Set to true to build a gallery based on the data from "dynamicEl" opt.
      dynamicEl : [],    // Array of objects (src, thumb, caption, desc, mobileSrc) for gallery els.
 
      // Misc
      rel          : false, // Combines containers with the same "data-rel" attr. into 1 gallery.
      exThumbImage : false, // Name of a "data-" attribute containing the paths to thumbnails.
    });
  });
</script>


Углубленное объяснение настроек можно найти на отдельной странице.

Исходники в архиве.

СКАЧАТЬ

Забрать
с облака

Напишите своё мнение