Thickbox is no longer being developed.
I am using FancyBox on this demo page. View source to see the code.
http://alt-web.com/GALLERY/Photo_Gallery.html
Don't forget to upload the jQuery scripts to your server. I keep the jQuery plugins in a folder called Scripts.
The link paths and function code looks like this and it's inserted between the document's <head> and </head> tags:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="Scripts/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="Scripts/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="Scripts/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<!--Calls Slideshow Transitions -->
<script type="text/javascript">
$(document).ready(function() {
$("a[rel=group]").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 400,
'speedOut' : 600,
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
});
</script>
The code for images looks like this and is inserted between the <body> and </body> tags. I keep photos in a folder called Images.
<!--BEGIN IMAGE GALLERY -->
<div class="fancybox">
<a rel="group" href="Images/1_big.jpg" title="optional captions"><img src="Images/1_small.jpg" alt="image 1" width="75" height="75" border="0" /></a>
<a rel="group" href="Images/2_big.jpg" title="optional captions"><img src="Images/2_small.jpg" alt="image 2" width="75" height="75" border="0" /></a>
<a rel="group" href="Images/3_big.jpg" title="optional captions "><img src="Images/3_small.jpg" alt="image 3" width="75" height="75" border="0" /></a>
<!--END IMAGE GALLERY --> </div>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
