How to put slideshow javascript to your website

i want to share this script for you want to using slideshow to your site

i usually use this slideshow, its easy to use and dynamic, can manually setting

this script using  jquery , you can download at jquery.com or you can download here

Ultimate Fade-in slideshow

Download this stuff

Script ultimate

Step 1

Simply add the below code inside the <HEAD> section of the page:

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script&gt;

<script type=”text/javascript” src=”fadeslideshow.js”>
</script>

<script type=”text/javascript”>

var mygallery=new fadeSlideShow({
wrapperid: “fadeshow1”, //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
[“http://i26.tinypic.com/11l7ls0.jpg&#8221;, “”, “”, “Nothing beats relaxing next to the pool when the weather is hot.”],
[“http://i29.tinypic.com/xp3hns.jpg&#8221;, “http://en.wikipedia.org/wiki/Cave&#8221;, “_new”, “Some day I’d like to explore these caves!”],
[“http://i30.tinypic.com/531q3n.jpg”%5D,
[“http://i31.tinypic.com/119w28m.jpg&#8221;, “”, “”, “What a beautiful scene with everything changing colors.”] //<–no trailing comma after very last image element!
],
displaymode: {type:’auto’, pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: “ondemand”,
togglerid: “”
})

var mygallery2=new fadeSlideShow({
wrapperid: “fadeshow2”, //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
[“http://i26.tinypic.com/11l7ls0.jpg&#8221;, “”, “”, “Nothing beats relaxing next to the pool when the weather is hot.”],
[“http://i29.tinypic.com/xp3hns.jpg&#8221;, “http://en.wikipedia.org/wiki/Cave&#8221;, “_new”, “Some day I’d like to explore these caves!”],
[“http://i30.tinypic.com/531q3n.jpg”%5D,
[“http://i31.tinypic.com/119w28m.jpg&#8221;, “”, “”, “What a beautiful scene with everything changing colors.”] //<–no trailing comma after very last image element!
],
displaymode: {type:’manual’, pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: “always”,
togglerid: “fadeshow2toggler”
})

</script>

 

Step 2

Then, insert the following sample HTML for 2 sample Fade In slideshows:

<div id=”fadeshow1″></div>

<br />

<div id=”fadeshow2″></div>

<div id=”fadeshow2toggler” style=”width:250px; text-align:center; margin-top:10px”>
<a href=”#”><img src=”http://i31.tinypic.com/302rn5v.png&#8221; style=”border-width:0″ /></a>  <span style=”margin:0 50px; font-weight:bold”></span> <a href=”#”><img src=”http://i30.tinypic.com/lzkux.png&#8221; style=”border-width:0″ /></a>
</div>

check this original link

 


We Addicted, We Share, And We Inspired

Share your addicted like  Coding, Design, Hobby at here.We are community for share and be inspired for other.

 


Hello world!

Welcome to WordPress.com. After you read this, you should delete and write your own post, with a new title above. Or hit Add New on the left (of the admin dashboard) to start a fresh post.

Here are some suggestions for your first post.

  1. You can find new ideas for what to blog about by reading the Daily Post.
  2. Add PressThis to your browser. It creates a new blog post for you about any interesting  page you read on the web.
  3. Make some changes to this page, and then hit preview on the right. You can always preview any post or edit it before you share it to the world.