This post will show you how to create a simple JQuery slideshow using the cycle plugin. Also, with some simple CSS / CSS3 and a couple of downloadable icons you will learn how to make the slideshow look great.
You can view a demo of the slide show at:
http://weebtutorials.com/examples/Jquery_slideshow/jQuerySlider.html
And a preview, for those who cant be bothered to click the link:
Ok – so now you have seen the end result… lets start coding the slideshow.
1. Preparation – Download Jquery and the cycle plugin.
Probably best to skip to the next header if you already have these downloaded!
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.
2. Preparation – Download the icon set for the next/prev buttons.
If you create websites / web elements such as this on a regular basis you’ll probably like these icons! Check below for the link.
http://www.woothemes.com/2009/09/woofunction-178-amazing-web-design-icons/
For those of you who dont have photoshop or a similar product, you can simply download the images below.
Once you have these icons you will need 3 of your own images to be used in the slideshow. Make sure they are all the same size for best results. If you’re looking to reproduce our slideshow perfectly then use image dimensions of 691 / 228.
3. Coding – Structure the JQuery slideshow using HTML.
<div id="slideshowCont"> <ul> <li> <img src="images/one.png" alt="testimg" title="testimg"/> <div> <h2> Sample item </h2> <p> A sample portfolio item. One of a kind, beautiful, intuative and cost effective! Like this? Read more <a href="#"> here</a>. </p> </div> </li> <li> <img src="images/two.png" alt="testimg" title="testimg"/> <div> <h2> Weeb tutorials </h2> <p> This is one of my websites, and this is some dummy text about that site. You can read more<a href="#"> here</a>. </p> </div> </li> <li> <img src="images/three.png" alt="testimg" title="testimg"/> <div> <h2> A Simple image gallery </h2> <p> A sample portfolio item. One of a kind, beautiful, intuative and cost effective! Like this? Read more <a href="#"> here</a>. </p> </div> </li> </ul> <div id="sliderControls"> <img src="images/lastArrow.png" alt="last" title="last" id="last"/> <img src="images/nextArrow.png" alt="next" title="next" id="next"/> </div> </div>
The code above is very simple. First of all you have a DIV which simply acts as the wrapper for entire slideshow, this can be used to position the slideshow on the page, specify width or height etc.
Inside this DIV is an Unordered list. The children of this list (the <li>, or list items) are the elements which will be ‘cycled’. To expand on this, just to make it clear, anything contained with the ‘<li>’ ‘</li>’ tags will be sliding left.
If you take a look at the code you will see that inside each of these list items is an image, a title and a caption.
And finally, at the very bottom of the code, lies the slider controls consisting of our two arrow icons.
Slideshow so far:
As you can see, this is nothing special. Just an image and a bit of text listed vertically. It’s obviously in dire need of some CSS.
3a. Fonts – Add font to page using Google Fonts.
You can view the google fonts page by following the link below, it basically provides a REALLY simple way of importing fonts into your webpages. Highly recommended!
http://www.google.com/webfonts
The site contains instructions on how to utilise the fonts on your site, but for now just add the following to the HEAD section of your page:
<link href='http://fonts.googleapis.com/css?family=Brawler&v1' rel='stylesheet' type='text/css'/>
It’s that simple, you can now utilise the Brawler font in your CSS file.
4. Styling – Style the slideshow using CSS
Below is the CSS used to style the slideshow. A couple of noteworthy things to consider before inspecting the code:
We want the slideshow to work for those without Javascript, obviously this is the minority of users and the slideshow is really based around javascript so we wont put too much effort into this. To enable the slideshow to work without javascript we have done the following.
- Floated all the list items to the left inside a container which is wide enough to hold them all.
- Changed the main parent containers(#slideshowCont) overflow property to ‘scroll’. This hides all content that overflows the container, but provides a scroll bar so that the user can still access the content.
- We can later change this back to default using javascript, so it has no effect on those with it enabled.
The rest of the code is pretty straightforward and we think the comments in the code should make it easy enough to follow.
/*reset*/
#slideshowCont, #slideshowCont ul, #slideshowCont li, img, h1, h2, div, p {
margin:0;
padding:0;
list-style:none;
}
#slideshowCont {
float:left; /* Floating the parent element to the left removes the float bug on child elements, otherwise would have to use clear:both*/
width:691px;
font-family: 'Brawler', arial, serif;
overflow:scroll; /*Useful if the user does not have Javascript, adds scroll bar to div*/
position:relative; /* Children positioned absolutely will be place relative to this container*/
}
#slideshowCont ul{
width:2100px; /*Make sure this is wide enough to contain all of your images, again useful for those without javascript*/
}
#slideshowCont ul li {
position:relative;
width:688px;
float:left;
min-height:288px;
}
.imageDesc {
padding:17px;
background:#f4f4f4;
float:left;
width:655px;
border-top: 1px solid #c1c1c1;
-moz-box-shadow: inset 0 0 9px #ffffff; /* Inner glow effect*/
-webkit-box-shadow: inset 0 0 9px #ffffff; /* Inner glow effect*/
position:absolute; /* Positioned at the bottom of DIV, using bottom and left properties*/
bottom:-1px;
left:-1px;
}
#slideshowCont h2{ /* Simple styling of headers*/
color:#7aaec1;
font-size:16px;
float:left;
margin-right:19px;
margin-top:5px;
max-width:170px;
}
#slideshowCont .longTitle {
font-size:13px;
}
#slideshowCont p{ /* Simple styling of paragraphs*/
color:#a9a9a9;
font-family: 'Brawler', arial, serif;
font-size:13px;
float:left;
width:400px;
}
#slideshowCont a{
color:#7aaec1;
}
#sliderControls {
position:absolute;/* Positioned at the bottom right of DIV, using bottom and left properties*/
left:600px;
bottom:17px;
z-index:10000;
display:none;
}
4. Slideshow – Adding slideshow functionality using JQuery.
You should now be ready for the final step of this tutorial, and should have something similar to the image below.
Kind of ugly with the scroll bars, but at least it works!
Lets add the finishing touches, as usual refer to the comments for an explanation. Remeber to add this to the HEAD of your HTML document:
<script type="text/javascript">
$(document).ready(function() {
<!-- Change overflow to hidden to remove scroll bars -->
$("#slideshowCont").css("overflow", "hidden");
<!-- Hide controls, these will be faded in -->
$("#sliderControls").css("display", "none");
<!-- Add a border to the slideshow, this was causing problems in the non-javascript version in IE -->
$('#slideshowCont ul').css("border", "1px solid #c1c1c1");
<!-- Hide DESC, this will be faded in -->
$('.imageDesc').css("display", "none");
<!-- Animation-->
$('#slideshowCont ul').cycle({ <!-- Select the element and call the cycle function-->
fx: 'scrollHorz', <!-- Animation effect, in the case scroll-->
next: '#next',<!-- Button which will move to next slide-->
prev: '#last',<!-- Button which will move to last slide-->
timeout:0,<!-- Stops the slideshow from scrolling automatically. -->
before:onBefore,<!-- Function called before animation -->
after:onAfter <!-- Function called after animation -->
});
});
function onBefore() { <!-- Function called before animation, used to hide elements so that they can be faded back in -->
$('.imageDesc').css("display", "none");
$("#sliderControls").css("display", "none");
}
function onAfter() { <!-- Function called after animation, fades elements in -->
$('.imageDesc').fadeIn(1500);
$("#sliderControls").fadeIn(1500);
}
</script>The post Simple JQuery slideshow with fading caption appeared first on Weebtutorials.