How to — lightbox

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>&#10094;</span>',
rightArrow: '<span>&#10095;</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(...);

Настройки плагина — всплывающие картинки

В настройках ничего сложного нет. Все можно сделать самостоятельно. Плагин Easy FancyBox на сайте WordPress позволяет получать увеличенные всплывающие картинки прямо на странице, без перехода на дополнительные вкладки.

Настройки дают возможность применять Easy FancyBox не только к изображениям, но и, например, к видео с YouTube и т.п.

Настройки находятся по пути — Настройки – Настройки медиафайлов. Здесь под обычными настройками медиафайлов есть раздел FancyBox:

1. Первый пункт – Media, это возможность включить плагин для определенных типов файлов. Выбираем какие нужно.
2. Далее идет опция Overlay. Здесь можно выбрать, показывать, либо нет затемненный фон, который появляется при открытии изображения.
3. Также можно определить, будет ли срабатывать плагин при клике вне изображения.
4. Можно выставить прозрачность фона. Например, 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();

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