Click here to Skip to main content
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 PinmemberMember 1116361018-Oct-14 13:34 
QuestionSlideshow PinmemberMember 105135976-Apr-14 11:23 
AnswerRe: Slideshow PinprofessionalPaulo Augusto Künzel9-Apr-14 2:43 
AnswerRe: Slideshow [modified] PinprofessionalChristian Amado9-Apr-14 3:04 
GeneralRe: Slideshow PinprofessionalPaulo Augusto Künzel9-Apr-14 3:10 
That settles it.
 
Probably our colleague (Member 10513597) is having an issue with something else.
Member 10513597, please check if you are using a browser that supports html5 and let me know if you still get the problem. If so, I'll check more browser and version to make a warning or something.
 
regards
There are no secrets to success. It is the result of preparation, hard work, and learning from failure. Colin Powell
 

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
Web01 | 2.8.141223.1 | Last Updated 9 Apr 2014
Article Copyright 2013 by Paulo Augusto Künzel
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid