Fancy Box plug-in for Images

In this section, you will learn how to use fancy box image slider plug-in for image display.


Share on Google+Share on Google+

Fancy Box plug-in for Images


In this section, you will learn how to use fancy box image slider plug-in for image display.

Fancy Box plug-in for Images

In this section, you will learn how to use fancy box image slider plug-in for image display. This plug in is very easy to use but very effective to implement .The plug-in we are using here is "jquery.fancybox-1.3.1.js".You can set Image animation to 'fade', 'elastic' and 'none'(first row of example) .You can set title position to 'outside', 'inside' and 'over' of image(second row of example). You can also call 'next' or 'previous' image by mouse wheel rolling or by clicking on arrow appearing on image(last row of example).


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="imagetoolbar" content="no" />
<title>FancyBox plug-in for Images</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.1.css" media="screen" />
<link rel="stylesheet" href="fancybox/style.css" />
<script type="text/javascript">
$(document).ready(function() {
* Examples - images

'titleShow' : false

'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'

'titleShow' : false,
'transitionIn' : 'none',
'transitionOut' : 'none'


'titlePosition' : 'inside'

'titlePosition' : 'over'

'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 ? ' &nbsp; ' + title : '') + '</span>';
<div id="content">
<hr />
Different animations - 'fade', 'elastic' and 'none'<br />

<a id="example1" href="./fancybox/1_b.jpg"><img alt="example1" src="./fancybox/1_s.jpg" /></a>

<a id="example2" href="./fancybox/2_b.jpg"><img alt="example2" src="./fancybox/2_s.jpg" /></a>

<a id="example3" href="./fancybox/3_b.jpg"><img alt="example3" src="./fancybox/3_s.jpg" /></a>

Different title positions - 'outside', 'inside' and 'over'<br />

<a id="example4" href="./fancybox/4_b.jpg"
title="The Hanging Gardens of Babylon is one of the original Seven Wonders of the Ancient World."><img alt="example4" src="./fancybox/4_s.jpg" /></a>

<a id="example5" href="./fancybox/5_b.jpg"
 title="The Colossus of Rhodes was a statue of the Greek god Helios, erected in the city of
 Rhodes on the Greek island of Rhodes by Chares of Lindos between 292 and 280 BC. "><img alt="example5" src="./fancybox/5_s.jpg" /></a>

<a id="example6" href="./fancybox/6_b.jpg" title="The Colosseum or Roman Coliseum, originally the Flavian Amphitheatre
(Latin: Amphitheatrum Flavium, Italian Anfiteatro Flavio or Colosseo), is an elliptical amphitheatre in the center of the city of
 Rome, Italy, the largest ever built in the Roman Empire. It is considered one of the greatest works of Roman architecture
and Roman engineering."><img alt="example6" src="./fancybox/6_s.jpg" /></a>

Image gallery (try using mouse scroll wheel)<br />

<a rel="example_group" href="./fancybox/7_b.jpg" title="Seven wonders of the world">
<img alt="" src="./fancybox/7_s.jpg" /></a>

<a rel="example_group" href="./fancybox/8_b.jpg" title=""><img alt="" src="./fancybox/8_s.jpg" /></a>

<a rel="example_group" href="./fancybox/9_b.jpg" title=""><img alt="" src="./fancybox/9_s.jpg" /></a>
<hr />


When you click on first row :

When you click on second row it will appear like this :

The third row appears same as previous one ,the only difference is that you can switch to next image by rolling mouse. 

Download Source Code

Click here to see demo



Posted on: August 12, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles