A basic example of a jQuery powered lightbox with a fade slideshow.
Created
August 22, 2012 19:16
-
-
Save schadeck/3428512 to your computer and use it in GitHub Desktop.
simple lightbox w/ simple slideshow
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>jquery lightbox w/slideshow(fade)</title> | |
| <style type="text/css"> | |
| body { margin: 0; padding: 0; background: #efefef; } | |
| #wrapper { width: 600px; margin: 0 auto; border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; background: #fff; border: 1px solid #ccc; padding: 25px; border-top: none; box-shadow: 0 0 5px #ccc; -moz-box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc; text-align: left; } | |
| #lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA9JREFUeNpiYGBg2AwQYAAAuAC01qHx9QAAAABJRU5ErkJggg==) repeat; } | |
| #lightbox p { text-align: right; color: #fff; margin-right: 20px; font-size: 12px; } | |
| #lightbox img { max-width: 940px; } | |
| #slideshow { position: relative; z-index: 100; width: 600px; height: 350px; margin: 0 auto; padding: 10px; background-color: #fff; box-shadow: 0 0 20px rgba(0,0,0,0.4); } | |
| #slideshow ul > li { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; list-style: none; } | |
| .nav { display: none; } | |
| .prev, .next { position: absolute; top: 50%; background: rgba(100, 100, 100, .5); padding: .25em .5em; color: #fff; text-decoration: none; } | |
| .next { right: 10px; } | |
| .prev { left: 10px; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="wrapper"> | |
| <h1>simple lightbox w/ slideshow (images only)</h1> | |
| <p>those image links i was talking about:</p> | |
| <ul id="imageSet"> | |
| <li> | |
| <a href="http://placehold.it/600x350/f99/fff&text=one" class="lightboxTrigger"> | |
| one | |
| </a> | |
| </li> | |
| <li> | |
| <a href="http://placehold.it/600x350/9f9/fff&text=two" class="lightboxTrigger"> | |
| two | |
| </a> | |
| </li> | |
| <li> | |
| <a href="http://placehold.it/600x350/99f/fff&text=three" class="lightboxTrigger"> | |
| three | |
| </a> | |
| </li> | |
| </ul> | |
| </div> <!-- #/wrapper --> | |
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> | |
| <script type="text/javascript"> | |
| jQuery(document).ready(function($) { | |
| // global variables for script | |
| var current, size; | |
| $('.lightboxTrigger').click(function(e) { | |
| // prevent default click event | |
| e.preventDefault(); | |
| // grab href from clicked element | |
| var image_href = $(this).attr("href"); | |
| // determine the index of clicked trigger | |
| var slideNum = $('.lightboxTrigger').index(this); | |
| // find out if #lightbox exists | |
| if ($('#lightbox').length > 0) { | |
| // #lightbox exists | |
| $('#lightbox').fadeIn(300); | |
| // #lightbox does not exist - create and insert (runs 1st time only) | |
| } else { | |
| // create HTML markup for lightbox window | |
| var lightbox = | |
| '<div id="lightbox">' + | |
| '<p>Click to close</p>' + | |
| '<div id="slideshow">' + | |
| '<ul></ul>' + | |
| '<div class="nav">' + | |
| '<a href="#prev" class="prev slide-nav">prev</a>' + | |
| '<a href="#next" class="next slide-nav">next</a>' + | |
| '</div>' + | |
| '</div>' + | |
| '</div>'; | |
| //insert lightbox HTML into page | |
| $('body').append(lightbox); | |
| // fill lightbox with .lightboxTrigger hrefs in #imageSet | |
| $('#imageSet').find('.lightboxTrigger').each(function() { | |
| var $href = $(this).attr('href'); | |
| $('#slideshow ul').append( | |
| '<li>' + | |
| '<img src="' + $href + '">' + | |
| '</li>' | |
| ); | |
| }); | |
| } | |
| // setting size based on number of objects in slideshow | |
| size = $('#slideshow ul > li').length; | |
| // hide all slide, then show the selected slide | |
| $('#slideshow ul > li').hide(); | |
| $('#slideshow ul > li:eq(' + slideNum + ')').show(); | |
| // set current to selected slide | |
| current = slideNum; | |
| }); | |
| //Click anywhere on the page to get rid of lightbox window | |
| $('body').on('click', '#lightbox', function() { // using .on() instead of .live(). more modern, and fixes event bubbling issues | |
| $('#lightbox').fadeOut(300); | |
| }); | |
| // show/hide navigation when hovering over #slideshow | |
| $('body').on( | |
| { mouseenter: function() { | |
| $('.nav').fadeIn(300); | |
| }, mouseleave: function() { | |
| $('.nav').fadeOut(300); | |
| } | |
| },'#slideshow'); | |
| // navigation prev/next | |
| $('body').on('click', '.slide-nav', function(e) { | |
| // prevent default click event, and prevent event bubbling to prevent lightbox from closing | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| var $this = $(this); | |
| var dest; | |
| // looking for .prev | |
| if ($this.hasClass('prev')) { | |
| dest = current - 1; | |
| if (dest < 0) { | |
| dest = size - 1; | |
| } | |
| } else { | |
| // in absence of .prev, assume .next | |
| dest = current + 1; | |
| if (dest > size - 1) { | |
| dest = 0; | |
| } | |
| } | |
| // fadeOut curent slide, FadeIn next/prev slide | |
| $('#slideshow ul > li:eq(' + current + ')').fadeOut(750); | |
| $('#slideshow ul > li:eq(' + dest + ')').fadeIn(750); | |
| // update current slide | |
| current = dest; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment