Jquery Image DeScroller [ Very Basic Image Scrolling Jquery Code ]

There are many Image Scroller on web, But their code is difficult to read/ Understand. Infact I am not a developer, I know very basic of  jQuery. So I decided to code myself a very Basic Code. I have taken the help from [http://api.jquery.com/category/effects/].
*Note [The Code below written from scratch so there may be some small mistakes. Suggestions are most welcome]
The Procedure I followed / Problems I faced
1) First I tried Code for a “Animate Function”.
2) Then I put the Images in animating div.
3) Styled the thumbnail images.
4) Problem occurred at the limit of scrolling to right and left.
5) Then I searched for a code that counts the particular Element in an HTML Element.
6) Then I calculated the total width of space images had taken with margin, padding and border.
7) I had the width of Main Div and The Width of Space images had taken : that I used for Limiting the Scroller Div at right position.
8) And for left position I taken the Limit as 0 [Zero] / From the left position of Main Div.
9) However I tried for stopping the animation, Scroller Div passes its limit when I clicked the Button no. of times quickly.
10) When I searched for this issue, I came to know that the process are in Queue then run one after another.Second process wait Until the first process gets completed.

Here is the Complete Code
[I have not deleted the comments/ scratch code even ]

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>

  <style>
.block {
   position: relative;
	margin:0 auto;
   width:2000px;
   height:175px;
   float: left;

}
.img_size
{
	height:175px;
	width:175px;
	float:left;
	margin:10px;
	border:5px solid grey;
}

.scroll_wrapper
{
margin:0 auto;
width:100%;
height:200px;
padding:10px 0 10px 0;
background:black;
overflow:hidden;
display:block;
}

</style>

</head>
<body>

<p><button id="lt">>></button></p>
<p><button id="rt"><<</button></p>
<div class="scroll_wrapper">
	<div class="block">

		<img alt="Demo image" class="img_size" src="images/1.jpg">
		<img alt="Demo image" class="img_size" src="images/2.jpg">
		<img alt="Demo image" class="img_size" src="images/3.jpg">
		<img alt="Demo image" class="img_size" src="images/4.jpg">
		<img alt="Demo image" class="img_size" src="images/5.jpg">
		<img alt="Demo image" class="img_size" src="images/6.jpg">
		<img alt="Demo image" class="img_size" src="images/7.jpg">
		<img alt="Demo image" class="img_size" src="images/8.jpg">

	</div>
</div>

<script>
$( "#rt" ).click(function(){

	/* Taking the position of block */
	var p = $(".block:first");
	var position = p.position();

	/* Taking the left most position of wrapper to stop the slide at left */
	var r = $(".scroll_wrapper");
	var r_position = r.position();
	/* alert( "left: " + r_position.left);*/

	/* Now compare the wrapper position with block position*/
	if( position.left < r_position.left ){
  $( ".block:first" ).animate({

    "left": "+=200px"  /* the value that desides how much amount of scroll */
  }, {
    duration: 1000,
    step: function( now, fx ){
      $( ".block:gt(0)" ).css( "left", now );
    }
  });
  }else{
	  $(".block:first").stop(true);
	  /*alert( "left: " + r_position.left);*/
  }
});

$( "#lt" ).click(function(){

	/* Counting the total no. of images and
	width for total width of all images*/
	var _img = $(".block:first").children("img");
	var imageno = _img.length;
	/*alert("No. of Images : "+ imageno);*/
	var img_width = _img.outerWidth(true);
	var total_img_width = (imageno * img_width);
	/*alert ("total width :" +total_img_width);*/

	/* Taking the position of block */
	var p = $(".block:first");
	var position = p.position();
	var p_width = $(".block:first").width();
	/*alert( "width: " +p_width);*/

	/* Taking the right most position of wrapper to stop the slide at right */
	var r = $(".scroll_wrapper");
	var r_position = r.position();
	var r_width = $(".scroll_wrapper").width(); /* Width of div */
	/*alert( "width: " +r_width);*/

	/*alert( "diff: " +(p_width-r_width));*/ /*finding diff between main div and scrolling div */

	/* Now I have width of total no. of images,
		Substract width of wrapper from this width
		so I will get the diff, which I am going
		to use for scrolling the scroller div in left direction
		till last image reach to right most position of
		main div.
	*/

		var diff= r_width - total_img_width ;

	/* Now compare the wrapper position with block position*/
	if(position.left >=  diff){
  $( ".block:first" ).animate({
    "left": "-=200px"
  }, {
    duration: 1000,
    step: function( now, fx ){
      $( ".block:gt(0)" ).css( "left", now );
    }
  });
  }
  else{
	$(".block:first").stop(true);
  }
});
</script>

</body>
</html>
Advertisements

About Nikhil
Name : Nikhil Ughade UI Developer, Accidentally in design field, no turn back since then. Location : Pune (MH, INDIA) From : Amravati (MH,INDIA) College : VYWS's College Of Engg. Badnera, Amravati Hobby : Social Networking, Designing Web Sites, Photography, Reading Books. In Free time works for NGO.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: