jquery slider inside fancybox

5 Sep

Jquery Auto-Playing Slide-show inside fancy-box

 

/* Fancy box code */

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

});

</script>

/*jquery code for image slide */

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

setInterval(function() {
$(‘#slideshow > div:first’)
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo(‘#slideshow’);
},  3000);
</script>

————————-

/* HTML */

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


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

----------

/* 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>

slider_inside_fancybox

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

-------

Referred by :
http://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/


 

 

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: