Содержание
Basic usage:
1. Load jQuery ekko lightbox plugin’s JavaScript and Stylesheet files into your Bootstrap project.
<link href="bootstrap.min.css" rel="stylesheet"> <link href="ekko-lightbox.css" rel="stylesheet"> ... <script src="jquery.js"></script> <script src="ekko-lightbox.js"></script> <script src="bootstrap.min.js"></script>
2. Create a simple gallery lightbox via Html5 attributes.
<a href="large-1.jpg" data-toggle="lightbox" data-gallery="multiimages" data-title="Image caption 1"> <img src="thumb-1.jpg" class="img-responsive"> </a> <a href="large-2.jpg" data-toggle="lightbox" data-gallery="Image caption 2" data-title="People walking down stairs"> <img src="thumb-2.jpg" class="img-responsive"> </a> <a href="large-1.jpg" data-toggle="lightbox" data-gallery="multiimages" data-title="Image caption 3"> <img src="thumb-3.jpg" class="img-responsive"> </a> ...
3. You can also initialize the plugin via JavaScript.
$('#demo').ekkoLightbox(options);
4. Available options.
// If you can't/don't want to set the href property of an element // data-remote="http://www...." remote: '', // For grouping elements // data-gallery="galleryname" gallery: '', // Force the lightbox into image/YouTube mode. // image|youtube|vimeo // data-type="(image|youtube|vimeo)" type: null, // navigation arrows leftArrow: '<span>❮</span>', rightArrow: '<span>❯</span>', // gallery title title: '', // gallery footer footer: '', // max width/height maxWidth: 9999, maxHeight: 9999, // displays the left / right arrows or not showArrows: true, // if true, gallery loops infinitely wrapping: true, // Always show the close button, even if no title is present always_show_close: true, strings: { close: 'Close', fail: 'Failed to load image:', type: 'Could not detect remote target type. Force the type using data-type', }, // Message injected for loading loadingMessage: 'Loading...', // if in an iframe can specify top.document doc: document, // Callback functions onShow: function() {}, onShown: function() {}, onHide: function() {}, onHidden: function() {}, onNavigate: function() {}, onContentLoaded: function() {}
5. Events.
- onContentLoaded: Fired when content (image/video/remote page etc) has been fully loaded.
- onNavigate: Fired before navigating a gallery.
- onShow/onShown/onHide/onHidden: Inherited from the bootstrap modal.
How to use it:
1. Load the latest jQuery javascript library and jquery-video-lightning.js script on the web page
<script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="src/jquery-video-lightning.js"></script>
2. Include required jQuery video lightning stylesheet on the page
<link href="src/jquery-video-lightning.css" rel="stylesheet" type="text/css">
3. Create the html. Using the to define the video ID
<span class="video-link" data-video-id="y-PKffm2uI4dk">Youtube</span>
4. Call the plugin with options.
<script> $(function() { $(".video-link").jqueryVideoLightning({ autoplay: 1, backdrop_color: "#ddd", backdrop_opacity: 0.6, glow: 20, glow_color: "#000" }); }); </script>
5. You can also use html5 to apply the options
<span class="video-link" data-video-id="y-PKffm2uI4dk" data-video-width="1280px" data-video-height="720px" data-video-autoplay="1" ></span>
6. All the options.
- id (default=»y-dQw4w9WgXcQ»): Vendor prefixed video id
- width (default=»640px»): video width in px
- height (default=»390px»): video height in px
- autoplay (default=true: start playback immediately (0,1)
- autoclose (default=true): Autoclose lightbox / popover once video is complete
- popover (default=false): Open in popover instead of lightbox (true,false)
- peek (default=false): Preview video on hover, user can click ^ to pin (true,false)
- bdColor (String — default=»#ddd»): Color of page overlay
- bdOpacity (Decimal — default=0.6): Opacity of page overlay
- glow (default=20): Glow around video frame
- glowColor (default=»#000″): Glow color around video frame
- xBgColor (default=»#000″): Close icon background color
- xColor (default=»#fff»): Close icon × color
- fadeIn (Integer — default=300): Time in ms of lightbox fade in
- fadeOut (Integer — default=0, 1000): Time in ms of lightbox fade out
- zIndex (default=2100): Z-index of page overlay
- rickRoll (default=false): Make video un-closable (true,false)
- cover (default=false): Display cover image (true,false)
- unload (default=true): Unload video iframe X seconds after it is closed
- unloadAfter (Integer — default=45): Time in seconds to wait after closing before unloading
- fluidity (default=30): Number of steps popover should move in on resize events. Lower is smoother, higher is faster
- throttle (Integer — default=null): Rate limit resize events. Reduces redraws on resizing, lowers accuracy / smoothness of repositioning
- frameColor (String — default=»#000″): Color of iframe video will fill
- frameBorder (String [border/outline css shorthand] — default=»none»): Video iframe border ex: ‘3px solid #555’
- xBorder (String [border/outline css shorthand] — default=»none»): Close icon box border ex: ‘3px solid #555’
Reviews
http-equiv=»Content-Type» content=»text/html;charset=UTF-8″>lass=»plugin-reviews»>
Great plugin that does what I need.
Considering the huge kerfuffle that was made over Yoast having nag banner appear on every single admin page, it irks me that Foo does exactly the same…
This is a nice simple Lightbox plugin with many nice features. Unfortunately, it has a nasty «7-day free trial PRO» nag banner that will not go away. You can dismiss it on one page, load another, and it’s back.
I’ve contacted the dev’s on this back in Sept 5th. They promptly got back to me with a fix that didn’t work, and said they’d look into it. It’s now December.
Having this nag on a single site isn’t an issue, until you have a large network of sites, and everytime you login to one, there it is. It’s really irritating after a while.
Love the plugin. HATE the nag banner!
Simple and Nice
Подпись залазит на картинку. Не очень удобно.
Great responsive lightbox! Works great on desktops and also on mobile devices. Pair it with FooGallery from the same developers and enjoy
Description
Everything You Need in a WordPress Gallery Plugin
Responsive Lightbox and Gallery plugin is a fully fledged WordPress gallery plugin with a powerful Drag & Drop Gallery Builder and Lightbox functionality that’s used daily by more than 300,000 active users and downloaded over 3 Million times.
The beauty of it is how easy it is for you to customize it and enhance its features thanks to free and premium extensions.
Easiest Gallery Builder
Say goodbye to coding. With the built-in drag and drop Gallery builder, you will be able to create beautiful galleries, customize them, and add your preferred styles in minutes.
Vast Customization Options
Responsive Lightbox and Gallery plugin is packed with customization options per each gallery and lightbox style so you can tweak them to suit your website’s audience with just a few clicks.
SEO-Friendly and Lightweight
Responsive Lightbox and Gallery plugin is built keeping SEO and performance in mind, making it lightweight and fast when it comes to page load.
Premium Extensions
Looking to provide a premium experience to your visitors? Responsive Lightbox and Gallery plugin offers plenty of premium extensions to provide you with even more flexibility and customization options.
Need more reasons? Check them out here!
What some of our 300,000+ active users say about Responsive Lightbox and Gallery plugin
Responsive Lightbox and Gallery plugin can be extended with our premium extensions:
Premium Extensions:
View Demos
Released under the MIT License, source on Github ()
Install via NPM
Compatible with: jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+
- Supports photos, grouping, slideshow, ajax, inline, and iframed content.
- Lightweight: 10KB of JavaScript (less than 5KBs gzipped).
- Appearance is controlled through CSS so it can be restyled.
- Can be extended with callbacks & event-hooks without altering the source files.
- Completely unobtrusive, options are set in the JS and require no changes to existing HTML.
- Preloads upcoming images in a photo group.
- Currently in use on a million-plus websites.
Поддерживаемые браузеры
Lightbox2 был успешно протестирован в следующих браузерах:
- Internet Explorer. lightbox-plus-jquery.js файл содержит JQuery v2.x и поддерживает IE 9+. Если вы хотите поддержать IE 6, 7 и 8, то вам нужно подключить свою версию JQuery v1.x и отдельно файл lightbox.js.
- Chrome
- Safari
- Firefox
- iOS Safari
- iOS Chrome
- Android Browser
- Android Chrome
Если информации, приведенной выше вам не хватило, то вы можете посмотреть видео, приведенное ниже. В этом видео подробно рассмотрено подключение скрипта Lightbox к странице вашего сайта, а так же я рассмотрел как работают настраиваемые параметры скрипта, ну в общем смотрите и пользуйтесь.
Lightbox Options
Example use of the options.
constlightbox=GLightbox({ touchNavigationtrue, looptrue, autoplayVideostrue,onOpen()=>{console.log('Lightbox opened')},beforeSlideLoad(slideData)=>{}});constmyGallery=GLightbox({ elements{'href''https://picsum.photos/1200/800','type''image','title''My Title','description''Example',},{'href''https://picsum.photos/1200/800','type''image'},{'href''https://www.youtube.com/watch?v=Ga6RYejo6Hk','type''video','source''youtube','width'900,},{'content''<p>This will append some html inside the slide</p>'},{'content'document.getElementById('inline-example')},, autoplayVideostrue,});myGallery.open();myGallery.setElements(...);
Option | Type | Default | Description |
---|---|---|---|
selector | string | Name of the selector for example ‘.glightbox’ or ‘data-glightbox’ or ‘*’ | |
elements | array | Instead of passing a selector you can pass all the items that you want in the gallery. | |
skin | string | Name of the skin, it will add a class to the lightbox so you can style it with css. | |
openEffect | string | Name of the effect on lightbox open. (zoom, fade, none) | |
closeEffect | string | Name of the effect on lightbox close. (zoom, fade, none) | |
slideEffect | string | Name of the effect on slide change. (slide, fade, zoom, none) | |
moreText | string | More text for descriptions on mobile devices. | |
moreLength | number | Number of characters to display on the description before adding the moreText link (only for mobiles), if 0 it will display the entire description. | |
closeButton | boolean | Show or hide the close button. | |
touchNavigation | boolean | Enable or disable the touch navigation (swipe). | |
touchFollowAxis | boolean | Image follow axis when dragging on mobile. | |
keyboardNavigation | boolean | Enable or disable the keyboard navigation. | |
closeOnOutsideClick | boolean | Close the lightbox when clicking outside the active slide. | |
startAt | number | Start lightbox at defined index. | |
width | number | Default width for inline elements and iframes, you can define a specific size on each slide. You can use any unit for example 90% or 100vw for full width | |
height | number | Default height for inline elements and iframes, you can define a specific size on each slide.You can use any unit for example 90% or 100vw For inline elements you can set the height to auto. | |
videosWidth | number | Default width for videos. Videos are responsive so height is not required. The width can be in px % or even vw for example, 500px, 90% or 100vw for full width videos | |
descPosition | string | Global position for slides description, you can define a specific position on each slide (bottom, top, left, right). | |
loop | boolean | Loop slides on end. | |
zoomable | boolean | Enable or disable zoomable images you can also use data-zoomable=»false» on individual nodes. | |
draggable | boolean | Enable or disable mouse drag to go prev and next slide (only images and inline content), you can also use data-draggable=»false» on individual nodes. | |
dragToleranceX | number | Used with draggable. Number of pixels the user has to drag to go to prev or next slide. | |
dragToleranceY | number | Used with draggable. Number of pixels the user has to drag up or down to close the lightbox (Set 0 to disable vertical drag). | |
dragAutoSnap | boolean | If true the slide will automatically change to prev/next or close if dragToleranceX or dragToleranceY is reached, otherwise it will wait till the mouse is released. | |
preload | boolean | Enable or disable preloading. | |
svg | object | Set your own svg icons. | |
autoplayVideos | boolean | Autoplay videos on open. | |
plyr | object |
Настройки плагина — всплывающие картинки
В настройках ничего сложного нет. Все можно сделать самостоятельно. Плагин Easy FancyBox на сайте WordPress позволяет получать увеличенные всплывающие картинки прямо на странице, без перехода на дополнительные вкладки.
Настройки дают возможность применять Easy FancyBox не только к изображениям, но и, например, к видео с YouTube и т.п.
Настройки находятся по пути — Настройки – Настройки медиафайлов. Здесь под обычными настройками медиафайлов есть раздел FancyBox:
- Первый пункт – Media, это возможность включить плагин для определенных типов файлов. Выбираем какие нужно.
- Далее идет опция Overlay. Здесь можно выбрать, показывать, либо нет затемненный фон, который появляется при открытии изображения.
- Также можно определить, будет ли срабатывать плагин при клике вне изображения.
- Можно выставить прозрачность фона. Например, 09 — полностью непрозрачный, а 0 — полностью прозрачный фон. Можно задать цвет, например, серый.
Затем идут настройки всплывающего окна – Window, которые позволяют:
- Отключить, либо включить кнопку закрытия окна, поз. 1 задать цвет для title, рамки картинки.
- Задать размер окна, поз. 2. По умолчанию — 560×340 и рамка — 10 пикселей.
- Задать, чтобы окно не центрировалось при прокручивании страницы.
- Настроить, чтобы изображение уменьшилось, если слишком большое.
То есть при большом изображении может появиться полоса прокрутки и изображение не будет видно целиком.
- Можно определить скорость открытия и закрытия окна. Например, открытие можно поставить 1000 мс, а закрытие — 500 мс.
- Определить, для каких типов файлов плагин будет применяться автоматически.
- Можно изменить тип анимации.
- Включить, чтобы окно закрывалось при клике по всплывающей картинке.
- Можно выбрать, будет ли показываться title, либо определить title с альтернативным значением, то есть с атрибутом alt картинки.
- Отключить, либо отредактировать применение плагина в галерее. Галерею можно вообще отключить, чтобы плагин с ней не работал.
Просмотр галереи настраивается как одно изображение, либо каждая всплывающая картинка будет просматриваться отдельно:
- Можно отключить стрелки на всплывающих картинках при просмотре галереи.
- Отключить изменение слайдов при прокрутке колесиком мыши.
- Можно сделать галерею бесконечной, то есть после просмотра последний фотографии, будем возвращаться на первую.
- Задать скорость изменения всплывающих картинок галереи.
Далее идет опция Ссылки. Здесь можно отключить Easy FancyBox для ссылок, которые не видны или которые не содержат картинку.
Также можно выбрать, чтобы плагин работал сразу при открытии страницы.
На этом все, сохраняем изменения. Сейчас при нажатии на изображение на сайте, открывается всплывающая картинка в увеличенном размере и размещается по центру.
Оставшийся контент на странице при этом притеняется. На всплывающей картинке есть кнопка Закрыть в виде крестика, при нажатии на которую, картинка принимает свой первоначальный вид.
Shutter Reloaded
Shutter Reloaded плагин просмотра изображений для сайта WordPress. Работает аналогично Lightbox, Thickbox и т.д., но занимает всего лишь 10 Kb и не требует никаких внешних библиотек. Cleaner Gallery имеет много настроек: изменение размеров изображений, комбинирования изображений в галереях, перерисовки окна после изменения размера, предварительная загрузка соседнего изображения для более быстрого отображения. Плагин совместим с основными браузерами, имеет настройки цвета, прозрачности фона и цвет текста заголовка, меняемый текст кнопки и фон меню. НЕ обновлялся более 2-х лет.
How to use it:
Download and load the minified version of the lumenbox plugin from the folder.
<link rel="stylesheet" href="dist/css/lumenbox.min.css" /> <script src="dist/js/lumenbox.min.js"></script>
Initialize the lumenbox plugin and we’re ready to go.
var Lumenbox = new Lumenbox({ // options here });
Apply the attribute to your images.
<a class="example-image-link" href="https://source.unsplash.com/mBJMKLBpZ98/600x450" data-lumenbox="example-1"> <img class="example-image" src="https://source.unsplash.com/mBJMKLBpZ98/200x150" alt="image-1" /> </a>
Define the image description in the attribute.
<a class="example-image-link" href="https://source.unsplash.com/mBJMKLBpZ98/600x450" data-title="Some title here" data-lumenbox="example-1"> <img class="example-image" src="https://source.unsplash.com/mBJMKLBpZ98/200x150" alt="image-1" /> </a>
To create a gallery lightbox, just make the attribute have the same value.
<a class="example-image-link" href="https://source.unsplash.com/mBJMKLBpZ98/600x450" title="Regular title attribute" data-lumenbox="my-gallery"> <img class="example-image" src="https://source.unsplash.com/mBJMKLBpZ98/200x150" alt="image-1" /> </a> <a class="example-image-link" href="https://source.unsplash.com/lfu6BxzoKOY/600x450" data-title="data-title attribute" data-lumenbox="my-gallery"> <img class="example-image" src="https://source.unsplash.com/lfu6BxzoKOY/300x150" alt="image-2" /> </a> <a class="example-image-link" href="https://source.unsplash.com/_VJ4mRqz1eI/600x450" data-title="This is some long long long long long long long long long caption right here! cheers!" data-lumenbox="my-gallery"> <img class="example-image" src="https://source.unsplash.com/_VJ4mRqz1eI/200x150" alt="image-3" /> </a>
Possible options to customize the lightbox.
var Lumenbox = new Lumenbox({ countLabel: '%current of %total', fitInViewport: true, showCounter: false, infiniteNavigation: false, // infinite loop enableKeyboardNavigation: false, transitionDuration: 500, // in milliseconds backDropClose: true, // close the lightbox by clicking the background overlay });
Methods
Example method use:
lightbox.nextSlide();lightbox.close();
Option | Parameters | Description |
---|---|---|
open | Open the lightbox, you can optionally pass a node. | |
openAt | Open at specific index. | |
close | Close the lightbox. | |
reload | Reload the lightbox, after inserting content with ajax. | |
destroy | Destroy and remove all attached events. | |
prevSlide | Go to the previous slide. | |
nextSlide | Go to the next slide. | |
goToSlide | Index of the slide. | |
insertSlide | Insert a slide at the specified index. | |
removeSlide | Remove slide at the specified index. | |
getActiveSlide | Get active slide. It will return the active node. | |
getActiveSlideIndex | Get active slide. It will return the active slide index. | |
playSlideVideo | Play video in the specified slide. | |
stopSlideVideo | Stop video in the specified slide. | |
getSlidePlayerInstance | Get the player instance of the specified slide. | |
getAllPlayers | Get all players instance. | |
setElements | Update the lightbox gallery elements. |
lightbox.setElements({'href''https://picsum.photos/1200/800','type''image'},{'href''https://www.youtube.com/watch?v=Ga6RYejo6Hk','type''video','width''900px',},{'content''<p>some html to append in the slide</p>','width''900px',});lightbox.insertSlide({ href'video url...', width'90vw'});lightbox.insertSlide({ href'video url...', width'90vw'},2);lightbox.insertSlide({ content'<p>some html to append in the slide</p>', width'90vw'},2);lightbox.insertSlide({ contentdocument.getElementById('inline-example'), width'90vw'},2);lightbox.removeSlide(2);lightbox.open();lightbox.openAt(2);constajaxExample=GLightbox({ selectornull});doAjaxCall({...}).then(response=>{ajaxExample.insertSlide({ width'500px', contentresponse.html});ajaxExample.open();})doAjaxCall({...}).then(response=>{ajaxExample.setElements({ contentresponse.html});ajaxExample.open();})
Images
SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider
How to use it:
1. To get started, include the Tobii library’s files on the page.
<link href="dist/css/tobii.css" rel="stylesheet" /> <script src="dist/js/tobii.js"></script>
2. Initialize the Tobii library and we’re ready to go.
var tobii = new Tobii();
3. Make an element to toggle a basic lightbox that loads content from an inline HTML element.
<button type="button" data-type="html" data-target="#modal" class="lightbox"> Toggle </button>
<div id="modal" class="modal"> <div class="modal__inner"> Modal Content Here </div> </div>
4. Embed an iframe into the lightbox.
<button type="button" data-type="iframe" data-target="https://example.jpg" class="lightbox"> Open Example.com </button>
5. Embed a Youtube video into the lightbox.
<button type="button" data-type="youtube" data-id="VIDEO ID HERE" class="lightbox"> Play Youtube Video </button>
6. Group your images using the attribute and display them as an inline slider in the lightbox.
<a href="1.jpg" class="lightbox" data-group="gallery"> <img src="1.jpg" alt="Alt" width="200"> </a> <a href="2.jpg" class="lightbox" data-group="gallery"> <img src="2.jpg" alt="Alt" width="200"> </a> <a href="3.jpg" class="lightbox" data-group="gallery"> <img src="3.jpg" alt="Alt" width="200"> </a>
7. Config the lightbox with the following options.
var tobii = new Tobii({ // default selector selector: '.lightbox', // shows image captions captions: true, captionsSelector: 'img', captionAttribute: 'alt', // 'auto' = auto hides navigation controls on mobile devices nav: 'auto', // custom navigation controls navText: [ '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M14 18l-6-6 6-6"/></svg>', '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M10 6l6 6-6 6"/></svg>' ], navLabel: , // shows close button close: true, closeText: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 6l12 12M6 18L18 6"/></svg>', closeLabel: 'Close lightbox', // image loading indicator loadingIndicatorLabel: 'Image loading', // shows image counter counter: true, // enables keyboard interactions keyboard: true, // shows a zoom image on the images zoom: true, zoomText: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21 16v5h-5"/><path d="M8 21H3v-5"/><path d="M16 3h5v5"/><path d="M3 8V3h5"/></svg>', // click/tap outside to close the lightbox docClose: true, // allows to close the lightbox with swipe event swipeClose: true, // hides scrollbar when the lightbox is activated hideScrollbar: true, // enables drag and touch swipe events draggable: true, // touch and mouse dragging threshold in pixels threshold: 100, // auto plays videos autoplayVideo: false });
8. API methods.
// open a specific item instance.open(index, callback); // goto the next item instance.next(callback); // back to the prev item instance.prev(callback); // close the lightbox instance.close(callback); // add a new item to the lightbox instance.add(element, callback); // remove an item instance.remove(element, callback); // check if is open instance.isOpen(); // get the current item index instance.currentSlide(); // select a specific group instance.selectGroup(); // get the current group instance.currentGroup(); // destroy the lightbox instance.destroy();
How to use it:
1. Load the in the header and the in the footer section of the web page.
<link href="dist/simple-lightbox.min.css" rel="stylesheet" /> <!-- As A Vanilla JavaScript Plugin --> <script src="simple-lightbox.min.js"></script> <!-- As A jQuery Plugin --> <script src="jquery.min.js"></script> <script src="simple-lightbox.jquery.min.js"></script>
2. Insert all your images into a gallery container. The plugin will automatically generate captions from attribute of tag. To group images, just add the rel attribute to the links as follows:
<div class="gallery"> <a href="1.jpg" class="big" rel="rel1"> <img src="thumb1.jpg" alt="" title="Image 1"> </a> <a href="2.jpg" class="big" rel="rel1"> <img src="thumb2.jpg" alt="" title="Image 2"> </a> <a href="3.jpg" class="big" rel="rel2"> <img src="thumb3.jpg" alt="" title="Image 3"> </a> <a href="4.jpg" class="big" rel="rel2"> <img src="thumb4.jpg" alt="" title="Image 4"> </a> </div>
3. Call the plugin with default options to enable the lightbox.
// As A Vanilla JavaScript Plugin var gallery = new SimpleLightbox('.gallery a', { /* options */ }); // As A jQuery Plugin --> var gallery = $('.gallery a').simpleLightbox({ /* options */ });
4. Full customization options with default values.
// default source attribute sourceAttr: 'href', // shows fullscreen overlay overlay: true, // shows loading spinner spinner: true, // shows navigation arrows nav: true, // text for navigation arrows navText: , // shows image captions captions: true, captionDelay: 0, captionSelector: 'img', captionType: 'attr', captionPosition: 'bottom', captionClass: '', // captions attribute (title or data-title) captionsData: 'title', // shows close button close: true, // text for close button closeText: 'X', // swipe up or down to close gallery swipeClose: true, // show counter showCounter: true, // file extensions fileExt: 'png|jpg|jpeg|gif', // weather to slide in new photos or not, disable to fade animationSlide: true, // animation speed in ms animationSpeed: 250, // image preloading preloading: true, // keyboard navigation enableKeyboard: true, // endless looping loop: true, // group images by rel attribute of link with same selector rel: false, // closes the lightbox when clicking outside docClose: true, // how much pixel you have to swipe swipeTolerance: 50, // lightbox wrapper Class className: 'simple-lightbox', // width / height ratios widthRatio: 0.8, heightRatio: 0.9, // scales the image up to the defined ratio size scaleImageToRatio: false, // disable right click disableRightClick: false, // disable page scroll disableScroll: true, // show an alert if image was not found alertError: true, // alert message alertErrorMessage: 'Image not found, next image will be loaded', // additional HTML showing inside every image additionalHtml: false, // enable history back closes lightbox instead of reloading the page history: true, // time to wait between slides throttleInterval: 0, // Pinch to Zoom feature for touch devices doubleTapZoom: 2, maxZoom: 10, // adds class to html element if lightbox is open htmlClass: 'has-lightbox'
5. API methods.
// Opens the lightbox gallery.open(); // Closes the lightbox gallery.close(); // Goto next image gallery.next(); // Goto previous image gallery.prev(); // re-init the lightbox gallery.refresh(); // Destroys the lightbox gallery.destroy();
6. Events.
- : fires before the lightbox opens
- : fires after the lightbox was opened
- : fires before the lightbox closes
- : fires after the lightbox was closed
- : fires before image changes
- : fires after image was changed
- : fires before next image arrives
- : fires after next image was arrived
- : fires before previous image arrives
- : fires after previous image was arrived
- : fires after next image was loaded (if preload activated)
- : fires after previous image was loaded (if preload activated)
- : fires on image load error
$('.gallery a').on('open.simplelightbox', function () { // do something… });
Change logs:
v3.0.9 (2018-01-20)
Update
v3.0.8 (2018-01-15)
Fixed: Start time attribute ignored when lightbox closed and link clicked for second time
2016-01-28
Add responsive back in
v3.0.6 (2015-09-16)
Fix Safari bug
v3.0.5 (2015-04-30)
IE
v3.0.4 (2015-04-25)
Add frameColor, frameBorder, xBorder
v3.0.3 (2015-04-24)
Id bugfix, add bare iframe feature
v3.0 (2015-04-04)
- complete re-write removing the dependency on jQuery while still supporting jQuery initialization
- using full iframe API’s for Youtube and Vimeo for event handling and interaction
- adds option to autoclose on video end
- adds peek option to preview video on hover with ability to pin popover
- enhanced gravity function improves popover positioning performance and smoothness
v2.0.1 (2014-04-04)
Fixed ease out not working
v2.0.0 (2013-09-23)
options update
v1.1.0 (2013-09-23)
added cover image option
v1.0.3 (2013-09-18)
fixed Firefox compatibility issue
v1.0.2 (2013-09-14)
make width dynamic when window is narrow
- Prev: Facebook Like jQuery Responsiv Modal Box Plugin — Mike’s Modal Library
- Next: Lightweight and Simple jQuery Modal Window Plugin — OmniWindow
С этим читают
- Nextgen plus
- Адаптивный слайдер на сайт на примере owl carousel 2
- Slick
- 7 фотостоков для заработка
- Moggy.urlgalleries.net
- Плагины для создания галерей в wordpress
- Fancybox: подключение к странице сайта
- Jquery 3.2.0 is out!
- Image resizing made easy with php
- Advanced & beautiful html5 / javascript color picker