Instructions on how to make a simple slideshow with jQuery

Instructions on how to make a simple slideshow with jQuery

This post is to guide you how to make a simple slideshow with jQuery. In fact there are many ways to do sileshow images from simple to complex ... however HHV still writing mainly because this is the easiest way to do that HHV sildeshow learned and apply it in Metro Magazine Blogger Templates .Part of it is easy to read code that a person did not know anything about JS can also understand it;are consistent with the criteria "amateur web design for beginners" :)

Live Demo

1. The HTML Code

For simplicity, the photograph with card insert 3 and surround it with a

card

. For ease of formatting and decoration attaching a id=”slideshow” . Finally we have the HTML code

<div id="slideshow"> <img src="img/img1.jpg" alt="" class="active" /> <img src="img/img2.jpg" alt="" /> <img src="img/img3.jpg" alt="" /> </div>

A special point to note is that if you want any photos to appear first, then assigned to the class=”active”

2. CSS Code

 

#slideshow { position:relative; height:350px; } #slideshow IMG { position:absolute; top:0; left:0; z-index:8; } #slideshow IMG.active { z-index:10; } #slideshow IMG.last-active { z-index:9; }

The point to note in this code is the height Slideshow customized depending on the location of code and images ... When deep consideration we see the code on other provisions of the photo coordinates in space 3 Attribute dimension ... z-index order placement provisions photos. There are 3 class, the highest class - active (10), the next layer active (9) and all remaining photos (8).

3. Code JS

Now we begin to write a script to start your slide motion.

function slideSwitch() { var $active = $('#slideshow IMG.active'); var $next = $active.next(); $next.addClass('active'); $active.removeClass('active'); } $(function() { setInterval( "slideSwitch()", 5000 ); });

The above code has the following meanings: First, declare a variable, class photo that has activethen assign the variable $active and head, it is the turn photos next $next . Start running SlideSwitch function. Files $next class mounted active to bring it up on end and shots are$active shall be removed down to the active class. Finally the interval 5000ms (5 seconds) between each switch. Very simple!
In order for us to create more beautiful blur effect fade.

function slideSwitch() { var $active = $('#slideshow IMG.active'); var $next = $active.next(); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 5000 ); });

There appears to add a class last-active , this class has been declared in the css code with only one attribute is z-index: 9 .

The code above is interpreted as follows: class files have active (being at the top) will be assigned to class last-active (1 level down). Files in just below it, the class is assigned active (a step) and add effects animate the opacity increases from 0 to 1. Finally remove class last-activepicture taken on the same initially to the bottom.

This process is repeated with cycles 5s.

Conclusion

As mentioned there are many ways to do the most with jQuery Image Slideshow more complex and much more beautiful. But the problem is that the slideshow will be heavy and difficult to edit a lot more customizable. HHV's view remains is how to use the simplest way to achieve the highest efficiency. To achieve this is the only way to understand what you're doing.

Hopefully with this tutorial you can learn and customize according to your slideshow. VD as resizing slideshow, display time of each image, the blur, add link for each image, and even combine it with Recent Posts Widget.