Email Marketing

This tutorial will show you how to create a slideshow using JQuery. The slideshow is compatible with all modern browsers, including IE, Opera and Firefox. I havent bothered making it IE6 compatible though, so if that is what you require its probably best that you look for an alternative tutorial!

The slideshow is also degradable – meaning users who have javascript disabled can still use it.

Preview:

Slideshow c

Demo the slideshow: http://weebtutorials.com/jQueryTest.html

Full code for copy/paste: http://weebtutorials.com/jQueryTestCode.html

Step 1: Getting started – Installing Jquery

First of all you will need to download the JQuery library, if you havent done so already. You can download JQuery via the following link:

http://docs.jquery.com/Downloading_jQuery#Download_jQuery

Save the file as ‘jquery.js’ or something similar into the folder in which you will be creating your HTML file.

Next you will need to download the Jquery Cycle plugin. You can do so via the following link:

http://jquery.malsup.com/cycle/download.html

Extract the contents of the zip file into the same folder used previously.

You should now have a folder containing both the ‘jquery.js’ (or whatever you chose to name it) file and the cycle plugin files.

Step 2: Download the required images

Right-click and save as to download the following images. Make sure to save them in the same folder you used for the JQuery stuff. This time save them in a sub-folder called ‘images’.

Step 3: Structure and style the slideshow using HTML / CSS.

Step 3a:

Create two DIV’s and specify an ID for each. The outer DIV will be used as a wrapper, the inner will be used to house the slideshow content.

<div id=”slideshowCont”>
<div id=”slideShow”>
</div>
</div>

Apply some styles to these DIVs:

#slideshowCont {
float:left;
width: 650px;
border:1px solid #e3e3e3;
background:url(images/slideBG.png); /*One of the images downloaded earlier*/
overflow:scroll; /*Any content which flows over the boundries of the div will be hidden, but accessible through use of a scroll bar*/
position:relative; /* Any content positioned as absolute will be positioned relative to this element*/
}

#slideShow {
padding:20px 0px; /*20 px padding to top and bottom*/
width:520px;
height:142px;
float:left;
}

Slideshow so far:

Slideshow A

Step 3b:

Now, within the ‘slideShow’ DIV you are going to add an unordered list (‘ul’). This UL will need to contain 3 list items (‘li’).

Inside each of the list items will be 3 divs – each containing an image and a caption. We will then position the list items so that only one is visible at any given time. We can then use Jquery to cycle between the list items.

Below is how our code should look now, you will need to find some of your own images to include in the slideshow. It may look intimidating, but remember it is just the same piece of code repeated 3 times. The only thing that changes is the img ‘src’, ‘alt’ and a bit of text.

<div id=”slideshowCont”>
<div id=”slideShow”>
<ul>

<li>

<div><img src=”images/cool.jpg” alt=”testimage”  width=”120″ height=”120″/>
<p> Cool image</p>
</div>

<div><img src=”images/cool2.jpg” alt=”testsimage”  width=”120″ height=”120″/>
<p> Chocolate! </p>
</div>

<div><img src=”images/cool3.jpg” alt=”testimage”  width=”120″ height=”120″/>
<p> Outdoors </p>
</div>

</li>

<li>

<div><img src=”images/time.gif” alt=”testimage”  width=”120″ height=”120″/>
<p> Time</p>
</div>

<div><img src=”images/time.gif” alt=”testimage”  width=”120″ height=”120″/>
<p> Time</p>
</div>

<div><img src=”images/time.gif” alt=”testimage”  width=”120″ height=”120″/>
<p> Time</p>
</div>

</li>

<li>

<div><img src=”images/tags.gif” alt=”testimage”  width=”120″ height=”120″/>
<p> Tags </p>
</div>

<div><img src=”images/tags.gif” alt=”testimage”  width=”120″ height=”120″/>
<p> Tags </p>
</div>

<div><img src=”images/tags.gif” alt=”testimage”  width=”120″ height=”120″/>
<p> Tags </p>
</div>

</li>

</ul>
</div>
</div>

Now we can style the list, positioning the images and text as required:

#slideShow ul{
list-style:none;
margin:0;
padding:0;
width:1900px; /*Important – Must be wide enough so that all the images can sit side by side, otherwise they will move to the next line.*/
margin-left:58px; /* Position the list as required*/
}
#slideShow ul li {
float:left;
background:url(images/slideBG.png); /* IE places a white background around the images, not sure why, but this fixes it*/
}
#slideShow ul li div{
float:left;
margin-left:26px; /* Again, just positioning images as required. This should pretty much center them out in the div*/
margin-right:24px;

}

#slideShow ul li div p{
margin:0;
padding:0;
width:120px;
background:url(images/imgFooterBG.png) repeat-x;
text-align:center;
color:#5e8387;
text-transform:uppercase;
padding:2px 0px;
font-size:12px;
}

Slideshow so far:

Slideshow b

Step 3c:

The next step is to add in the slider buttons.

Add the first in here:

<div id=”slideShow”>
<img src=”images/SlastBtn.png” alt=”next” id=”next” width=”40″/>
<ul>

And the second here:

</ul>
<img src=”images/SnextBtn.png”  alt=”last”  id=”last” width=”40″/>
</div>

It is not too important where you actualy place the buttons, as we are going to position them as ‘absolute’ which actually takes them out of the document flow. But its best to keep things somewhat logical in my opinion.

Now we can apply some styling to the buttons:

#next{
top:75px;
left:10px;
cursor:pointer; /* Change to mouse pointer when user hovers element*/
position:absolute;
display:none; /* Important – we only want to display the buttons if javascript is enabled. Hide them using the display property, we can then bring them back into view using javascript*/
}
#last{
top:75px;
right:10px;
cursor:pointer;
position:absolute;/* */
display:none;
}

Slideshow so far:

Slideshow c

The slideshow is now structured and styled. We are ready to add the slideshow functionality.

Step 3: Slideshow functionality using JQuery

The following code should be added to the head section of your HTML page.

Check the comments on each line for a brief description.

First of all create a link to the jQuery and jQuery cycle files:

<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”jquery.cycle.all.min.js”></script>

Then add the actual code:

<script type=”text/javascript”>
$(document).ready(function() { // This basically means, when the page is ready, or loaded, execute the following code.
$(“#slideshowCont”).css(“overflow”, “hidden”); // Change the overflow property to hidden, this removes the ugly scroll bar which is no longer needed (seeing as the user has javascript enabled)
$(“#next”).css(“display”, “block”); // Change the display property to block – bringing the image back into view.
$(“#last”).css(“display”, “block”);

});

</script>

Now to add the slideshow functionality, add the bolded parts to your code:

$(document).ready(function() {
$(“#slideshowCont”).css(“overflow”, “hidden”);
$(“#next”).css(“display”, “block”);
$(“#last”).css(“display”, “block”);
$(‘#slideShow ul’).cycle({
fx: ‘scrollLeft’, //desired animation effect, can choose from a variation of effects..fadeIn, turnLeft etc.
pause:1,
next: ‘#next’, //select the button, via ID, which should browse to the next slide
prev: ‘#last’, //select the button, via ID, which should browse to the previous slide
timeout:0
});
});

Email Marketing

About the Author

26 Year old university student living in the UK. Currently studying Web Design & development.

19 Responses to Create a clean, simple slideshow using HTML, CSS and JQuery

  1. […] tutorial is hosted on our old site, to view it visit the following link: http://weebtutorials.com/theBlog/?p=128 Read more from Javascript, JQuery Click here to cancel […]

  2. […] Create a clean, simple slideshow using HTML, CSS and JQuery […]

  3. […] Create a clean, simple slideshow using HTML, CSS and JQuery […]

  4. Quintana says:

    I wanted to get the rss FEED but feed site showing me some Xml errors…

  5. Brian olsen says:

    Very nice and simple. thanks

  6. […] I’m just looking threw my files now and I attempted to build 9 of them, and only 2 of them sort of worked in the end. The one that I build that got the worked the best was this one. […]

  7. Gabriel Brooks says:

    I’ve just bookmarked this page, terrific site!

  8. money converter says:

    Good article! We will be linking to this particularly great article on our
    website. Keep up the good writing.

  9. world cup soccer news says:

    Many thanks for sharing your neat web-site.

  10. Oliver Edwards says:

    Within the top 10 of my favorite articles, thankyou!

  11. Hunter Roberts says:

    Excellent writing, i did read it two times so sorry for this, i’ve passed it on to my friends, so confidently
    they’ll like it as well.

  12. Dylan Cruz says:

    One of the better items i have seen this week.

  13. social shopping usa says:

    Aw, this was an extremely nice post. Finding the time and actual
    effort to produce a superb article… but what can I say… I
    put things off a whole lot and don’t manage to get anything done.

  14. Daniel Bryant says:

    This has to be my 2nd favorite commentary in the week, i can’t let you know number one, it might offend
    you!

  15. stainless steel grill cart says:

    Having read this I thought it was extremely enlightening.
    I appreciate you finding the time and energy to put this article together.
    I once again find myself personally spending a significant amount
    of time both reading and leaving comments. But so what, it was
    still worthwhile!

  16. ask says:

    What’s up, all is going fine here and ofcourse every one is sharing facts, that’s in fact good, keep up writing.

  17. ask says:

    I am regular reader, how are you everybody?
    This paragraph posted at this web site is genuinely nice.

  18. ask says:

    It’s an remarkable paragraph in support of all the online visitors; they will obtain advantage from it I am sure.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>