Fancybox information - more details on http://fancyapps.com/fancybox/
This info is specific for Freestyle Websites only. The code below will NOT work for sites NOT on the Freestyle website.
<!-- Needed by FancyBox -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="/fancybox2/jquery.mousewheel-3.0.6.pack.js"></script>
<link rel="stylesheet" href="/fancybox2/jquery.fancybox.css?v=2.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox2/jquery.fancybox.pack.js?v=2.0.5"></script>
<link rel="stylesheet" href="/fancybox2/jquery.fancybox-buttons.css?v=2.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox2/jquery.fancybox-buttons.js?v=2.0.5"></script>
<link rel="stylesheet" href="/fancybox2/jquery.fancybox-thumbs.css?v=2.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox2/jquery.fancybox-thumbs.js?v=2.0.5"></script>
<script type="text/javascript" src="/fancybox2/fancyboxCustom.js"></script>
Examples
- Single Image
- Multiple Image
- HTML pages
- Slideshow
Example - click on either thumbnail for 2 different sets of images
If you want to display a set of images like this gallery, use the following code:
HTML Code on page somewhere in the body of the page
<!--Notes:
You can have just ONE thumbnail that is the link to activate a group of images.
Note that there is only ONE <img ... /> tag in the code below.
If you want more than one thumbnail, make sure to include more than one <img ... /> tag
rel="imageSet1" is the KEY to grouping a set of images together for Fancybox to display
rel="imageSet2" is the KEY to grouping a set of images together for Fancybox to display separately from imageSet1
-->
<a href="pathToImage1.jpg" title="Caption under image 1" rel="imageSet1"><img src="pathToImage1-THUMBNAIL.jpg width="200px" height="150px" /></a>
<a href="pathToImage2.jpg" title="Caption under image 2" rel="imageSet1"></a>
<a href="pathToImage3.jpg" title="Caption under image 3" rel="imageSet1"></a>
<a href="pathToImage4.jpg" title="Caption under image 4" rel="imageSet1"></a>
<a href="pathToImage5.jpg" title="Caption under image 5" rel="imageSet1"></a>
<a href="pathToImage6.jpg" title="Caption under image 6" rel="imageSet1"></a>
<a href="pathToImage7.jpg" title="Caption under image 7" rel="imageSet1"></a>
<a href="pathToImage8.jpg" title="Caption under image 8" rel="imageSet1"></a>
<a href="pathToImage9.jpg" title="Caption under image 9" rel="imageSet2"><img src="pathToImage9-THUMBNAIL.jpg width="200px" height="150px" /></a>
<a href="pathToImage10.jpg" title="Caption under image 10" rel="imageSet2"></a>
<a href="pathToImage11.jpg" title="Caption under image 11" rel="imageSet2"></a>
<a href="pathToImage12.jpg" title="Caption under image 12" rel="imageSet2"></a>
<a href="pathToImage13.jpg" title="Caption under image 13" rel="imageSet2"></a>
<a href="pathToImage14.jpg" title="Caption under image 14" rel="imageSet2"></a>
<a href="pathToImage15.jpg" title="Caption under image 15" rel="imageSet2"></a>
<a href="pathToImage16.jpg" title="Caption under image 16" rel="imageSet2"></a>
Javascript Code somewhere in the <head> of the page
Include all the code at the top of the page
<script type="text/javascript">
$(document).ready(function() {
$("a[rel=imageSet1]").fancybox({
type :'iframe', /*This is VERY IMPORTANT to tell fancybox you are displaying an HTML page, not an image*/
padding : 5, /*This determines the size of the white border around the FancyBox display*/
width : 800, /*How many pixels WIDE do you want the FancyBox display area?*/
height : 800, /*How many pixels TALL do you want the FancyBox display area?*/
fitToView : false, /*Must have this if you have set width & height*/
autoSize : false, /*Must have this if you have set width & height*/
'transitionIn' : 'elastic', /*can also use elastic, delete the line gives fade */
'transitionOut' : 'elastic' /*can also use elastic, delete the line gives fade */
});
});
$("a[rel=imageSet2]").fancybox({
type :'iframe', /*This is VERY IMPORTANT to tell fancybox you are displaying an HTML page, not an image*/
padding : 5, /*This determines the size of the white border around the FancyBox display*/
width : 175, /*How many pixels WIDE do you want the FancyBox display area?*/
height : 175, /*How many pixels TALL do you want the FancyBox display area?*/
fitToView : false, /*Must have this if you have set width & height*/
autoSize : false, /*Must have this if you have set width & height*/
'transitionIn' : 'elastic', /*can also use elastic, delete the line gives fade */
'transitionOut' : 'elastic' /*can also use elastic, delete the line gives fade */
});
});
});
</script>
If you want to show an HTML page in a FancyBox display like this page, follow the instructions below:
HTML Code on page somewhere in the body of the page
<a href="pathToPage.html" title="Caption under page" class="html">Text or image link</a>
Javascript Code somewhere in the <head> of the page
Include all the code at the top of the page
<script type="text/javascript">
$(document).ready(function() {
$(".html").fancybox({
type :'iframe', /*This is VERY IMPORTANT to tell fancybox you are displaying an HTML page, not an image*/
padding : 5, /*This determines the size of the white border around the FancyBox display*/
width : 800, /*How many pixels WIDE do you want the FancyBox display area?*/
height : 600, /*How many pixels TALL do you want the FancyBox display area?*/
fitToView : false, /*Must have this if you have set width & height*/
autoSize : false, /*Must have this if you have set width & height*/
openEffect : 'fade',
closeEffect : 'fade'
});
});
</script>
For the Junior Documentary Slideshow, use the following code
- HTML Code on page somewhere in the body of the page
<a href="pathToslideshow.html" title="Title under slideshow" class="slideshow">Text or image link</a>
- Javascript Code somewhere in the <head> of the page
- Include all the code at the top of the page
<script type="text/javascript">
$(document).ready(function() {
$(".slideshow").fancybox({
type :'iframe', /*This is VERY IMPORTANT to tell fancybox you are displaying an HTML page*/
width : 1000, /*How many pixels WIDE do you want the FancyBox display area?*/
height : 667, /*How many pixels TALL do you want the FancyBox display area?*/
padding : 5, /*This determines the size of the white border around the FancyBox display*/
fitToView : false, /*Must have this if you have set width & height*/
autoSize : false, /*Must have this if you have set width & height*/
closeClick : false,
openEffect : 'fade',
closeEffect : 'fade'
});
});
</script>