post.jpg

Галерея изображений на fancyBox3

FancyBox 3 — мощнейшая адаптивная галерея и модальные окна на jQuery.

Очень крутая штука, которая позволяет открывать на своем сайте увеличенные изображения и галереи изображений, ajax-окна со своими  обработчиками, YouTube-ролики и ролики других видеосервисов, Iframe-окна, модальные окна со своим содержимым.

Зависимости:

Для корректной работы fancyBox3 предпочтительнее использовать jQuery 3+ , но она также работает и с jQuery 1.9.1+ и jQuery 2

Совместимость:

fancyBox 3 прекрасно работает как на мобильных устройствах, так и на десктопах. Она была протестирована со следующими браузерами:

  • Chrome
  • Firefox
  • IE10/11
  • Edge
  • iOS Safari
  • Nexus 7 Chrome
 
Установка

Скачиваем архив , распаковываем, из папки dist берем файлы jquery.fancybox.min.css и jquery.fancybox.min.js , забрасываем их соответственно в папки со стилями (css) и скриптами (js) нашего проекта и подключаем, причем jquery.fancybox.min.js должен быть обязательно подключен после библиотеки jquery и до закрытия тега "body"


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>My page</title>

	<!-- CSS -->
	<link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
</head>
<body>

	<!-- Your HTML content goes here -->

	<!-- JS -->
	<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
	<script src="jquery.fancybox.min.js"></script>
</body>
</html>
Инициализация при помощи data атрибутов ссылки:

<h2>fancyBox v3.2 - Basics</h2>

<p>
  <a href="https://source.unsplash.com/RF5sv5dv1Zc/1500x1000" data-fancybox data-caption="This image has a caption">
      <img src="https://source.unsplash.com/RF5sv5dv1Zc/240x160" />
  </a>
</p>

Если нужно объединить изображения в галерею, то достаточно присвоить атрибутам data-fancybox соответствующих ссылок одинаковые для всей группы изображений значения


<h4>Group #1; default options</h4>

<p class="imglist">
  <a href="https://source.unsplash.com/Lzx4J_Pb3sk/1500x1000" data-fancybox="group">
      <img src="https://source.unsplash.com/Lzx4J_Pb3sk/240x160" />
  </a>
  
  <a href="https://source.unsplash.com/cZVthlrnlnQ/1500x1000" data-fancybox="group">
      <img src="https://source.unsplash.com/cZVthlrnlnQ/240x160" />
  </a>
  
  <a href="https://source.unsplash.com/vddccTqwal8/1500x1000" data-fancybox="group">
      <img src="https://source.unsplash.com/vddccTqwal8/240x160" />
  </a>
  
  <a href="https://source.unsplash.com/Sj5efgWguDs/1500x1000" data-fancybox="group">
      <img src="https://source.unsplash.com/Sj5efgWguDs/240x160" />
  </a>
</p>

В данном примере применены все опции, с которыми fancyBox3 инициализирован по умолчанию. Результат можно посмотреть здесь , если кликнуть по любой из картинок данной статьи.

Инициализация при помощи JavaScript

Если внешний вид изображений при клике на них Вас по какой-то причине не устраивает, то можно выбрать изображения при помощи jQuery селекторов и вызвать метод fancybox() с нужными опциями:


$('[data-fancybox]').fancybox({
  // Options will go here
  buttons : [
    'zoom',
    'close'
  ]
});

Однако, при использовании данного метода, событие click будет прикручено только к текущему изображению. Чтобы объединить изображения в галерею, нужно использовать опцию "selector":


$().fancybox({
  selector : '[data-fancybox="images"]',
  loop     : true
});

Здесь можно посмотреть пример использования fancyBox3 для фильтрации галереи изображений по разным группам.

Полный список опций fancyBox3

var defaults = {

    // Enable infinite gallery navigation
    loop : false,

    // Space around image, ignored if zoomed-in or viewport width is smaller than 800px
    margin : [44, 0],

    // Horizontal space between slides
    gutter : 50,

    // Enable keyboard navigation
    keyboard : true,

    // Should display navigation arrows at the screen edges
    arrows : true,

    // Should display infobar (counter and arrows at the top)
    infobar : true,

    // Should display toolbar (buttons at the top)
    toolbar : true,

    // What buttons should appear in the top right corner.
    // Buttons will be created using templates from `btnTpl` option
    // and they will be placed into toolbar (class="fancybox-toolbar"` element)
    buttons : [
        'slideShow',
        'fullScreen',
        'thumbs',
        'share',
        //'download',
        //'zoom',
        'close'
    ],

    // Detect "idle" time in seconds
    idleTime : 3,

    // Should display buttons at top right corner of the content
    // If 'auto' - they will be created for content having type 'html', 'inline' or 'ajax'
    // Use template from `btnTpl.smallBtn` for customization
    smallBtn : 'auto',

    // Disable right-click and use simple image protection for images
    protect : false,

    // Shortcut to make content "modal" - disable keyboard navigtion, hide buttons, etc
    modal : false,

    image : {

        // Wait for images to load before displaying
        // Requires predefined image dimensions
        // If 'auto' - will zoom in thumbnail if 'width' and 'height' attributes are found
        preload : "auto"

    },

    ajax : {

        // Object containing settings for ajax request
        settings : {

            // This helps to indicate that request comes from the modal
            // Feel free to change naming
            data : {
                fancybox : true
            }
        }

    },

    iframe : {

        // Iframe template
        tpl : '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen allowtransparency="true" src=""></iframe>',

        // Preload iframe before displaying it
        // This allows to calculate iframe content width and height
        // (note: Due to "Same Origin Policy", you can't get cross domain data).
        preload : true,

        // Custom CSS styling for iframe wrapping element
        // You can use this to set custom iframe dimensions
        css : {},

        // Iframe tag attributes
        attr : {
            scrolling : 'auto'
        }

    },

    // Default content type if cannot be detected automatically
    defaultType : 'image',

    // Open/close animation type
    // Possible values:
    //   false            - disable
    //   "zoom"           - zoom images from/to thumbnail
    //   "fade"
    //   "zoom-in-out"
    //
    animationEffect : "zoom",

    // Duration in ms for open/close animation
    animationDuration : 500,

    // Should image change opacity while zooming
    // If opacity is "auto", then opacity will be changed if image and thumbnail have different aspect ratios
    zoomOpacity : "auto",

    // Transition effect between slides
    //
    // Possible values:
    //   false            - disable
    //   "fade'
    //   "slide'
    //   "circular'
    //   "tube'
    //   "zoom-in-out'
    //   "rotate'
    //
    transitionEffect : "fade",

    // Duration in ms for transition animation
    transitionDuration : 366,

    // Custom CSS class for slide element
    slideClass : '',

    // Custom CSS class for layout
    baseClass : '',

    // Base template for layout
    baseTpl	:
        '<div class="fancybox-container" role="dialog" tabindex="-1">' +
            '<div class="fancybox-bg"></div>' +
            '<div class="fancybox-inner">' +
                '<div class="fancybox-infobar">' +
                    '<span data-fancybox-index></span>&nbsp;/&nbsp;<span data-fancybox-count></span>' +
                '</div>' +
                '<div class="fancybox-toolbar">{{buttons}}</div>' +
                '<div class="fancybox-navigation">{{arrows}}</div>' +
                '<div class="fancybox-stage"></div>' +
                '<div class="fancybox-caption-wrap"><div class="fancybox-caption"></div></div>' +
            '</div>' +
        '</div>',

    // Loading indicator template
    spinnerTpl : '<div class="fancybox-loading"></div>',

    // Error message template
    errorTpl : '<div class="fancybox-error"><p>{{ERROR}}<p></div>',

    btnTpl : {

        download : '<a download data-fancybox-download class="fancybox-button fancybox-button--download" title="{{DOWNLOAD}}">' +
                    '<svg viewBox="0 0 40 40">' +
                        '<path d="M20,23 L20,8 L20,23 L13,16 L20,23 L27,16 L20,23 M26,28 L13,28 L27,28 L14,28" />' +
                    '</svg>' +
                '</a>',

        zoom : '<button data-fancybox-zoom class="fancybox-button fancybox-button--zoom" title="{{ZOOM}}">' +
                    '<svg viewBox="0 0 40 40">' +
                        '<path d="M 18,17 m-8,0 a 8,8 0 1,0 16,0 a 8,8 0 1,0 -16,0 M25,23 L31,29 L25,23" />' +
                    '</svg>' +
                '</button>',

        close : '<button data-fancybox-close class="fancybox-button fancybox-button--close" title="{{CLOSE}}">' +
                    '<svg viewBox="0 0 40 40">' +
                        '<path d="M10,10 L30,30 M30,10 L10,30" />' +
                    '</svg>' +
                '</button>',

        // This small close button will be appended to your html/inline/ajax content by default,
        // if "smallBtn" option is not set to false
        smallBtn : '<button data-fancybox-close class="fancybox-close-small" title="{{CLOSE}}"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 35"><path d="M12,12 L23,23 M23,12 L12,23"></path></svg></button>',

        // Arrows
        arrowLeft : '<button data-fancybox-prev class="fancybox-button fancybox-button--arrow_left" title="{{PREV}}">' +
                        '<svg viewBox="0 0 40 40">' +
                          '<path d="M10,20 L30,20 L10,20 L18,28 L10,20 L18,12 L10,20"></path>' +
                        '</svg>' +
                      '</button>',

        arrowRight : '<button data-fancybox-next class="fancybox-button fancybox-button--arrow_right" title="{{NEXT}}">' +
                      '<svg viewBox="0 0 40 40">' +
                        '<path d="M30,20 L10,20 L30,20 L22,28 L30,20 L22,12 L30,20"></path>' +
                      '</svg>' +
                    '</button>'
    },

    // Container is injected into this element
    parentEl : 'body',


    // Focus handling
    // ==============

    // Try to focus on the first focusable element after opening
    autoFocus : false,

    // Put focus back to active element after closing
    backFocus : true,

    // Do not let user to focus on element outside modal content
    trapFocus : true,


    // Module specific options
    // =======================

    fullScreen : {
        autoStart : false,
    },

    // Set `touch: false` to disable dragging/swiping
    touch : {
        vertical : true,  // Allow to drag content vertically
        momentum : true   // Continue movement after releasing mouse/touch when panning
    },

    // Hash value when initializing manually,
    // set `false` to disable hash change
    hash : null,

    // Customize or add new media types
    // Example:
    /*
    media : {
        youtube : {
            params : {
                autoplay : 0
            }
        }
    }
    */
    media : {},

    slideShow : {
        autoStart : false,
        speed     : 4000
    },

    thumbs : {
        autoStart   : false,                  // Display thumbnails on opening
        hideOnClose : true,                   // Hide thumbnail grid when closing animation starts
        parentEl    : '.fancybox-container',  // Container is injected into this element
        axis        : 'y'                     // Vertical (y) or horizontal (x) scrolling
    },

    // Use mousewheel to navigate gallery
    // If 'auto' - enabled for images only
    wheel : 'auto',

    // Callbacks
    //==========

    // See Documentation/API/Events for more information
    // Example:
    /*
        afterShow: function( instance, current ) {
             console.info( 'Clicked element:' );
             console.info( current.opts.$orig );
        }
    */

    onInit       : $.noop,  // When instance has been initialized

    beforeLoad   : $.noop,  // Before the content of a slide is being loaded
    afterLoad    : $.noop,  // When the content of a slide is done loading

    beforeShow   : $.noop,  // Before open animation starts
    afterShow    : $.noop,  // When content is done loading and animating

    beforeClose  : $.noop,  // Before the instance attempts to close. Return false to cancel the close.
    afterClose   : $.noop,  // After instance has been closed

    onActivate   : $.noop,  // When instance is brought to front
    onDeactivate : $.noop,  // When other instance has been activated


    // Interaction
    // ===========

    // Use options below to customize taken action when user clicks or double clicks on the fancyBox area,
    // each option can be string or method that returns value.
    //
    // Possible values:
    //   "close"           - close instance
    //   "next"            - move to next gallery item
    //   "nextOrClose"     - move to next gallery item or close if gallery has only one item
    //   "toggleControls"  - show/hide controls
    //   "zoom"            - zoom image (if loaded)
    //   false             - do nothing

    // Clicked on the content
    clickContent : function( current, event ) {
        return current.type === 'image' ? 'zoom' : false;
    },

    // Clicked on the slide
    clickSlide : 'close',

    // Clicked on the background (backdrop) element
    clickOutside : 'close',

    // Same as previous two, but for double click
    dblclickContent : false,
    dblclickSlide   : false,
    dblclickOutside : false,


    // Custom options when mobile device is detected
    // =============================================

    mobile : {
        idleTime : false,
        margin   : 0,

        clickContent : function( current, event ) {
            return current.type === 'image' ? 'toggleControls' : false;
        },
        clickSlide : function( current, event ) {
            return current.type === 'image' ? 'toggleControls' : 'close';
        },
        dblclickContent : function( current, event ) {
            return current.type === 'image' ? 'zoom' : false;
        },
        dblclickSlide : function( current, event ) {
            return current.type === 'image' ? 'zoom' : false;
        }
    },


    // Internationalization
    // ============

    lang : 'en',
    i18n : {
        'en' : {
            CLOSE       : 'Close',
            NEXT        : 'Next',
            PREV        : 'Previous',
            ERROR       : 'The requested content cannot be loaded. <br/> Please try again later.',
            PLAY_START  : 'Start slideshow',
            PLAY_STOP   : 'Pause slideshow',
            FULL_SCREEN : 'Full screen',
            THUMBS      : 'Thumbnails',
            DOWNLOAD    : 'Download',
            SHARE       : 'Share',
            ZOOM        : 'Zoom'
        },
        'de' : {
            CLOSE       : 'Schliessen',
            NEXT        : 'Weiter',
            PREV        : 'Zurück',
            ERROR       : 'Die angeforderten Daten konnten nicht geladen werden. <br/> Bitte versuchen Sie es später nochmal.',
            PLAY_START  : 'Diaschau starten',
            PLAY_STOP   : 'Diaschau beenden',
            FULL_SCREEN : 'Vollbild',
            THUMBS      : 'Vorschaubilder',
            DOWNLOAD    : 'Herunterladen',
            SHARE       : 'Teilen',
            ZOOM        : 'Maßstab'
        }
    }

};

 

Поделиться
FancyBox 3 — мощнейшая адаптивная галерея и модальные окна на jQuery.

Очень крутая штука, которая позволяет открывать на своем сайте увеличенные изображения и галереи изображений, ajax-окна со своими  обработчиками, YouTube-ролики и ролики других видеосервисов, Iframe-окна, модальные окна со своим содержимым.

" data-limit="3" data-counter>

КОММЕНТАРИИ (1)

Popik
По сравнению с просто fancybox - гораздо мощнее и симпатичнее