Browsing articles in "JavaScript"

Mar
26

Create Simple SlideShow Using Jquery and CSS Tricks

By udamadu // JavaScript, Web design, Web Design, Web Development // No Comments

What We are going to do ?

before we are going further , let’s take a look the demo example of our task.

In Present Web World, Image slide-shows, Image galleries are much useful part added by web developers and designers for archiving good looking features to their websites. Today we are going to build simple Image slide-show Using old but gold web technology CSS, Ugly HTML and amazing Jquery Library.

Step by Step explanation of what we are going to do

Create slider outer block.

HTML

<div id=”slider”></div>

CSS

div#slider{

width:500px;

height:300px;

margin: auto;

}

applying above css to our block, it will be covert with 500px width and 300px height.

2.Create slider mask.

Suppose our Slider show consists of 5 images with 500px width and 300px height. Then our slider mask should be 5 times of width when comparing with outer block. Our slider mask then should be put inside the outer block.

HTML

<div id=’slider’> <!-- outer slider  -->

<div id=’slider-mask’> </div> <!-- slider mask div -- >

</div>

Now what happened is, our outer block will be take image slider mask width ( 500 x 5 ==2500px). But we have to keep original width for the outer block.

Here comes into play CSS to achieve our purpose.

If we can hide this overflow width we can succeed. Yes we can do that. Lets modify our CSS for the outer block.

CSS

div#slider{

Width:500px;

Height:300px;

<strong>Overflow :hidden;</strong>

}

Using overflow property and related hidden value, We have done this. overflow :hidden will hide both overflowed width and height from its original width and height.

Now our slider mask block will stay with its original height and width inside outer block.but we only can see its one five from its original width.

CSS

div#slider-mask{

width: 500%; /* set width as five time of outer block */

height: 100%; /*set same size of the outer block */

}

3. Create slider Item blocks.

Now we can create 5 blocks for our 5 images inside the slider mask. As mentioned earlier our images will be the same dimensions of the outer slider. Then we can create same slider item block with the same dimensions of a image.

Lets do that.

HTML

Since Originally div element are block level elements and they assort them top to bottom themselves. But what we need to do here is float them as left to right. Lets continue our works.

CSS

div.slider-item{

width: 20%; /*set same outer block width.since our slider item block is inside the mask we need to get one five times from slider mask width */

height: 100% /*same slider mask width. This is the same width of outer block */

position:relative ;

<strong>float:left; /*this will float our slider images left to right. */</strong>

}

Lets look at slider item CSS again. You can see that we have added relative value to position css property. This property will be helpful to animate our slide-show in latter Jquery part.

4.adding images to each slider item.

Now we can put our 5 images inside slider items.

HTML

<div id="slider"> <!-- outer slider -->

<div id="slider-mask">

<div class="slider-item">

<img src="./images/slider-image1.png" alt="" />

</div>

<div class="slider-item">

<img src="./images/slider-image2.png"  alt="" />

</div>

<div class="slider-item">

<img src="./images/slider-image3.png" alt=""/>

</div>

<div class="slider-item">

<img src="./images/slider-image4.png" alt="" />

</div>

<div class="slider-item">

<img src="./images/slider-image5.png" alt=""/>

</div>

</div> <!--slider mask div -- >

</div>

5.Asking Jquery help

Before animating our slider we need to load jquery library and put them inside our header tags.

<head>
 <script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

Here’s the code to link to Google’s jQuery repository. It grabs the latest jQuery version.

We are now creating JavaScript function for animating our slider.>

<script type="text/javascript">// <![CDATA[

var n=0;

function slideShow(){

id=n%5+1;

leftPos=(1-parseInt(id))*500+"px";

$("div.slider-item").animate({ left:leftPos},1500);

n=n+1;

s=setTimeout("slideShow()",3000);

}

// ]]></script>

Explaining above funciton line by line.

var n =0; We set 0 as the initial value to the JavaScript variable called n.

id=n%5+1; Get the reminder value by solving n divided by 5 and assign reminder value to the js variable called id. Here 5 is no of images of our slide-show. Initially this will be 1 since n=0 .

leftPos=(1-id)*500+”px”; This equation initially will set to the (1-1)*500 = 0 and adding string “px” to the computed value. Final value is assigned to js variable called leftPos. Here 400 is the image width/outer block width of our slider.Initially leftPos value will be 0px.

$(“div.slider-item”).animate({ left:leftPos},1500); This is how we are animating our slider. We wrap slider elements with class slider –element and push all of them to 500px left side direction from their original position within one and half seconds. we are doing it by changing left css property of slider item. We couldn’t apply left property unless we set their position as relative, absolute or fixed. But we have done it in our one of previous steps. Got it…
Initially left property is set to 0px. Therefore slider items will be pushed to left from their initial positions.

n=n+1; Incrementing the n variable from 1.

s=setTimeout(“slideShow()”,3000);    This will be the nicest part in our function. SetTimeOut function is the predefined js function and it can be used to called another js function once for the specified time period as a continuous loop unless we advice it to stop looping.Here we called our same function in every 3 second. For the second time our function called by the setTimeout function variable n will set as 1.If n==1Then id will be assign as 2 and leftPos will be -400px and slider item will position -500 px to left from their original position. Now 1^st slider item disappear and 2^nd slider item will be comes to the stage.
if n==2    Then id will be assign as 3 and leftPos will be -1000px and slider item will position -1000 px to left from their original position. Now 1^st ,2^nd slider items will disappear and 3^rd slider item will be comes to the stage.
If n==3   Then id will be assign as 4 and leftPos will be -1500px and slider item will position -1500 px to left from their original position. Now 1^st ,2^ndand 3^rd slider items will disappear and 4^th slider item will be comes to the stage.
If n==4     Then id will be assign as 5 and leftPos will be -2000px and slider item will position -2000px to left from their original position. Now 1^st ,2^ndand 3^rd and 4^th slider items will disappear and 5^th slider item will be comes to the stage.

if n==5Then id will be assign as 1 and leftPos will be 0px and slider items will position 0px again and get their original position again. This will again show the 1^stslider in the stage and others are hidden by the outer slider.You can see that this will be continuously happened since id value only change 1-5 with respect to the n.

5.Final Step.

We have almost done everything. Only one step away. Yet our slider show will not run as we expected . Our function will not automatically run as our code executed inside web browser. For automatically execute our slider function we need to call our function inside the jquery document.ready function.

 
<script type='text/javascript'>
<pre><strong>$(document).ready(function() { slideShow });</strong></pre>
var n=0;

function slideShow(){

id=n%5+1;

leftPos=(1-parseInt(id))*500+"px";

$("div.slider-item").animate({ left:leftPos},1500);

n=n+1;

s=setTimeout("slideShow()",3000);

}

</script>
okay...now you are done....  
download source code from here

Aug
8

Simplest Javascript Photo Gallery

By udamadu // JavaScript, Web design // No Comments

In this tutorial, I’m going to explain the way you can create a simple photo gallery which automatically change using java script.

What you have to do is,

Create a HTML file and introduce one of the images selected with the “photo-gal” id (set the src, width and height attributes corresponding to your own images)

Now I’m going create a JavaScript function that will automatically change the images at one second interval.
Put this code in the head section of your HTML document

&lt;script type="text/javascript"&gt;
var n=0;
var s;
function photoGallery(){

if (n%5==0){
document.getElementById('photo-gal').src = " images/photo1.jpg ";
}
if (n%5==1){
document.getElementById('photo-gal').src = " images/photo2.jpg ";
}
if (n%5==2){
document.getElementById('photo-gal').src = " images/photo3.jpg ";
}
if (n%5==3){
document.getElementById('photo-gal').src = " images/photo4.jpg ";
}
if (n%5==4){
document.getElementById('photo-gal').src = " images/photo5.jpg ";
}
n=n+1;
s=setTimeout("photoGallery()",1000);
}
&lt;/script&gt;

We can use here the n (initially having 0 values) variable which is incremented every one second. We use the getElementById method (which returns the object with the “photo-gal” id ) of the document object (that represents the entire HTML page).
Depending of the division remainder ( JavaScript modulus operator: c%5) it is chosen the picture to be displayed.

*In the last line of the script it is used the setTimeout() method for calling the photoGallery() function each 1000 miliseconds (that means 1 second).