PSD to HTML Blog

Adding a slider to your Website using jQuery
  • December 12

1 Comment


You can make the header part of your blog or Website more eye-catchy by using an image slider. However, you have to put efforts to create an image slider from scratch. To save your time and efforts, the most used JavaScript library is available online called jQuery. You can use jQuery to create an image slider with fewer efforts. In this write up, we will discuss how to create a jQuery sample slider for your Website. You can download the source files at the end of this article.

Tools

  1. HTML/CSS/JS Editor – like Adobe Dreamweaver, Aptana Studio, Notepad++, or Notepad
  2. Browser – like Internet Explorer, Google Chrome, Mozilla Firefox, Apple Safari, or Opera

NOTE: We have used Adobe Dreamweaver to design the slider and tested in all above browsers.

Benefits of using this slider

  1. This slider is cross compatible with all modern browsers like Internet Explorer 9, Mozilla Firefox 4, Google Chrome 11, Opera 11 and Apple Safari 5.
  2. It loads up instantly.
  3. It is quite easy to implement and extend its code.
  4. Create a blank HTML file. It may have following code: -

Steps

1. Create a blank HTML file. It may have following code: -

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

<title>Untitled Document</title>

</head>

<body>

</body>

</html>

2. Link the following JavaScript files within the code.

●      jquery.min.js

●      jquery.cycle.all.js

You can also download these files from the zip file link given below. We suggest you neither to change the code of JS file nor to remove the comments specifying the original author and license.

 

<title>Image Slider</title>

<!– include jQuery library –>

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

<!– include Cycle plugin –>

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

</head>

 

<body>

</body>

</html>

 

3. Now, we will create a main container (div) to include the slideshow and its page numbering. We are including slideshow div in main and a blank nav div in slideshow.

<body>

<div id=”main”>

<div id=”slideshow” style=”position: relative;”>

<div id=”nav”></div>

</div>

</div>

</body>

4. You can add the images in slideshow div through <img> tag. We are adding eight different images here.

<div id=”main”>

<div id=”slideshow” style=”position: relative;”>

<div id=”nav”></div>

<img src=”images/facebook.jpg” alt=”Facebook” />

<img src=”images/twitter.jpg” alt=”Twitter” />

<img src=”images/youtube.jpg”    alt=”YouTube” />

<img src=”images/myspace.jpg” alt=”MySpace” />

<img src=”images/googlebuzz.jpg” alt=”Google Buzz” />

<img src=”images/stumble.jpg” alt=”StumbleUpon” />

<img src=”images/digg.jpg” alt=”Digg” />

<img src=”images/identica.jpg” alt=”Identi.ca” />

</div>

</div>

We suggest you to add above code at the location where you want to add the slider. Please do not include HTML, head, and body tags (used here) if you are adding the code in a Content Management System or previously created Web page.

5. Let us come to the core command to cycle the images in the slider. You have to add the following script in the head tag.

<script type=”text/javascript”>

$(function() {

$(‘#slideshow’).cycle({

fx:     ‘fade’,

speed:  ‘fast’,

timeout: 3000,

pager:  ‘#nav’,

slideExpr: ‘img’

});

});

</script>

●      fx – is the name of the transition effect to be used. Its options mentioned below. You can visit Jquery Slider Browser Effects Page to view their effects. We have used fade in our sample.

○    blindX

○    blindY

○    blindZ

○    cover

○    curtainX

○    curtain

○    fade

○    fadeZoom

○    growX

○    growY

○    none

○    scrollUp

○    scrollDown

○    scrollLeft

○    scrollRight

○    scrollHorz

○    scrollVert

○    shuffle

○    slideX

○    slideY

○    toss

○    turnUp

○    turnDown

○    turnLeft

○    turnRight

○    uncover

○    wipe

○    zoom

●      speed – specifies the speed of the transition.

●      timeout – is the time period between slide transitions. This time period is in milliseconds.

●      pager – specifies the element or selector string to work as pager container. We have specified #nav in it, which uses the nav div and displays buttons 1, 2, 3, 4, 5, 6, 7, and 8. It will create the as many page numbers as many images you will specify in the div slideshow.

●      slideExpr – specifies the expression to select the slides. In our case, it is using the images (img tags) through its ‘img’ value.

6. Now, you have to specify the formatting of above tags through stylesheet code. We are using <style> tag here for this work. You can copy the following code:

<style type=”text/css”>

#main {margin: 50px;}

#slideshow {margin: 0px auto; width: 684px; height: 566px;  }

#nav { z-index: 50; position: absolute; margin-top: -5px; margin-bottom:5px; margin-left: 335px; }

#nav a { margin: 0 5px; padding: 3px 5px; border: 1px solid #ccc; background: #eee; text-decoration: none; color: blue; }

#nav a.activeSlide{ background: #eff; }

#nav a:focus { outline: none;}

img.slides { padding: 15px; border: 1px solid #ccc; background-color: #eee;

}

</style>

Here,

●      main – has the code to format div main.

●      slideshow – has the code to format div slideshow.

●      nav – specifies the code to display Page Numbers.

●      nav a – contains the code of clickable pagers.

●      nav a.activeSlide – has the code to modify the active page number.

●      img.slides – has the code to format the images uploaded through img tags.

You are free to change the code as per your requirement.

Complete Code

Now, the complete code will look like below. If not then you can copy the below code as well for your work.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

<title>Image Slider</title>

<style type=”text/css”>

#main {margin: 50px;}

#slideshow {margin: 0px auto; width: 684px; height: 566px;  }

#nav { z-index: 50; position: absolute; margin-top: -5px; margin-bottom:5px; margin-left: 335px; }

#nav a { margin: 0 5px; padding: 3px 5px; border: 1px solid #ccc; background: #eee; text-decoration: none; color: blue; }

#nav a.activeSlide{ background: #eff; }

#nav a:focus { outline: none;}

img.slides { padding: 15px; border: 1px solid #ccc; background-color: #eee;}

</style>

<!– include jQuery library –>

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

<!– include Cycle plugin –>

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

<script type=”text/javascript”>

$(function() {

$(‘#slideshow’).cycle({

fx:     ‘fade’,

speed:  ‘fast’,

timeout: 3000,

pager:  ‘#nav’,

slideExpr: ‘img’

});

});

</script>

</head>

 

<body>

<div id=”main”>

<div id=”slideshow” style=”position: relative;”>

<div id=”nav”></div>

<img src=”images/facebook.jpg” alt=”Facebook” />

<img src=”images/twitter.jpg” alt=”Twitter” />

<img src=”images/youtube.jpg”    alt=”YouTube” />

<img src=”images/myspace.jpg”    alt=”MySpace” />

<img src=”images/googlebuzz.jpg” alt=”Google Buzz” />

<img class=”slides” src=”images/stumble.jpg” alt=”StumbleUpon” />

<img src=”images/digg.jpg” alt=”Digg” />

<img src=”images/identica.jpg” alt=”Identi.ca” />

</div>

</div>

</body>

</html>

Output

The slider, created with above code, will be:Jquery Image SliderjQuery Image Slider

Note: It is an image.

Download

Click here to download the jquery_slider_pager.zip file. It has following contents: -

  1. jquery.min.js – has the code of jQuery Library in Google Ajax APIs.
  2. jquery.cycle.all.js – has the code of cycle Plugin to rotate the images.
  3. jquery_slider_pager.html: has the code to implement the jquery slider created above.
  4. images: folder of image files used in sample slider created above.

We hope that you will find this post and the implemented code helpful for your work. We request you to provide your valuable feedback and suggestions through comments.




Comments

  1. Ali January 6th

    Comment Arrow

    Good one especially has the extras .


About Author

admin

This author has not yet written a description. Please give them some time to get acquainted with the site and surely they will write their masterpiece.