How To Create JQuery Featured Content Slideshow

Posted by Lasantha Bandara on July 20th, 2010 File Under : html, java script, jquery, widget25 Comments

In this tutorial I am going to explain,how to create a slideshow to show your featured content to visitors.This is very easy to add and configure.This slideshow is working using jquery.You do not want to host any java script file yourself to add this slideshow to your blog.So you can add this slideshow to your site with in few minutes.Default width=600px and height=240px.But you can change it easily to match it for your website.

If you like add this slideshow to your blogger blog or website,then follow the steps given below.

1.Login to your blogger dashboard--> Design - -> Edit HTML.

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

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

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function() {

//Execute the slideShow, set 6 seconds for each images
slideShow(3000);

});

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:600px;
height:240px;
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:600px;
height:240px;
border:none;
}
#slideshow-caption {
width:600px;
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.Now save your template.

5.Go to Layout --> Page Elements.

6.Click on 'Add a Gadget'.

7.Select 'HTML/Javascript' and add the code given below:

<ul class="slideshow">

<li><a href="#"><img src="http://3.bp.blogspot.com/_4HKUHirY_2U/TEVd7gbRVeI/AAAAAAAABGc/J-aSBfN0rhw/s1600/1.jpg" title="This is featured post 1 title" alt="Replace This Text With Your Featured Post 1 Description." /></a></li>

<li><a href="#"><img src="http://2.bp.blogspot.com/_4HKUHirY_2U/TEVd7zgT63I/AAAAAAAABGk/9vJ6VYTYGWM/s1600/2.jpg" title="This is featured post 2 title" alt="Replace This Text With Your Featured Post 2 Description." /></a></li>

<li><a href="#"><img src="http://4.bp.blogspot.com/_4HKUHirY_2U/TEVd8JKsDaI/AAAAAAAABGs/vzECCT1mDws/s1600/3.jpg" title="This is featured post 3 title" alt="Replace This Text With Your Featured Post 3 Description." /></a></li>

<li><a href="#"><img src="http://1.bp.blogspot.com/_4HKUHirY_2U/TEVd8VPgRRI/AAAAAAAABG0/O4yhLEWG5UU/s1600/4.jpg" title="This is featured post 4 title" alt="Replace This Text With Your Featured Post 4 Description." /></a></li>

</ul>

You can add more slides as you like.

Note : Replace images URLs,"This is featured post X title","Replace This Text With Your Featured Post X Description" with your content.

You are done.

File Under : html, java script, jquery, widget

25 Responses to “How To Create JQuery Featured Content Slideshow”

  1. cHugy - gOgOg says:

    Thanks for sharing...
    good blog and good post...!!!
    I wait you follow back to me ok.....!!!

  2. Саша Стефановић says:

    This is not automatic ! Automatic is something like read only hack, that gives you first image in post every time, you don't even need to insert URL to image or post.

    I hope this can be remaked to something like this, and after that, you can call it automatic.

  3. Beben says:

    its a rock...

  4. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    @Саша Стефановић

    You are correct.I changed the title.

  5. mezzoe blog says:

    thanks very much..

  6. Teoría Blogger says:

    Gracias por el truco amigo [Spanish]

  7. Dav7 says:

    I liked it and am already using on 1 of my blogs, but the images are changing very fast! How can I raise the seconds between them?

  8. musiktainment says:

    yeah..

    thanks a lot...

  9. NaviMaster says:

    Muy wen tema broer me usto mucho i era justo lo q buscaba ia q en la mayoria de plantillas q encontraba ese slid eran para worpress i no para blogger asi q esto me va a serbir artote grax broer.

  10. Anarchos says:

    Thanks very much for this wonderful trick

  11. Janine says:

    how can I resize it?

  12. Janine says:

    Oh 1 more thing how can I make it slide to the left or right the images and descriptions

  13. Janine says:

    1 more question,Your thing like this Home Services Make Money Privacy Policy Contact. how can you click it and it will go to another page? like yours. Can you make a tutorial on that? plz reply.

  14. -=Evilbou Hacker=- says:

    cool.. thanks... I've bookmark your web! 😀

  15. torijean says:

    doesn't work thanks for nothing

  16. Tokkar says:

    @torijean - works just fine, so you must've done something wrong. I suggest you go back over it and see what you did incorrectly - I just installed this on my blog and it works flawlessly. Remember to post the code given BEFORE the /head tag, and then post the other code in an HTML/JavaScript gadget in layout view.

    To the author - fine script and thank you!

  17. Bronzi says:

    Do this work on the old blog templetes like this one. http://bronzilla-sheppard.blogspot.com/ I have not been able to make any changes to it because she is a older templete. Can you check her out and let me know on a comment. We be much appreciated if I could add it with out messing up the blog.

  18. friv says:

    thanks for share great post..i learn a lot !

  19. Dude says:

    lasantha i have question how to add it on home page above all post..??

  20. Saz says:

    Thank you to the poster for taking the time to publish this help article. After a weeks worth of searching for some form of javascript sideshow that works with blogger, I finally came across this site and now I have a simple slideshow that looks great on my site.

    All the best to you and thanks again.

    Saz

    x

  21. Stevo says:

    A great help. Thanks.

    I am working on a website / blog that I have not published yet. The slide show works great in Firefox and IE. However in Chrome it appears to show the first slide twice. I think it does the same in Firefox and Ie, only you don't see the transition. Any suggestions please?

  22. tojihi.com says:

    A great help. Thanks for this post...

  23. Suren N. Semage says:

    Thank you very much my dear friend. this tutorial is very useful to me.

  24. Kathy says:

    thank you so much for his great script! I'm having a slight problem with the first image appearing twice. Using Safari and same problem in Firefox. Can you help?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.