Ð¤Ð°Ð¹Ð»Ð¾Ð²Ñ‹Ð¹ Ð¼ÐµÐ½ÐµÐ´Ð¶ÐµÑ€

Ð¤Ð°Ð¹Ð»Ð¾Ð²Ñ‹Ð¹ Ð¼ÐµÐ½ÐµÐ´Ð¶ÐµÑ€ - Ð ÐµÐ´Ð°ÐºÑ‚Ð¸Ñ€Ð¾Ð²Ð°Ñ‚ÑŒ - /home/itsrcicq/formfilling.xyz/Documentation/assets/plugins/lightbox/examples/index.html

ÐÐ°Ð·Ð°Ð´
<!DOCTYPE html> <html> <head> <title>Bootstrap 3 Lightbox</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> <link href="../dist/ekko-lightbox.css" rel="stylesheet"> <style type="text/css"> /* i like padding - you can ignore this css. see the actual css / less files in the repository for styling the gallery navigation / div.row > div > div.row { margin-bottom: 15px; } body { padding-bottom: 50px; } div.top-header { margin-bottom:100px; } h3.page-header { margin-top: 50px; } figure { position: relative; } figure figcaption { font-size: 22px; color: #fff; text-decoration: none; bottom: 10px; right: 20px; position: absolute; background-color: #000; } code { white-space: pre-wrap; / css-3 / white-space: -moz-pre-wrap; / Mozilla, since 1999 / white-space: -pre-wrap; / Opera 4-6 / white-space: -o-pre-wrap; / Opera 7 / word-wrap: break-word; / Internet Explorer 5.5+ / } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <div class="top-header"> <h1 class="page-header">Lightbox for Bootstrap 3</h1> <p class="lead">Utilizes Bootstraps modal plugin to implement a lightbox gallery - <a href="https://github.com/ashleydw/lightbox">GitHub</a></p> <div class="text-center"> <iframe src="http://ghbtns.com/github-btn.html?user=ashleydw&repo=lightbox&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100 " height="20"></iframe> <iframe src="http://ghbtns.com/github-btn.html?user=ashleydw&repo=lightbox&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe> <iframe src="http://ghbtns.com/github-btn.html?user=ashleydw&repo=lightbox&type=follow&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="160" height="20"></iframe> </div> </div> <div class="top-header"> <h2>Usage</h2> <h3>Via data attributes</h3> <pre><a href="someurl" data-toggle="lightbox">Launch modal</a></pre> <h3>Via Javascript</h3> <pre><a href="someurl" id="mylink">Open lightbox</a><br/>$('#mylink').ekkoLightbox(options);</pre> </div> <div class="top-header"> <h2>Implementation</h2> <p>Obviously, you need the modal component that comes with Bootstrap, and jQuery. The delegate function used on this page is:</p> <code style="white-space: pre-wrap">$(document).delegate('[data-toggle="lightbox"]', 'click', function(event) { event.preventDefault(); $(this).ekkoLightbox(); });</code> <br /><br /> <p>If you plan on having galleries, be sure to include the LESS / CSS files.</p> </div> <div class="top-header"> <h2>Options</h2> <p>Options are passed down to the modal object so you can also use any of the <a href="http://getbootstrap.com/javascript/#modals-usage">original modal options</a>.</p> <p>Pass the options to the calling function as an object, or set defaults using <code>$.fn.ekkoLightbox.defaults</code> (excluding modal default options, notable: title, footer, remote)</p> <div class="table-responsive"> <table class="table table-bordered"> <thead> <tr> <th>Name</th> <th>type</th> <th>default</th> <th>description</th> <th>data-</th> </tr> </thead> <tbody> <tr> <td>remote</td> <td>string</td> <td></td> <td>If you can't/don't want to set the href property of an element</td> <td><code>data-remote="http://www...."</code></td> </tr> <tr> <td>gallery</td> <td>string</td> <td></td> <td>For grouping elements</td> <td><code>data-gallery="galleryname"</code></td> </tr> <tr> <td>gallery_parent_selector</td> <td>string</td> <td><code>document.body</code></td> <td>If you have multiple galleries per page, this will restrict the gallery items to the parent that matches this selector.</td> <td><code>data-parent="any valid selector"</code></td> </tr> <tr> <td>left_arrow_class</td> <td>string</td> <td><code>.glyphicon .glyphicon-chevron-left</code></td> <td>The css classes to give to the left arrow</td> <td></td> </tr> <tr> <td>right_arrow_class</td> <td>string</td> <td><code>.glyphicon .glyphicon-chevron-right</code></td> <td>The css classes to give to the right arrow</td> <td></td> </tr> <tr> <td>type</td> <td>string</td> <td></td> <td>Force the lightbox into image/YouTube mode.</td> <td><code>data-type="(image\|youtube\|vimeo)"</code></td> </tr> <tr> <td>width (videos only; height is calculated by ratio)</td> <td>integer</td> <td></td> <td>Force the width</td> <td><code>data-width="[0-9]+"</code></td> </tr> <tr> <td>always_show_close</td> <td>boolean</td> <td><code>true</code></td> <td>Always show the close button, even if no title is present</td> <td></td> </tr> <tr> <td>onNavigate</td> <td>callable</td> <td><code>false</code></td> <td>Function call when navigate right or left. First argument is the direction</td> <td></td> </tr> <tr> <td>loadingMessage</td> <td>string</td> <td><code>Loading...</code></td> <td>Message injected for loading</td> <td></td> </tr> </tbody> </table> </div> </div> <h1 class="page-header">Themes</h1> <p>Some quick themes to show how customisation is possible.</p> <ul> <li><a href="dark.html">Dark, full screen</a></li> <li><a href="nyan.html">Nyan</a></li> </ul> <h1 class="page-header">Examples</h1> <p>Images from Instagrams <a href="http://blog.instagram.com/post/58570728864/twoi92">"The Week on Instagram \| 92"</a></p> <ul> <li><a href="#single-image">Example #1: Single Image</a></li> <li><a href="#image-gallery">Example #2: Gallery of Images</a></li> <li><a href="#single-youtube">Example #3: Single YouTube & Vimeo Video. Forced width</a></li> <li><a href="#youtube-gallery">Example #4: Gallery of YouTube / Vimeo Videos</a></li> <li><a href="#mixed-gallery">Example #5: Mixed gallery</a></li> <li><a href="#programatically-call">Example #6: Programatically call</a></li> <li><a href="#data-remote">Example #7: Via <code>data-remote</code></a></li> <li><a href="#different-sizes">Example #8: Gallery of different sized images</a></li> <li><a href="#too-large">Example #9: Images too wide for display</a></li> <li><a href="#wrappers">Example #11: Column wrappers</a></li> <li><a href="#global-galleries">Example #12: Global galleries</a></li> <li><a href="#check-is-image">Example #13: No-extension images / presume everything is an image</a></li> <li><a href="#on-navigate">Example #14: On navigate event example</a></li> <li><a href="#hidden-elements">Example #15: Hidden elements</a></li> <li><a href="#remote-content">Example #16: Remote content</a></li> <li><a href="#navigateTo">Example #17: navigateTo</a></li> </ul> <h3 class="page-header" id="single-image">Example #1: Single Image</h3> <p>Note: uses modal plugin title option via <code>data-title</code>, and the custom footer tag using <code>data-footer</code></p> <div class="row"> <div class="col-sm-offset-4 col-sm-3"> <a href="http://41.media.tumblr.com/f37ac708134914c471073e4c0b47328d/tumblr_mrn3dc10Wa1r1thfzo8_1280.jpg" data-toggle="lightbox" data-title="A random title" data-footer="A custom footer text"> <img src="//41.media.tumblr.com/f37ac708134914c471073e4c0b47328d/tumblr_mrn3dc10Wa1r1thfzo8_1280.jpg" class="img-responsive"> </a> </div> </div> <h3 class="page-header" id="image-gallery">Example #2: Gallery of Images</h3> <p>By default, gallery images must be wrapped in a tag (probably <code><div></code>) - which doesn't have the class <code>.row</code>. This is so you can create columns/rows.</p> <p>A custom selector for the parent can be used, see <a href="#wrappers">example #11</a>. Note how the final image is not in the gallery intentionally.</p> <div class="row"> <div class="col-md-offset-2 col-md-8"> <div class="row"> <a href="http://41.media.tumblr.com/f37ac708134914c471073e4c0b47328d/tumblr_mrn3dc10Wa1r1thfzo8_1280.jpg" data-toggle="lightbox" data-gallery="multiimages" data-title="People walking down stairs" class="col-sm-4"> <img src="//41.media.tumblr.com/f37ac708134914c471073e4c0b47328d/tumblr_mrn3dc10Wa1r1thfzo8_1280.jpg" class="img-responsive"> </a> <a href="http://41.media.tumblr.com/838b44224e39c30cd43490deb11b919d/tumblr_mrn3dc10Wa1r1thfzo1_1280.jpg" data-toggle="lightbox" data-gallery="multiimages" data-title="Man getting wet" class="col-sm-4"> <img src="//41.media.tumblr.com/838b44224e39c30cd43490deb11b919d/tumblr_mrn3dc10Wa1r1thfzo1_1280.jpg" class="img-responsive"> </a> <a href="http://41.media.tumblr.com/e06a3513b0b36843f54bee99aeac689a/tumblr_mrn3dc10Wa1r1thfzo2_1280.jpg" data-toggle="lightbox" data-gallery="multiimages" data-title="Someone lost their dress" class="col-sm-4"> <img src="//41.media.tumblr.com/e06a3513b0b36843f54bee99aeac689a/tumblr_mrn3dc10Wa1r1thfzo2_1280.jpg" class="img-responsive"> </a> </div> <div class="row"> <a href="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-toggle="lightbox" data-gallery="multiimages" data-footer="Big ass waterfall- using footer instead of title" class="col-sm-4"> <img src="//41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" class="img-responsive"> </a> <a href="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-toggle="lightbox" data-gallery="multiimages" data-title="Cool bottle" data-footer="Now fill it with whiskey" class="col-sm-4"> <img src="//41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" class="img-responsive"> </a> <a href="http://36.media.tumblr.com/de356cd6570d7c26e73979467f296f67/tumblr_mrn3dc10Wa1r1thfzo6_1280.jpg" data-toggle="lightbox" class="col-sm-4"> <img src="//36.media.tumblr.com/de356cd6570d7c26e73979467f296f67/tumblr_mrn3dc10Wa1r1thfzo6_1280.jpg" class="img-responsive"> </a> </div> </div> </div> <h3 class="page-header" id="single-youtube">Example #3: Single YouTube / Vimeo Video</h3> <h4>YouTube</h4> <p>You can use various YouTube URL formats, the regex used is: <code>/^.(youtu.be\/\|v\/\|u\/\w\/\|embed\/\|watch\?v=\|\&v=)([^#\&\?])./</code></p> <p><a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox">Ghostpoet - Cash and Carry Me Home</a></p> <p><a href="http://youtu.be/b0jqPvpn3sY" data-toggle="lightbox">Tame Impala - Elephant (using youtu.be link)</a></p> <br /> <h4>Vimeo</h4> <p>You cannot embed Vimeo videos using the standard url (ie http://vimeo.com/80629469); you must link to the embed source (ie player.vimeo.com/video/80629469). This will mean your link url - if the JavaScript fails, will open the full screen player (try opening the first link below in a new tab); the solution to this is to set the lightbox source directly - the second link below does this.</p> <p><a href="http://player.vimeo.com/video/80629469" data-toggle="lightbox">City Lights - from Colin Rich (using embed link)</a></p> <p><a href="http://vimeo.com/80629469" data-remote="http://player.vimeo.com/video/80629469" data-toggle="lightbox">City Lights - from Colin Rich</a> (with reccommended <code>data-remote</code> setting)</p> <br /> <h4>Instagram</h4> <p></p> <p><a href="http://instagram.com/p/pZfG1fPfuX/" data-toggle="lightbox" data-title="Plug for our new service">GOtags.co.uk</a></p> <p>This also works with photos: <a href="https://instagram.com/p/0wbypvPfmQ/" data-toggle="lightbox">GOtags.co.uk</a></p> <br /> <h4>Forcing width</h4> <p>Set the width of the video</p> <p><a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox">Ghostpoet - Cash and Carry Me Home (standard)</a></p> <p><a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox" data-width="640">Ghostpoet - Cash and Carry Me Home (640 x 360)</a></p> <p><a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox" data-width="1280">Ghostpoet - Cash and Carry Me Home (1280 x 780)</a></p> <h3 class="page-header" id="youtube-gallery">Example #4: Gallery of YouTube Videos</h3> <div class="row"> <div class="col-md-offset-1 col-md-10"> <div class="row"> <a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox" data-gallery="youtubevideos" class="col-sm-4"> <img src="//i1.ytimg.com/vi/yP11r5n5RNg/mqdefault.jpg" class="img-responsive"> </a> <a href="http://youtu.be/iQ4D273C7Ac" data-toggle="lightbox" data-gallery="youtubevideos" class="col-sm-4"> <img src="//i1.ytimg.com/vi/iQ4D273C7Ac/mqdefault.jpg" class="img-responsive"> </a> <a href="//www.youtube.com/embed/b0jqPvpn3sY" data-toggle="lightbox" data-gallery="youtubevideos" class="col-sm-4"> <img src="//i1.ytimg.com/vi/b0jqPvpn3sY/mqdefault.jpg" class="img-responsive"> </a> </div> </div> </div> <h3 class="page-header" id="mixed-gallery">Example #5: Mixed gallery</h3> <div class="row"> <div class="col-md-offset-1 col-md-10"> <div class="row"> <a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox" data-gallery="mixedgallery" class="col-sm-4"> <img src="//i1.ytimg.com/vi/yP11r5n5RNg/mqdefault.jpg" class="img-responsive"> </a> <a href="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-toggle="lightbox" data-gallery="mixedgallery" class="col-sm-4"> <img src="//41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" class="img-responsive"> </a> <a href="http://vimeo.com/80629469" data-remote="http://player.vimeo.com/video/80629469" data-toggle="lightbox" data-gallery="mixedgallery" class="col-sm-4"> <img src="//b.vimeocdn.com/ts/458/070/458070637_200.jpg" class="img-responsive"> </a> </div> </div> </div> <h3 class="page-header" id="programatically-call">Example #6: Programatically call</h3> <p>These two examples are opened via the JavaScript at the bottom of the source.</p> <div class="row"> <div class="col-md-offset-1 col-md-10"> <div class="row"> <a href="http://41.media.tumblr.com/838b44224e39c30cd43490deb11b919d/tumblr_mrn3dc10Wa1r1thfzo1_1280.jpg" id="open-image" class="col-sm-4"> <img src="//41.media.tumblr.com/838b44224e39c30cd43490deb11b919d/tumblr_mrn3dc10Wa1r1thfzo1_1280.jpg" class="img-responsive"> </a> <a href="http://youtu.be/iQ4D273C7Ac" id="open-youtube" class="col-sm-4"> <img src="//i1.ytimg.com/vi/iQ4D273C7Ac/mqdefault.jpg" class="img-responsive"> </a> </div> </div> </div> <h3 class="page-header" id="data-remote">Example #7: Via <code>data-remote</code></h3> <div class="row"> <div class="col-md-offset-1 col-md-10"> <div class="row"> <img src="//41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-toggle="lightbox" data-remote="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" class="img-responsive col-sm-4"> <img src="//i1.ytimg.com/vi/b0jqPvpn3sY/mqdefault.jpg" data-toggle="lightbox" data-remote="//www.youtube.com/embed/b0jqPvpn3sY" class="img-responsive col-sm-4"> </div> </div> </div> <h3 class="page-header" id="different-sizes">Example #8: Gallery of different sized images</h3> <div class="row"> <div class="col-md-offset-1 col-md-10"> <div class="row"> <a href="https://lh5.googleusercontent.com/-jl_I19YyRVM/T0oJ3PCKZuI/AAAAAAAARRs/-gfmn1LxMJ8/s1280/tilt%2520shift%2520baseball.jpg" data-toggle="lightbox" data-gallery="imagesizes" class="col-sm-3"> <img src="//lh5.googleusercontent.com/-jl_I19YyRVM/T0oJ3PCKZuI/AAAAAAAARRs/-gfmn1LxMJ8/s128/tilt%20shift%20baseball.jpg" class="img-responsive"> </a> <a href="https://lh4.googleusercontent.com/-lB-KDQlhdAE/T0oJGy0-UOI/AAAAAAAAQyw/K-1hc5M7EQM/s800/IMG_1193%2520-%2520original.jpg" data-toggle="lightbox" data-gallery="imagesizes" class="col-sm-3"> <img src="//lh4.googleusercontent.com/-lB-KDQlhdAE/T0oJGy0-UOI/AAAAAAAAQyw/K-1hc5M7EQM/s128/IMG_1193%20-%20original.jpg" class="img-responsive"> </a> <a href="https://lh5.googleusercontent.com/-cfT_8CMK26k/T0oJMAxOl2I/AAAAAAAAQzI/TaDocinT6So/s912/P1010046%2520-%2520original.jpg" data-toggle="lightbox" data-gallery="imagesizes" class="col-sm-3"> <img src="//lh5.googleusercontent.com/-cfT_8CMK26k/T0oJMAxOl2I/AAAAAAAAQzI/TaDocinT6So/s128/P1010046%20-%20original.jpg" class="img-responsive"> </a> <a href="https://lh3.googleusercontent.com/-kgMllZrb20s/T0oJD2nFklI/AAAAAAAAQyg/pnMfqLAGNJs/s1024/IMG_0736%2520-%2520original.jpg" data-toggle="lightbox" data-gallery="imagesizes" class="col-sm-3"> <img src="//lh3.googleusercontent.com/-kgMllZrb20s/T0oJD2nFklI/AAAAAAAAQyg/pnMfqLAGNJs/s128/IMG_0736%20-%20original.jpg" class="img-responsive"> </a> </div> </div> </div> <h3 class="page-header" id="too-large">Example #9: Images too wide for display</h3> <p>All examples on this page are this example. Too high images don't count, scrolling works fine with the original modal.</p> <h3 class="page-header" id="semantic">Example #10: Semantic code</h3> <p>So you want to use <code><figure></code></p> <div class="row"> <a href="http://25.media.tumblr.com/de356cd6570d7c26e73979467f296f67/tumblr_mrn3dc10Wa1r1thfzo6_1280.jpg" class="col-sm-3" data-toggle="lightbox"> <figure> <img src="//25.media.tumblr.com/de356cd6570d7c26e73979467f296f67/tumblr_mrn3dc10Wa1r1thfzo6_400.jpg" class="img-responsive" alt=""> <figcaption>@gregfoster</figcaption> </figure> </a> </div> <h3 class="page-header" id="wrappers">Example #11: Column wrappers</h3> <p>This shows that the images do not need to be columns as per the other examples. Use <code>data-parent</code> on the gallery item, or set it via the options.</p> <div class="row wrapper-parent"> <div class="col-sm-3"> <a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox" data-gallery="columnwrappers" data-parent=".wrapper-parent"> <img src="//i1.ytimg.com/vi/yP11r5n5RNg/mqdefault.jpg" class="img-responsive"> </a> </div> <div class="col-sm-3"> <a href="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-toggle="lightbox" data-gallery="columnwrappers" data-parent=".wrapper-parent"> <img src="//41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" class="img-responsive"> </a> </div> <div class="col-sm-3"> <a href="//www.youtube.com/embed/b0jqPvpn3sY" data-toggle="lightbox" data-gallery="columnwrappers" data-parent=".wrapper-parent"> <img src="//i1.ytimg.com/vi/b0jqPvpn3sY/mqdefault.jpg" class="img-responsive"> </a> </div> </div> <h3 class="page-header" id="global-galleries">Example #12: Global galleries</h3> <p>If you're gallery images have different parents you may wish to have all images with the same gallery tag to open regardless of their parent. To do this, set <code>data-parent</code> to the highest element you know of - on this page it is the <code>div.container</code>.</p> <p>You can also leave the <code>data-parent</code> attribute empty, and it will default to <code>document.body</code>. This example uses a combination of the two.</p> <div class="row"> <div class="col-sm-4"> <a href="http://25.media.tumblr.com/de356cd6570d7c26e73979467f296f67/tumblr_mrn3dc10Wa1r1thfzo6_1280.jpg" data-gallery="global-gallery" data-parent="" data-toggle="lightbox"> <figure> <img src="//25.media.tumblr.com/de356cd6570d7c26e73979467f296f67/tumblr_mrn3dc10Wa1r1thfzo6_400.jpg" class="img-responsive" alt=""> <figcaption>@gregfoster</figcaption> </figure> </a> </div> <div class="col-sm-4"> <a href="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-toggle="lightbox" data-gallery="global-gallery" data-parent=""> <img src="//41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" class="img-responsive"> </a> </div> <div class="col-sm-4"> <a href="https://lh4.googleusercontent.com/-lB-KDQlhdAE/T0oJGy0-UOI/AAAAAAAAQyw/K-1hc5M7EQM/s800/IMG_1193%2520-%2520original.jpg" data-toggle="lightbox" data-gallery="global-gallery" data-parent=".container"> <img src="//lh4.googleusercontent.com/-lB-KDQlhdAE/T0oJGy0-UOI/AAAAAAAAQyw/K-1hc5M7EQM/s800/IMG_1193%2520-%2520original.jpg" class="img-responsive"> </a> </div> </div> <div class="row"> <div class="col-sm-4"> </div> <div class="col-sm-4"> <a href="https://lh5.googleusercontent.com/-jl_I19YyRVM/T0oJ3PCKZuI/AAAAAAAARRs/-gfmn1LxMJ8/s1280/tilt%2520shift%2520baseball.jpg" data-toggle="lightbox" data-gallery="global-gallery" data-parent=".container"> <img src="//lh5.googleusercontent.com/-jl_I19YyRVM/T0oJ3PCKZuI/AAAAAAAARRs/-gfmn1LxMJ8/s1280/tilt%2520shift%2520baseball.jpg" class="img-responsive"> </a> </div> <div class="col-sm-4"> <a href="//www.youtube.com/embed/b0jqPvpn3sY" data-toggle="lightbox" data-gallery="global-gallery" data-parent=""> <img src="//i1.ytimg.com/vi/b0jqPvpn3sY/mqdefault.jpg" class="img-responsive"> </a> </div> </div> <h3 class="page-header" id="check-is-image">Example #13: No-extension images / presume everything is an image</h3> <p>If the images you are linking to have no extension, the lightbox cannot detect that is an image; therefore you need to tell the lightbox what <code>data-type</code> it is.</p> <p><a href="http://nla.gov.au/nla.pic-an22199070-gd600n" data-title="Force image display" data-footer="The remote of this modal has no extension: http://nla.gov.au/nla.pic-an22199070-gd600n" data-toggle="lightbox" data-type="image">Click here for an image, but with no extension.</a></p> <p><a href="http://nla.gov.au/nla.pic-an22199070-gd600n" data-toggle="lightbox">This link is missing the type attribute, and will not work.</a></p> <p><a href="http://www.youtube.com/watch?v=b0jqPvpn3sY" data-toggle="lightbox" data-type="image">This link is linking to a YouTube video, but forcing an image.</a></p> <h3 class="page-header" id="on-navigate">Example #14: On navigate event example</h3> <p>The argument given is the direction of navigation. Open your developer console and use any gallery example.</p> <h3 class="page-header" id="hidden-elements">Example #15: Hidden elements</h3> <p>Facebook style, only show a few images but have a large gallery</p> <div class="row"> <div class="col-md-offset-2 col-md-8"> <div class="row"> <a href="http://41.media.tumblr.com/f37ac708134914c471073e4c0b47328d/tumblr_mrn3dc10Wa1r1thfzo8_1280.jpg" data-toggle="lightbox" data-gallery="hiddenimages" data-title="People walking down stairs" class="col-sm-4"> <img src="//41.media.tumblr.com/f37ac708134914c471073e4c0b47328d/tumblr_mrn3dc10Wa1r1thfzo8_1280.jpg" class="img-responsive"> </a> <a href="http://41.media.tumblr.com/838b44224e39c30cd43490deb11b919d/tumblr_mrn3dc10Wa1r1thfzo1_1280.jpg" data-toggle="lightbox" data-gallery="hiddenimages" data-title="Man getting wet" class="col-sm-4"> <img src="//41.media.tumblr.com/838b44224e39c30cd43490deb11b919d/tumblr_mrn3dc10Wa1r1thfzo1_1280.jpg" class="img-responsive"> </a> <a href="http://41.media.tumblr.com/e06a3513b0b36843f54bee99aeac689a/tumblr_mrn3dc10Wa1r1thfzo2_1280.jpg" data-toggle="lightbox" data-gallery="hiddenimages" data-title="Someone lost their dress" class="col-sm-4"> <img src="//41.media.tumblr.com/e06a3513b0b36843f54bee99aeac689a/tumblr_mrn3dc10Wa1r1thfzo2_1280.jpg" class="img-responsive"> </a> <!-- elements not showing, use data-remote --> <div data-toggle="lightbox" data-gallery="hiddenimages" data-remote="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-title="Hidden item 1"></div> <div data-toggle="lightbox" data-gallery="hiddenimages" data-remote="//www.youtube.com/embed/b0jqPvpn3sY" data-title="Hidden item 2"></div> <div data-toggle="lightbox" data-gallery="hiddenimages" data-remote="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-title="Hidden item 3"></div> <div data-toggle="lightbox" data-gallery="hiddenimages" data-remote="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-title="Hidden item 4"></div> <div data-toggle="lightbox" data-gallery="hiddenimages" data-remote="http://36.media.tumblr.com/de356cd6570d7c26e73979467f296f67/tumblr_mrn3dc10Wa1r1thfzo6_1280.jpg" data-title="Hidden item 5"></div> </div> </div> </div> <h3 class="page-header" id="remote-content">Example #16: Remote content</h3> <p>The Bootstrap modal originally allowed for remote loading, but this is to be removed in v4; this functionality demonstrates the work around.</p> <p>Given a URL, that is not an image or video (including unforced types [see example 13]), load the content using jQuery load(). An image and video is given below as proof gallery.</p> <div class="row"> <div class="col-md-offset-1 col-md-10"> <div class="row"> <p class="col-sm-3"><a href="./remote/page1.html" data-title="Page 1" data-toggle="lightbox" data-parent="" data-gallery="remoteload">Open up local Page 1</a></p> <a href="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-parent="" data-toggle="lightbox" data-gallery="remoteload" class="col-sm-3"> <img src="//41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" class="img-responsive"> </a> <p class="col-sm-3"><a href="./remote/page2.html" data-title="Page 2" data-toggle="lightbox" data-parent="" data-gallery="remoteload">Open up local Page 2</a></p> <a href="http://vimeo.com/80629469" data-remote="http://player.vimeo.com/video/80629469" data-toggle="lightbox" data-parent="" data-gallery="remoteload" class="col-sm-3"> <img src="//b.vimeocdn.com/ts/458/070/458070637_200.jpg" class="img-responsive"> </a> </div> <div class="row"> <p class="col-sm-3"><a href="http://news.bbc.co.uk" data-title="BBC News - not responsive" data-toggle="lightbox" data-parent="" data-gallery="remoteload">Open up BBC news</a></p> <a href="http://vimeo.com/80629469" data-remote="http://player.vimeo.com/video/80629469" data-toggle="lightbox" data-parent="" data-gallery="remoteload" class="col-sm-3"> <img src="//b.vimeocdn.com/ts/458/070/458070637_200.jpg" class="img-responsive"> </a> <p class="col-sm-3"><a href="http://getbootstrap.com" data-title="Bootstrap - Responsive" data-toggle="lightbox" data-parent="" data-gallery="remoteload">Open up Bootstrap</a></p> <a href="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-toggle="lightbox" data-parent="" data-gallery="remoteload" class="col-sm-3"> <img src="//41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" class="img-responsive"> </a> </div> </div> </div> <h3 class="page-header" id="navigateTo">Example #17: navigateTo</h3> <p>Must be setup programatically to run the setup (view the source of this page)</p> <div class="row"> <div class="col-md-offset-2 col-md-8"> <div class="row"> <a href="http://41.media.tumblr.com/f37ac708134914c471073e4c0b47328d/tumblr_mrn3dc10Wa1r1thfzo8_1280.jpg" data-toggle="lightbox" data-gallery="navigateTo" data-footer="Click <a href='#'>here</a> to jump to image 3" class="col-sm-4"> <img src="//41.media.tumblr.com/f37ac708134914c471073e4c0b47328d/tumblr_mrn3dc10Wa1r1thfzo8_1280.jpg" class="img-responsive"> </a> <a href="http://41.media.tumblr.com/838b44224e39c30cd43490deb11b919d/tumblr_mrn3dc10Wa1r1thfzo1_1280.jpg" data-toggle="lightbox" data-gallery="navigateTo" class="col-sm-4"> <img src="//41.media.tumblr.com/838b44224e39c30cd43490deb11b919d/tumblr_mrn3dc10Wa1r1thfzo1_1280.jpg" class="img-responsive"> </a> <a href="http://41.media.tumblr.com/e06a3513b0b36843f54bee99aeac689a/tumblr_mrn3dc10Wa1r1thfzo2_1280.jpg" data-toggle="lightbox" data-gallery="navigateTo" class="col-sm-4"> <img src="//41.media.tumblr.com/e06a3513b0b36843f54bee99aeac689a/tumblr_mrn3dc10Wa1r1thfzo2_1280.jpg" class="img-responsive"> </a> </div> </div> </div> </div> </div> </div> <script src="//code.jquery.com/jquery.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script src="../dist/ekko-lightbox.js"></script> <script type="text/javascript"> $(document).ready(function ($) { // delegate calls to data-toggle="lightbox" $(document).delegate('[data-toggle="lightbox"]:not([data-gallery="navigateTo"])', 'click', function(event) { event.preventDefault(); return $(this).ekkoLightbox({ onShown: function() { if (window.console) { return console.log('Checking our the events huh?'); } }, onNavigate: function(direction, itemIndex) { if (window.console) { return console.log('Navigating '+direction+'. Current item: '+itemIndex); } } }); }); //Programatically call $('#open-image').click(function (e) { e.preventDefault(); $(this).ekkoLightbox(); }); $('#open-youtube').click(function (e) { e.preventDefault(); $(this).ekkoLightbox(); }); // navigateTo $(document).delegate('[data-gallery="navigateTo"]', 'click', function(event) { event.preventDefault(); var lb; return $(this).ekkoLightbox({ onShown: function() { lb = this; $(lb.modal_content).on('click', '.modal-footer a', function(e) { e.preventDefault(); lb.navigateTo(2); }); } }); }); }); </script> </body> </html>

| ver. 1.4 | Github | . | PHP 8.1.32 | Ð“ÐµÐ½ÐµÑ€Ð°Ñ†Ð¸Ñ ÑÑ‚Ñ€Ð°Ð½Ð¸Ñ†Ñ‹: 0.01 | proxy | phpinfo | ÐÐ°ÑÑ‚Ñ€Ð¾Ð¹ÐºÐ°