<link rel="stylesheet" href="/a/plugins/lightboxes/jquery/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="/a/plugins/lightboxes/jquery/prettyPhoto/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<style>
ul.prettyPhoto {padding:0;}
ul.prettyPhoto li {display:inline;}
ul.prettyPhoto li img {width:60px; height:60px;}
</style>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("#prettyPhoto1 a[rel^='prettyPhoto']").prettyPhoto({
autoplay_slideshow: false,
social_tools: ""
});
});
</script>
<ul id="prettyPhoto1" class="prettyPhoto">
<li><a href="/i/slides/slide-1.jpg" rel="prettyPhoto[gallery1]" title="Caption 1"><img src="/i/slides/slide-1.jpg" alt="Header 1" /></a></li>
<li><a href="/i/slides/slide-8.jpg" rel="prettyPhoto[gallery1]" title="Caption 2"><img src="/i/slides/slide-8.jpg" alt="Header 2" /></a></li>
<li><a href="/i/slides/slide-2.jpg" rel="prettyPhoto[gallery1]" title="Caption 3"><img src="/i/slides/slide-2.jpg" alt="Header 3" /></a></li>
<li><a href="/i/slides/slide-3.jpg" rel="prettyPhoto[gallery1]" title="Caption 4"><img src="/i/slides/slide-3.jpg" alt="Header 4" /></a></li>
<li><a href="/i/slides/slide-4.jpg" rel="prettyPhoto[gallery1]" title="Caption 5"><img src="/i/slides/slide-4.jpg" alt="Header 5" /></a></li>
<li><a href="/i/slides/slide-7.jpg" rel="prettyPhoto[gallery1]" title="Caption 6"><img src="/i/slides/slide-7.jpg" alt="Header 6" /></a></li>
</ul>
1. Pretty Photo
This is a lightbox type slideshow plugin that is elegant and clean. It supports quite a few options, works quite well and allows you to setup multiple galleries very easily. It has one unique feature in that if you load the gallery and refresh your browser it will reload it again for you, however there didn't seem to be a way to disable this. It also allows you to easily specify a header and caption for each image in the slideshow using an alt and title attribute.
Try Now:
40 Inspirational Speeches in 2 Minutes
<link rel="stylesheet" href="/a/plugins/lightboxes/jquery/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="/a/plugins/lightboxes/jquery/prettyPhoto/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("#prettyPhoto2").prettyPhoto({social_tools: "", width: 560, height: 315});
});
</script>
<a id="prettyPhoto2" class="layout_page_holder_link" href="http://youtu.be/d6wRkzCW5qI" title="40 Inspirational Speeches in 2 Minutes">40 Inspirational Speeches in 2 Minutes</a>
|
2. Colorbox
This is a really nice looking lightbox in a box jquery plugin, it shows that some simple images and css can go a long way in really making a plugin stand out above the rest. Works really well and has a good set of options for all sorts of effects.
• download & usage •
Try Now:
<link rel="stylesheet" href="/a/plugins/lightboxes/jquery/colorbox/colorbox.css" />
<script src="/a/plugins/lightboxes/jquery/colorbox/jquery.colorbox.js"></script>
<style>
ul.colorbox {padding:0;}
ul.colorbox li {display:inline;}
ul.colorbox li img {width:60px; height:60px;}
</style>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$(".colorbox_group").colorbox({rel: "colorbox_group"});
});
</script>
<ul class="colorbox">
<li><a class="colorbox_group" href="/i/slides/slide-2.jpg" title="Caption 1"><img src="/i/slides/slide-2.jpg" /></a></li>
<li><a class="colorbox_group" href="/i/slides/slide-8.jpg" title="Caption 2"><img src="/i/slides/slide-8.jpg" /></a></li>
<li><a class="colorbox_group" href="/i/slides/slide-3.jpg" title="Caption 3"><img src="/i/slides/slide-3.jpg" /></a></li>
<li><a class="colorbox_group" href="/i/slides/slide-4.jpg" title="Caption 4"><img src="/i/slides/slide-4.jpg" /></a></li>
<li><a class="colorbox_group" href="/i/slides/slide-10.jpg" title="Caption 5"><img src="/i/slides/slide-10.jpg" /></a></li>
<li><a class="colorbox_group" href="/i/slides/slide-11.jpg" title="Caption 6"><img src="/i/slides/slide-11.jpg" /></a></li>
</ul>
| |
One of the BEST Motivational Videos I've ever seen!
<link rel="stylesheet" href="/a/plugins/lightboxes/jquery/colorbox/colorbox.css" />
<script src="/a/plugins/lightboxes/jquery/colorbox/jquery.colorbox.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("#colorbox2").colorbox({iframe: true, width:560, height:315});
});
</script>
<a id="colorbox2" class="layout_page_holder_link" href="http://www.youtube.com/embed/hzBCI13rJmA" title="One of the BEST Motivational Videos I've ever seen!">One of the BEST Motivational Videos I've ever seen!</a>
|
3. Fancybox
Fancybox is a really nice plugin that supports a variety of content including slideshows. Very easy to setup with minimal code required to get it rolling. It is one of the most popular jquery plugins for slideshows which means it will have few bugs and will work quite confidently.
• download & usage •
Try Now:
<script type="text/javascript" src="/a/plugins/lightboxes/jquery/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="/a/plugins/lightboxes/jquery/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="/a/plugins/lightboxes/jquery/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<style>
ul.fancybox {padding:0;}
ul.fancybox li {display:inline;}
ul.fancybox li img {width:60px; height:60px;}
</style>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("#fancybox a").fancybox({
"transitionIn" : "none",
"transitionOut" : "none",
"titlePosition" : "over",
"titleFormat" : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
});
</script>
<ul id="fancybox" class="fancybox">
<li><a rel="fancybox_group" href="/i/slides/slide-1.jpg" title="Caption 1"><img alt="" src="/i/slides/slide-1.jpg" /></a></li>
<li><a rel="fancybox_group" href="/i/slides/slide-8.jpg" title="Caption 2"><img alt="" src="/i/slides/slide-8.jpg" /></a></li>
<li><a rel="fancybox_group" href="/i/slides/slide-2.jpg" title="Caption 3"><img alt="" src="/i/slides/slide-2.jpg" /></a></li>
<li><a rel="fancybox_group" href="/i/slides/slide-9.jpg" title="Caption 4"><img alt="" src="/i/slides/slide-9.jpg" /></a></li>
<li><a rel="fancybox_group" href="/i/slides/slide-3.jpg" title="Caption 5"><img alt="" src="/i/slides/slide-3.jpg" /></a></li>
<li><a rel="fancybox_group" href="/i/slides/slide-4.jpg" title="Caption 6"><img alt="" src="/i/slides/slide-4.jpg" /></a></li>
</ul>
| |
Michael Jordan 'Failure' Nike Commercial
<script type="text/javascript" src="/a/plugins/lightboxes/jquery/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="/a/plugins/lightboxes/jquery/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="/a/plugins/lightboxes/jquery/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("#fancybox2").fancybox();
});
</script>
<!--note the "iframe" class here which is required for youtube videos.-->
<a id="fancybox2" class="layout_page_holder_link iframe" href="http://www.youtube.com/embed/CgW48mBQJ14" title="Michael Jordan 'Failure' Nike Commercial">Michael Jordan 'Failure' Nike Commercial</a>
|
4. Tiny Lightbox
This was a really easy lightbox plugin to get working. Based on jquery, it's simple lean, does not support too many options, but serves well as a nice slideshow lightbox. It supports two modes, original and parallel, although there didn't seem to be a difference between the two. One thing that was really cool though is the little bounce animation if you tried to go next/prev at the beginning or end of the slideshow.
• download & usage •
Try Now:
<script type="text/javascript" src="/a/plugins/lightboxes/jquery/tinylightbox/src/js/jquery.tinyLightbox.js"></script>
<script type="text/javascript" src="/a/plugins/lightboxes/jquery/tinylightbox/src/js/jquery.tinyLightbox.original.js"></script>
<link rel="stylesheet" type="text/css" href="/a/plugins/lightboxes/jquery/tinylightbox/src/css/jquery.tiny-lightbox.css" media="screen" />
<style>
ul.tinylightbox {padding:0;}
ul.tinylightbox li {display:inline;}
ul.tinylightbox li img {width:60px; height:60px;}
</style>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("#tinylightbox_original").tinyLightbox();
});
</script>
<ul id="tinylightbox_original" class="tinylightbox">
<li><a href="/i/slides/slide-3.jpg" title="Caption 1"><img src="/i/slides/slide-3.jpg" /></a></li>
<li><a href="/i/slides/slide-4.jpg" title="Caption 2"><img src="/i/slides/slide-4.jpg" /></a></li>
<li><a href="/i/slides/slide-11.jpg" title="Caption 3"><img src="/i/slides/slide-11.jpg" /></a></li>
<li><a href="/i/slides/slide-8.jpg" title="Caption 4"><img src="/i/slides/slide-8.jpg" /></a></li>
<li><a href="/i/slides/slide-6.jpg" title="Caption 5"><img src="/i/slides/slide-6.jpg" /></a></li>
<li><a href="/i/slides/slide-9.jpg" title="Caption 6"><img src="/i/slides/slide-9.jpg" /></a></li>
</ul>
|
5. Lightbox
Lightbox is one of the first of it's kind and is pretty much what all other "lightboxes" are based off of. It's a very simple jquery plugin that has a small foot print and works well. The grahpics could probably use a little updating, but still one of the simplest to use. The only real knock on it, is that it sets it's image paths in the plugin code which is a little weird, it would be better to see something in the css using relative paths like "../"
• download & usage •
Try Now:
<script type="text/javascript" src="/a/plugins/lightboxes/jquery/lightbox/js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="/a/plugins/lightboxes/jquery/lightbox/css/jquery.lightbox-0.5.css" media="screen" />
<style>
ul.lightbox {padding:0;}
ul.lightbox li {display:inline;}
ul.lightbox li img {width:60px; height:60px;}
</style>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var lightbox_path = "/a/plugins/lightboxes/jquery/lightbox/";
$(".lightbox a").lightBox({
imageLoading: lightbox_path + "images/lightbox-ico-loading.gif",
imageBtnPrev: lightbox_path + "images/lightbox-btn-prev.gif",
imageBtnNext: lightbox_path + "images/lightbox-btn-next.gif",
imageBtnClose: lightbox_path + "images/lightbox-btn-close.gif",
imageBlank: lightbox_path + "images/lightbox-blank.gif",
});
});
</script>
<ul class="lightbox">
<li><a href="/i/slides/slide-1.jpg" title="Caption 1"><img src="/i/slides/slide-1.jpg" /></a></li>
<li><a href="/i/slides/slide-11.jpg" title="Caption 2"><img src="/i/slides/slide-11.jpg" /></a></li>
<li><a href="/i/slides/slide-5.jpg" title="Caption 3"><img src="/i/slides/slide-5.jpg" /></a></li>
<li><a href="/i/slides/slide-8.jpg" title="Caption 4"><img src="/i/slides/slide-8.jpg" /></a></li>
<li><a href="/i/slides/slide-10.jpg" title="Caption 5"><img src="/i/slides/slide-10.jpg" /></a></li>
<li><a href="/i/slides/slide-9.jpg" title="Caption 6"><img src="/i/slides/slide-9.jpg" /></a></li>
</ul>
|
