How to add a Slideshow to a blog (JQuery)

This is going to be another exciting experience for all the bloggers. Because all the bloggers like to make their blog more attractive for the visitors. So now you can easily add a slide show to your blogger blog by using this simple Html code with java script. And also you can add this slideshow even inside blog posts. I’ll explain it step by step for you. Installation of this jQuery slide show is easy and less time consuming. On the other hand you can remove it easily within few seconds.

Following is a Screenshot of this awesome slideshow gadget





Now let me explain the process,

1.    First go to your DASHBOARD >>DESIGN

EDIT HTML

2.    Now press CTRL + F and look for the following code

   </head>

3.    Replace the above tag with following code

<script src='https://sites.google.com/site/sajithsandd/home/slideshowscript.txt' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function() {

//Execute the slideShow, set 6 seconds for each images

slideShow(2500);

});

function slideShow(speed) {

//append a LI item to the UL list for displaying caption

$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

//Set the opacity of all images to 0

$('ul.slideshow li').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)

$('ul.slideshow li:first').css({opacity: 1.0});

//Get the caption of the first image from REL attribute and display it

$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));

$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));

//Display the caption

$('#slideshow-caption').css({opacity: 0.7, bottom:0});

//Call the gallery function to run the slideshow

var timer = setInterval('gallery()',speed);

//pause the slideshow on mouse over

$('ul.slideshow').hover(

        function () {

                clearInterval(timer);

        },

        function () {

                timer = setInterval('gallery()',speed);

        }

);

}

function gallery() {

//if no IMGs have the show class, grab the first image

var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image

var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

//Get next image caption

var title = next.find('img').attr('title');

var desc = next.find('img').attr('alt');

//Set the fade in effect for the next image, show class has higher z-index

next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

//Hide the caption first, and then set and display the caption

$('#slideshow-caption').animate({bottom:-70}, 300, function () {

                //Display the content

                $('#slideshow-caption h3').html(title);

                $('#slideshow-caption p').html(desc);

                $('#slideshow-caption').animate({bottom:0}, 500);

});

//Hide the current image

current.animate({opacity: 0.0}, 1000).removeClass('show');

}

//]]>

</script>

<style type='text/css'>

ul.slideshow {

list-style:none;

width:500px;

height:250px;

overflow:hidden;

position:relative;

margin:0;

padding:0;

font-family:Arial,Helvetica,Trebuchet MS,Verdana;

;

}

ul.slideshow li {

position:absolute;

left:0;

right:0;

}

ul.slideshow li.show {

z-index:500;

}

ul img {

width:500px;

height:250px;

border:none;

}

#slideshow-caption {

width:500px;

height:70px;

position:absolute;

bottom:0;

left:0;

color:#fff;

background:#000;

z-index:500;

}

#slideshow-caption .slideshow-caption-container {

padding:5px 10px;

z-index:1000;

}

#slideshow-caption h3 {

margin:0;

padding:0;

font-size:16px;

}

#slideshow-caption p {

margin:5px 0 0 0;

padding:0;

}

</style>

4.    Replace the values in red colour to adjust the height of the slideshow and the values with blue colour to adjust the width of the slideshow. 

5.    Then SAVE TEMPLATE

6.    Now Go to your DASHBOARD >> DESIGN >> ADD A GADGET 

7.    Copy the following code and paste it on HTML/JAVA script

<ul class="slideshow">
<li><a href="Your landing page URL"><img src="Your image URL" title="Image Title" alt="Image Description" /></a></li>
<li><a href="Your landing page URL"><img src="Your image URL" title="Image Title" alt="Image Description" /></a></li>
<li><a href="Your landing page URL"><img src="Your image URL" title="Image Title" alt="Image Description" /></a>
</li>
<li><a href="Your landing page URL"><img src="Your image URL" title="Image Title" alt="Image Description" /></a>
</li>
<li><a href="Your landing page URL"><img src="Your image URL" title="Image Title" alt="Image Description" /></a>
</li>
</ul>

8.    Replace the following on above code

a)    Replace “Your landing page URL” with the URL that your reader should visit when they click on that particular image.

b)    Replace “Your image URL” with the image URL which should appear in slideshow.

c)    Replace “Image Title” with the title for a particular image.

d)    Replace “Image Description” with a description for the particular image.

9.    Now save your gadget and place it on an appropriate position (whatever place you want)

10. If you want to add this element inside your post just add the code in step 7 inside your new post (Add in HTML mode) and edit the links as mentioned above.

That’s it, now view your blog. How amazing is it?? Post your comment below