In this article, we will learn to display an image at the center of the browser window (enclosed in an invisible window). On clicking the image, it will scroll to the left (inside the enclosed window) and disappears. When the image totally disappears, it will again appear from the right side of the window and stops from where it started
HTML code for “Scrolling Image in jQuery”
We need to write the HTML code to display an image. We also need to enclose the image element within a div element as shown below:
<body>
<div>
<img src=”image1.jpg” width=150px height=150px class=”image”/>
</div>
</body>
In the HTML code, we can see that the img element is enclosed within a div element which is assigned the id: ‘scroller’. The reason of making use of the div element is to assign the width and height to the invisible window for the image (within which we want it to scroll).
Style Sheet code for “Scrolling Image in jQuery”
We write the id selector ‘#scroller’ in the style sheet so that the style properties defined in it can be automatically applied to the div element of id:’scroller’ without using jQuery code. The style sheet will also contain the class selector ‘.image’ to assign ‘relative’ property to ‘position’ property to the img element that is very necessary to make the image scroll.
The style sheet: style.css may appear as shown below:
style.css
#scroller{
width:155px;
height:155px;
margin:auto;
overflow:hidden;
position:relative;
}
.image{
position:relative;
}
We can see that the id selector ‘#scroller’ contains the width and height property set to value ’155px’ to define the width and height of the invisible window for the image. The margin property is set to value ‘auto’ so that window takes the margin space from the browser window automatically making the window appear at the center of the width of the browser window. The value of the overflow property is set to hidden to make the area of the image that has scrolled out of the boundary of the window to become invisible. The position property is assigned the value ‘relative’ to make the image scroll relative to the enclosed window
The class selector ‘.image’ contains the position property set to value ‘relative’ to make the image scroll from its current position
jQuery code for “Scrolling Image in jQuery”
The jQuery code to make the image scroll is as shown below:
$(document).ready(function() {
$(‘.image’).click(function (event){
$(this).animate(
{‘left’: -160}, ‘slow’,
function(){
$(this).css(‘left’,150);
$(this).animate({‘left’: 0}, ‘slow’);
}
);
});
});
We can see in above jQuery code that a click event is attached to the image. In the event handling function of the click event, animate method is used that makes the image to scroll to the left slowly (in the boundary of the window in which the image is enclosed) and stops at the distance of -160px from the left side of the window i.e. making the image completely disappear. In the callback function of the animate method (which is invoked when the animate method is over – i.e. when the image is completely invisible), we use .css() method to make the image appear at the distance of 150px from the left side of the invisible window making a small portion of the left edge of the image to appear. In the same callback function, we again make use of the animate method to make the image scroll to the left and stop at the distance of 0px (from the left side of the invisible window) i.e. the image will stop from where it started
Initially, the image will initially appear as shown in Figure 1
Figure 1. Image on loading the web page
On clicking the image, it will scroll to the left and will become invisible slowly as shown in Figure 2.
Figure 2. Image scrolling to the left
When the image completely disappears, it appears again from the right side of the window and scrolls towards left as shown in Figure 3.
Figure 3. Image appearing from the right border of the invisible window
More Articles :
Selecting Multiple options in Select element using jQuery
Serializing form data using jQuery
For more information, refer my book : “jQuery Recipes A Problem-Solution Approach” available at : http://www.amazon.com/jQuery-Recipes-Problem-Solution-Approach-Development/dp/1430227095/ref=sr_1_1?ie=UTF8&s=books&qid=1287320549&sr=8-1
