jquery slider inside fancybox

5 Sep

Jquery Auto-Playing Slide-show inside fancy-box


/* Fancy box code */

<script type=”text/javascript”>
$(document).ready(function() {
‘overlayShow’    : true,
‘autoScale’: true,
‘transitionIn’    : ‘elastic’,
‘transitionOut’    : ‘elastic’



/*jquery code for image slide */

<script type=”text/javascript”>
$(“#slideshow > div:gt(0)”).hide();

setInterval(function() {
$(‘#slideshow > div:first’)
},  3000);


/* HTML */

<div> <a id=”fancybox” style=”text-decoration: underline;font-size: 13px”  href=”#slideshow”>Click Here</a></div>

<div id="slideshow">
     <img src="image1.jpg">
     <img src="image2.jpg">
     Pretty cool eh? This slide is proof the content can be anything.


/* css */

#slideshow {
    width: 600px;
    height: 400px;
#slideshow img {
    margin-top: 20px;
    margin-left: 38px;
    border: 2px solid #ccc;

#slideshow > div {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;

/* script */
<script type='text/javascript' src='{% media  "/media/js/googleshare.js" %}'></script>
<script type="text/javascript" src='{% media  "/media/js/fancybox/jquery.fancybox-1.3.4.pack.js" %}'></script>


<link rel="stylesheet" href='{% media  "/media/js/fancybox/jquery.fancybox-1.3.4.css" %}' type="text/css" media="screen" />


Referred by :




One Response to “jquery slider inside fancybox”

  1. Avinash September 22, 2012 at 7:39 am #

    Thanks, made my life easy 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: