基于yii2，土人二开源cms+notify系统，极度符合yii2默认的开发方式，拿来即用，5分钟建站，10分钟上手。.zip

# blueimp Gallery - [Demo](#demo) - [Description](#description) - [Setup](#setup) - [Lightbox setup](#lightbox-setup) - [Controls](#controls) - [Carousel setup](#carousel-setup) - [Keyboard shortcuts](#keyboard-shortcuts) - [Options](#options) - [Default options](#default-options) - [Event callbacks](#event-callbacks) - [Carousel options](#carousel-options) - [Indicator options](#indicator-options) - [Fullscreen options](#fullscreen-options) - [Video options](#video-options) - [Video factory options](#video-factory-options) - [YouTube options](#youtube-options) - [Vimeo options](#vimeo-options) - [Container and element options](#container-and-element-options) - [Property options](#property-options) - [API](#api) - [Initialization](#initialization) - [API methods](#api-methods) - [Videos](#videos) - [HTML5 video player](#html5-video-player) - [Multiple video sources](#multiple-video-sources) - [YouTube](#youtube) - [Vimeo](#vimeo) - [Additional Gallery elements](#additional-gallery-elements) - [Additional content types](#additional-content-types) - [Example HTML text factory implementation](#example-html-text-factory-implementation) - [jQuery plugin](#jquery-plugin) - [jQuery plugin setup](#jquery-plugin-setup) - [HTML5 data-attributes](#html5-data-attributes) - [Container ids and link grouping](#container-ids-and-link-grouping) - [Gallery object](#gallery-object) - [jQuery events](#jquery-events) - [Requirements](#requirements) - [Browsers](#browsers) - [Desktop browsers](#desktop-browsers) - [Mobile browsers](#mobile-browsers) - [License](#license) - [Credits](#credits) - [Notable forks](#notable-forks) ## Demo [blueimp Gallery Demo](https://blueimp.github.io/Gallery/) ## Description blueimp Gallery is a touch-enabled, responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers. It features swipe, mouse and keyboard navigation, transition effects, slideshow functionality, fullscreen support and on-demand content loading and can be extended to display additional content types. ## Setup ### Lightbox setup Copy the **css**, **img** and **js** directories to your website. Include the Gallery stylesheet in the head section of your webpage: ```html <link rel="stylesheet" href="css/blueimp-gallery.min.css"> ``` Add the following HTML snippet with the Gallery widget to the body of your webpage: ```html <!-- The Gallery as lightbox dialog, should be a child element of the document body --> <div id="blueimp-gallery" class="blueimp-gallery"> <div class="slides"></div> <h3 class="title"></h3> <a class="prev">‹</a> <a class="next">›</a> <a class="close">×</a> <a class="play-pause"></a> <ol class="indicator"></ol> </div> ``` Include the Gallery script at the bottom of the body of your webpage: ```html <script src="js/blueimp-gallery.min.js"></script> ``` Create a list of links to image files, optionally with enclosed thumbnails and add them to the body of your webpage, before including the Gallery script: ```html <div id="links"> <a href="images/banana.jpg" title="Banana"> <img src="images/thumbnails/banana.jpg" alt="Banana"> </a> <a href="images/apple.jpg" title="Apple"> <img src="images/thumbnails/apple.jpg" alt="Apple"> </a> <a href="images/orange.jpg" title="Orange"> <img src="images/thumbnails/orange.jpg" alt="Orange"> </a> </div> ``` Add the following JavaScript code after including the Gallery script, to display the images in the Gallery lightbox on click of the links: ```html <script> document.getElementById('links').onclick = function (event) { event = event || window.event; var target = event.target || event.srcElement, link = target.src ? target.parentNode : target, options = {index: link, event: event}, links = this.getElementsByTagName('a'); blueimp.Gallery(links, options); }; </script> ``` ### Controls To initialize the Gallery with visible controls, add the CSS class **blueimp-gallery-controls** to the Gallery widget: ```html <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls"> <div class="slides"></div> <h3 class="title"></h3> <a class="prev">‹</a> <a class="next">›</a> <a class="close">×</a> <a class="play-pause"></a> <ol class="indicator"></ol> </div> ``` ### Carousel setup To display the images in an inline carousel instead of a lightbox, follow the [lightbox setup](#lightbox-setup) and add the CSS class **blueimp-gallery-carousel** to the Gallery widget and remove the child element with the **close** class, or add a new Gallery widget with a different **id** to your webpage: ```html <!-- The Gallery as inline carousel, can be positioned anywhere on the page --> <div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel"> <div class="slides"></div> <h3 class="title"></h3> <a class="prev">‹</a> <a class="next">›</a> <a class="play-pause"></a> <ol class="indicator"></ol> </div> ``` Add the following JavaScript code after including the Gallery script to initialize the carousel: ```html <script> blueimp.Gallery( document.getElementById('links').getElementsByTagName('a'), { container: '#blueimp-gallery-carousel', carousel: true } ); </script> ``` ## Keyboard shortcuts The Gallery can be controlled with the following keyboard shortcuts: * **Return**: Toggle controls visibility. * **Esc**: Close the Gallery lightbox. * **Space**: Toggle the slideshow (play/pause). * **Left**: Move to the previous slide. * **Right**: Move to the next slide. Please note that setting the **carousel** option to **true** disables the keyboard shortcuts by default. ## Options ### Default options The following are the default options set by the core Gallery library: ```js var options = { // The Id, element or querySelector of the gallery widget: container: '#blueimp-gallery', // The tag name, Id, element or querySelector of the slides container: slidesContainer: 'div', // The tag name, Id, element or querySelector of the title element: titleElement: 'h3', // The class to add when the gallery is visible: displayClass: 'blueimp-gallery-display', // The class to add when the gallery controls are visible: controlsClass: 'blueimp-gallery-controls', // The class to add when the gallery only displays one element: singleClass: 'blueimp-gallery-single', // The class to add when the left edge has been reached: leftEdgeClass: 'blueimp-gallery-left', // The class to add when the right edge has been reached: rightEdgeClass: 'blueimp-gallery-right', // The class to add when the automatic slideshow is active: playingClass: 'blueimp-gallery-playing', // The class for all slides: slideClass: 'slide', // The slide class for loading elements: slideLoadingClass: 'slide-loading', // The slide class for elements that failed to load: slideErrorClass: 'slide-error', // The class for the content element loaded into each slide: slideContentClass: 'slide-content', // The class for the "toggle" control: toggleClass: 'toggle', // The class for the "prev" control: prevClass: 'prev', // The class for the "next" control: nextClass: 'next', // The class for the "close" control: closeClass: 'close', // The class for the "play-pause" toggle control: playPauseClass: 'play-pause', // The list object property (or data attribute) with the object type: typeProperty: 'type', // The list object property (or data attribute) with the object title: titleProperty: 'title', // The list object property (or data attribute) with the object alt