One of the most popular ways you can showcase photos on your website is the lightbox effect.
Well, we wanted to simplify the process, so we've written a little tool that makes adding the Fancybox lightbox script to your page a snap. Thanks to cdnjs, you don't even have to worry about adding any files to your site.
Well, we wanted to simplify the process, so we've written a little tool that makes adding the Fancybox lightbox script to your page a snap. Thanks to cdnjs, you don't even have to worry about adding any files to your site.
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> | |
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> | |
<title>fancy box | himmsrathore</title><style> | |
</style> | |
<link rel="stylesheet" type="text/css" media="screen" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css" /> | |
<link rel="stylesheet" type="text/css" href="css/jquery-photo-enlarger.css"> | |
</head> | |
<body> | |
<a> <img class="fancybox" src="img/logo_old.png" data-big="img/logo_new.png" /></a> | |
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> | |
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> | |
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.min.js"></script> | |
<script type="text/javascript"> | |
$(function($) { | |
var addToAll = false; | |
var gallery = true; | |
var titlePosition = 'inside'; | |
$(addToAll ? 'img' : 'img.fancybox').each(function() { | |
var $this = $(this); | |
var title = $this.attr('title'); | |
var src = $this.attr('data-big') || $this.attr('src'); | |
var a = $('<a href="#" class="fancybox"></a>').attr('href', src).attr('title', title); | |
$this.wrap(a); | |
}); | |
if (gallery) | |
$('a.fancybox').attr('rel', 'fancyboxgallery'); | |
$('a.fancybox').fancybox({ | |
titlePosition: titlePosition | |
}); | |
}); | |
$.noConflict(); | |
</script> | |
<script> | |
$('.thumb').PhotoEnlarger(); | |
</script> | |
</body> | |
</html> |