Click here to Skip to main content
11,435,048 members (49,904 online)
Click here to Skip to main content

Image Sliding Effect with JavaScript

, 9 Apr 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
Quick way to insert an image sliding effect on your web site

Introduction

This tip is meant to give others a shortcut on how to get quick image sliding effect on the webpage without much trouble and no JQuery.

Background

I came across this site while looking for a way to animate a group of images. And from all my options, I found it to be the simplest one. After researching html 5 a very simple option, although not the effect was also quite simple, was possible with the help of canvas and javascript.

1. Using menu cool

Download their folder and place the file in your project. Then add:

<link href="js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="js-image-slider.js" type="text/javascript"></script>

Inside your page, add/type the following div block:

<div id="sliderFrame">
<div id="slider">
    <a href="http://www.menucool.com/javascript-image-slider"
    target="_blank">
        <img src="images/image-slider-1.jpg"
        alt="Welcome to Menucool.com" />
    </a>
    <img src="yourImage"
    alt="This will show on yourImage caption" />
    <img src="yourOtherImage"
    alt="This will show on yourOtherImage caption" />
    <img src="yourOtherOTherImage" alt="#htmlcaption" />
</div>
<div id="htmlcaption" style="display: none;">
    <p>"This will show on yourOtherOTherImage caption"</p>
</div>
</div> 

2. Using HTML 5

On your html page have a canvas, if with assign an Id, even better

<canvas id="theCanvas">

At the place you have your javascript for the page

//the array with the path to the images
var pathToYourImages = ["pathToimage.imageExt", "pathToimage2.imageExt", "pathToimage3.imageExt", ....];

//a variable to hold the canvas element
var canvas = null;

//a variable to hold the canvas context
var contextForCanvas = null;
    
//a variable for the image element to be draw
var image = null;

//a variable to control which image to be displayed.
var currentImage = 0;

//when the wondow.onload happen, assing the value to the variables and then call ImageSliding.
window.onload = function() {
    canvas = document.getElementById('theCanvas');
    contextForCanvas = canvas.getContext('2d');
    image = document.createElement("img");

    ImageSliding();
};

//Performs the change on the image path and controls which will be showed
function ImageSliding() {

    //sets the image's path
    image.setAttribute('src', pathToYourImages[currentImage]);

    //control which image is being used
    currentImage = currentImage === (pathToYourImages.length - 1) ? 0 : ++currentImage;

    //sets the transparency value
    contextForCanvas.globalAlpha = 0.1;
            
    //calls the timeout function
    setTimeout(ShowImage, 200);
}

//clears the canvas and show the new image
function ShowImage() {

    contextForCanvas.save();

    contextForCanvas.clearRect(0, 0, canvas.width, canvas.height);
    contextForCanvas.drawImage(image, 0, 0, 300, 150);
    contextForCanvas.globalAlpha += 0.1;

    contextForCanvas.globalAlpha > 0.9 ? setTimeout(ImageSliding, 3500) : setTimeout(ShowImage, 200);
}

Conclusion

Basically, these are two ways to get the effect. It's advisable to always research in more than one place and evaluate what would be the best solution for your problem. I hope this helps.

Reference

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Paulo Augusto Künzel
Software Developer
Brazil Brazil
I work as a software developer for a multinational company and at the moment the focus lies on developing reports. Also, I am studying the equivalent to an Associate degree in System's Development and Analysis because after finishing my H.N.C. Business I was bitten by the programming bug. After that my passion for computer science has only increased.

Comments and Discussions

 
QuestionEffect Pin
Member 1116361018-Oct-14 13:34
memberMember 1116361018-Oct-14 13:34 
QuestionSlideshow Pin
Member 105135976-Apr-14 11:23
memberMember 105135976-Apr-14 11:23 
AnswerRe: Slideshow Pin
Paulo Augusto Künzel9-Apr-14 2:43
professionalPaulo Augusto Künzel9-Apr-14 2:43 
Hello Member 10513597

Sorry it has taken so long to reply. I have checked the code and it works fine for me.

What browser and version are you using? I looked at it using IE 10 and Chrome 33.

Anyway, I've added an example file to the Tip/Trick. I hope it helps.
Also, I've changed the Id it should look for on the code to:
document.getElementById('theCanvas');
But that would not allow to show anything and you said it was showing the first.
Anyway, I thought it was to mention it.

Regards
There are no secrets to success. It is the result of preparation, hard work, and learning from failure. Colin Powell


AnswerRe: Slideshow [modified] Pin
Christian Amado9-Apr-14 3:04
professionalChristian Amado9-Apr-14 3:04 
GeneralRe: Slideshow Pin
Paulo Augusto Künzel9-Apr-14 3:10
professionalPaulo Augusto Künzel9-Apr-14 3:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150428.2 | Last Updated 9 Apr 2014
Article Copyright 2013 by Paulo Augusto Künzel
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid