In this tutorial, we’re going to be building an image scroller, making use of jQuery’s excellent animation features and generally having some fun with code. Image scrollers are of course nothing new; versions of them come out all the time. Many of them however are user-initiated; meaning that in order for the currently displayed content to change, the visitor must click a button or perform some other action. This scroller will be different in that it will be completely autonomous and will begin scrolling once the page loads.
The finished widget will be completely cross-browser and perform as expected in the latest versions of all of the most common browsers. We’ll also build in some interaction by adding controls that allow the visitor to change the direction of the animation. We’ll be working with just jQuery and a little HTML and CSS in this tutorial and should be able to run the examples without a full web server setup. The following screenshot shows the completed widget that we’re aiming for:
Getting Started
Let’s create the underlying HTML page first of all; in a new page in your text editor add the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="imageScroller.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>imageScroller Image Carousel
</head>
<body>
<div id="outerContainer">
<div id="imageScroller">
<div id="viewer" class="js-disabled">
<a class="wrapper" href="http://www.apple.com" title="Apple">
<a class="wrapper" href="http://mozilla-europe.org/en/firefox" title="Firefox">
<a class="wrapper" href="http://jquery.com" title="jQuery">
<a class="wrapper" href="http://twitter.com" title="Twitter">
<a class="wrapper" href="http://jqueryui.com" title="jQuery UI">
</div>
</div>
</div>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js">
<script type="text/javascript">
$(function() {
});
</script>
</body>
</html>
Save this as imageScroller.html inside a new folder. We link to a custom stylesheet in the head of the page, which we’ll code in a little while, and we include a link to the hosted version of the latest release of jQuery at the bottom of the page. Loading scripts at the end of the body is a recognized technique for improving the performance of your page and should therefore be practiced wherever possible.
Our widget consists of a series of nested containers and a bunch of images wrapped in links. The images placed within the containers are hardcoded into the page for accessibility reasons. We won’t be retrieving the images dynamically; any images placed in the widget will automatically be scrolled (provided they are wrapped in a link with the appropriate class name).
The outer-most container will be used primarily for positional and display purposes, while the next container is used to decorate the widget with a background image. The outer container is also necessary for appending the controls to so that they appear above the content correctly in IE.
The inner-most container is the element that will be used to view the images through. This element is given the class js-disabled which will be used purely for visitors that have JavaScript disabled. We’ll use this class to shrink each of the images with CSS so that they are all viewable.
The images are all a uniform size, and the containers will be sized to accommodate them quite neatly. The image size is also used in the script that we’ll add; I’ll highlight specifically where these references occur but you should be aware that if you’d like to use images of a different size, the script and the size of the containers will need to be adjusted accordingly.
Styling the Widget
After the link to jQuery, we have a custom script element with the jQuery document.ready shortcut, waiting for us to add the code that will bring the widget to life. Before we do that however, let’s just add the CSS quickly. In another new file in your text editor, add the following selectors and style rules:
/* js-disabled class - set image sizes so they all fit in the viewer */
.js-disabled img { width:100px; height:100px; display:block; float:left; margin:30px 0 0; }
#outerContainer { width:542px; height:202px; margin:auto; position:relative; }
#imageScroller { width:542px; height:202px; position:relative; background:#000000 url(images/imageScrollerBG.png) no-repeat; }
#viewer { width:522px; height:182px; overflow:hidden; margin:auto; position:relative; top:10px; }
#imageScroller a:active, #imageScroller a:visited { color:#000000; }
#imageScroller a img { border:0; }
#controls { width:534px; height:47px; background:url(images/controlsBG.png) no-repeat; position:absolute; top:4px; left:4px; z-index:10; }
#controls a { width:37px; height:35px; position:absolute; top:3px; }
#controls a:active, #controls a:visited { color:#0d0d0d; }
#title { color:#ffffff; font-family:arial; font-size:100%; font-weight:bold; width:100%; text-align:center; margin-top:10px; }
#rtl { background:url(images/rtl.png) no-repeat; left:100px; }
#rtl:hover { background:url(images/rtl_over.png) no-repeat; left:99px; }
#ltr { background:url(images/ltr.png) no-repeat; right:100px; }
#ltr:hover { background:url(images/ltr_over.png) no-repeat; }
Save this as imageScroller.css in the same folder as the web page. First we have the class selector that targets our js-disabled class; with these rules we simply size the images so that they are small enough to stack up next to each other along the width of the widget. If JavaScript is disabled, and while the page is loading, all of the images will be viewable – a very quick and easy fallback, but one that isn’t necessarily fool-proof and certainly isn’t complete Progressive Enhancement. The values specified for the width and height will need to vary depending on the number of images in the viewer.
Following this we have the selectors and rules that style the widget and make it function correctly. Most of the code here is purely for display purposes, background-images, colors, etc. An important rule, which the implementation relies upon to function correctly, is the setting of overflow:hidden on the inner viewer container. This will hide the images that have yet to be shown and the images that have already passed though the viewer. At this stage when we run the page, we should see something like this:
Some of the CSS we’ll set in the JavaScript in just a moment, and some of the elements that we’re targeting in the CSS don’t exist yet, but this is everything that needs to go into the CSS file.
Bringing the Widget to Life
In the final stage of this tutorial we’ll add the jQuery-flavored JavaScript that will make the widget work and create the behavior that we desire. Within the empty anonymous function at the bottom of the HTML page add the following code:
//remove js-disabled class
$("#viewer").removeClass("js-disabled");
//create new container for images
$("").attr("id", "container").css({
position:"absolute"
}).width($(".wrapper").length * 170).height(170).appendTo("div#viewer");
//add images to container
$(".wrapper").each(function() {
$(this).appendTo("div#container");
});
//work out duration of anim based on number of images (1 second for each image)
var duration = $(".wrapper").length * 1000;
//store speed for later
var speed = (parseInt($("div#container").width()) + parseInt($("div#viewer").width())) / duration;
//set direction
var direction = "rtl";
//set initial position and class based on direction
(direction == "rtl") ? $("div#container").css("left", $("div#viewer").width()).addClass("rtl") : $("div#container").css("left", 0 - $("div#container").width()).addClass("ltr") ;
First of all we remove the js-disabled class from the viewer container. Next we create a new container to hold all of the images that are found within the widget. The main reason for this is so that instead of animating each image individually, resulting in a potentially large number of animations running simultaneously, we only have to animate one element – the container that we’re creating now.
The width of the new container is set to the number of images multiplied by the width of each image, which in this example is 170 pixels. This is one of the bits of code that I said earlier I would specifically mention, and is something that will need to be changed if we decide to use images of a different size. The height of the container is also specifically set to the height of each image.
It is useful later on in the script to know certain things about the nature of the animation, such as its speed, the duration it will last and the direction of travel, so we next set a series of variables to store this information in. The duration will equate to exactly one second per image, and is based again on the number of images found in the widget.
The speed is easy to work out, being of course the distance of travel divided by the duration of travel. For reference, in this example the exact speed of the animation will be 0.274 pixels-per-millisecond. The final variable, direction, is a simple string denoting that the animation will proceed from right-to-left, although we could easily change this to ltr if we wished.
Finally, we set the starting position of the new container; as the animation is currently set to rtl, we need to position the new image container so that its left edge is set to the right edge of the viewer. If we set the animation to ltr however, the element’s right edge will be aligned with the container’s left edge. We determine the direction using the JavaScript ternary conditional. As well as its position, we also give the new container a class name matching its direction, which we can test for at different points in the script.
Next we’ll need to define a new function to initiate and perpetuate the animation. There are several different times during the normal execution of the script that we’ll need to begin animating, so wrapping this functionality in a function that we can call when we need helps to reduce the amount of code. Add the following code:
//animator function
var animator = function(el, time, dir) {
//which direction to scroll
if(dir == "rtl") {
//add direction class
el.removeClass("ltr").addClass("rtl");
//animate the el
el.animate({ left:"-" + el.width() + "px" }, time, "linear", function() {
//reset container position
$(this).css({ left:$("div#imageScroller").width(), right:"" });
//restart animation
animator($(this), duration, "rtl");
//hide controls if visible
($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;
});
} else {
//add direction class
el.removeClass("rtl").addClass("ltr");
//animate the el
el.animate({ left:$("div#viewer").width() + "px" }, time, "linear", function() {
//reset container position
$(this).css({ left:0 - $("div#container").width() });
//restart animation
animator($(this), duration, "ltr");
//hide controls if visible
($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;
});
}
}
The animator function accepts three arguments; the element to animate, the length of time that the animation should run for, and the direction in which the element should be animated. The function is broken up into two distinct blocks, one for rtl animation and the other for ltr. Within each block of the conditional we update the class name of the image container to reflect the current direction just in case the direction has changed (this is one of the visitor initiated interactions).
We then define the animation, moving the image container plus for ltr or minus for rtl the width of the image container, giving it the impression of sliding across the viewer. Unfortunately we can’t use the built in slow, normal, or fast animations, because even the slow setting limits the animation to a total run time of only 600 milliseconds, which is way too fast for even the small number of images we are using in this example.
We specify the string linear as the third argument of the animate method which is the easing function to use and sets the animation to proceed at a uniform speed from start to finish; if we didn’t set this, the animation would noticeably speed up and slow down at the beginning and end of the animation respectively.
Finally we add an anonymous callback function which will be executed as soon as the animation ends; within this callback function, we return the image container to its starting position, recursively call the animator function again passing in the correct settings depending on which branch of the conditional is being executed, and hide the control panel if it is visible. We haven’t added the code that will create the control panel yet, but we still need to add this code here for when we have.
In order to start the animation when the page has loads we now need to call the function that we’ve just defined; add the following function call:
//start anim
animator($("div#container"), duration, direction);
All we do is call the function passing in the element to animate and the variables we set in the first section of code. If we run the page now, we should find that the animation starts as soon as the page has loaded and continues indefinitely, as shown (kind of) in the following screenshot:
Adding Some Interaction
We’re now at the stage where we have the core functionality of the widget and can start adding the extra interactivity that will make it engaging. After the call to the animator function add the following code:
//pause on mouseover
$("a.wrapper").live("mouseover", function() {
//stop anim
$("div#container").stop(true);
//show controls
($("div#controls").length == 0) ? $("").attr("id", "controls").appendTo("div#outerContainer").css({ opacity:0.7 }).slideDown("slow") : null ;
($("a#rtl").length == 0) ? $("").attr({ id:"rtl", href:"#", title:"rtl" }).appendTo("#controls") : null ;
($("a#ltr").length == 0) ? $("").attr({ id:"ltr", href:"#", title:"ltr" }).appendTo("#controls") : null ;
//variable to hold trigger element
var title = $(this).attr("title");
//add p if doesn't exist, update it if it does
($("p#title").length == 0) ? $("").attr("id", "title").text(title).appendTo("div#controls") : $("p#title").text(title) ;
});
As the comment indicates, this event handler will stop the animation when the visitor hovers the pointer on one of the images within the widget. We use the live jQuery (new to 1.3!) method to attach the handler to the elements and specify an anonymous function to be executed when the event occurs.
Within this function we first stop the animation using the jQuery stop method, passing in a true Boolean value as an argument. This argument will cancel the animation queue if it exists; it shouldn’t do, as there should only ever be one animation at any one time, but it’s useful to use this argument just in case.
We check whether the control panel already exists and provided it doesn’t we create a new div element, give it an id so that it picks up our style rules and appends it to the outer container. We then use jQuery’s css method to set the opacity in a cross-browser fashion to avoid having to target different browsers with our CSS, and slide the controls down into place.
We also create some links and append them to the control panel; these links will act as buttons which allow the visitor to change the direction that the images are moving. We’ll add handlers for these buttons in just a moment. Finally, we obtain the contents of the title attribute of the wrapper link that triggered the mouseover event and create a new paragraph element with its inner text set to the title. We rely heavily on the JavaScript ternary conditional shortcut in this section of code as it provides an excellent mechanism for only creating and appending elements if they don’t already exist.
You may also have noticed that we set a variable to hold the contents of the current trigger’s title attribute, you may be wondering why we don’t use the following code instead:
//add p if doesn't exist, update it if it does
($("p#title").length == 0) ? $("").attr("id", "title").text($(this).attr("title")).appendTo("div#controls") : $("p#title").text(title) ;
The reason for this is so that there is no ambiguity as to what $(this) refers to. Using the above code does work, but it throws errors, which while non-fatal, still aren’t that reassuring for potential users of the widget. Using the variable simply ensures these errors are avoided. The control panel, when visible, appears as in the following screenshot:
Following the mouseover the animation will be stopped; we can start it again easily using a mouseout event handler, which we should add next:
//restart on mouseout
$("a.wrapper").live("mouseout", function(e) {
//hide controls if not hovering on them
(e.relatedTarget == null) ? null : (e.relatedTarget.id != "controls") ? $("div#controls").slideUp("slow").remove() : null ;
//work out total travel distance
var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());
//work out distance left to travel
var distanceLeft = ($("div#container").hasClass("ltr")) ? totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width())) : totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left")))) ;
//new duration is distance left / speed)
var newDuration = distanceLeft / speed;
//restart anim
animator($("div#container"), newDuration, $("div#container").attr("class"));
});
Again we use jQuery’s live method, but this time, we also pass the raw event object into our anonymous callback function. We make use of this object straight away to see whether the pointer has moved onto the control panel. If it hasn’t, we hide the controls, but if it has, we do nothing and proceed with restarting the animation. Notice how we use a nested ternary that is equivalent to an if else conditional.
The main purpose of the anonymous function is to restart the animation, but before we can do that we need to work out the duration of the animation; we can’t hardcode the value because the image container will have moved. The initial duration was set to 1 second for each image, in this example 5 seconds. If there is only one image left visible in the viewer and we set the animation to 5 seconds again, the animation will proceed markedly slower.
We first work out what the total distance is that the image container travels in a full animation. We then work out how much of the full distance is still to be traveled. We’ll need to do a different calculation depending on whether the animation is happening from left to right or the opposite, so we again make use of the ternary conditional.
If the animation is occurring from left to right, the distance left to travel is the left style attribute of the image container (obtained using the css jQuery method) added to the width of the image container, subtracted from the total distance. If the image container is moving from right to left however, the distance left to travel is the width of the image container minus the left style attribute, subtracted from the total distance. The width and css jQuery methods return string values, so we use JavaScript’s parseInt function to convert these to numerical values.
The new duration of the animation is then calculated by dividing the distance left to travel by the speed that we worked out right at the start of the code. Once we have this figure, we can then call the animator function again passing in the required parameters, making the animation start up again from where it stopped, in the same direction of travel.
Changing Direction
For the final part of our script we can add the handlers for the links in the control panel used to change the direction of the animation. Directly after the code we just added, enter the following code:
//handler for ltr button
$("#ltr").live("click", function() {
//stop anim
$("div#container").stop(true);
//swap class names
$("div#container").removeClass("rtl").addClass("ltr");
//work out total travel distance
var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());
//work out remaining distance
var distanceLeft = totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width()));
//new duration is distance left / speed)
var newDuration = distanceLeft / speed;
//restart anim
animator($("div#container"), newDuration, "ltr");
});
This function, triggered when the left to right button is clicked, is relatively simple and contains code very similar to what we have already used; we first stop the current animation (it will have resumed when the visitor moves the pointer over the control panel), and then swap the class name so that it matches the new direction of travel. We then work out the new duration of the animation in the same way that we did earlier, before finally calling our animator function once again. This is just the handler for the ltr button; the handler for the rtl button is almost identical, but uses the correct calculation for the opposite direction of travel:
//handler for rtl button
$("#rtl").live("click", function() {
//stop anim
$("div#container").stop(true);
//swap class names
$("div#container").removeClass("ltr").addClass("rtl");
//work out total travel distance
var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());
//work out remaining distance
var distanceLeft = totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left"))));
//new duration is distance left / speed)
var newDuration = distanceLeft / speed;
//restart anim
animator($("div#container"), newDuration, "rtl");
});
This is now all of the code we need to write, if you run the page in a browser at this point, you should find that the widget works as intended.
Summary
In this tutorial we’ve created a fun and interactive widget for displaying a series of images and could be used to display logos of the manufacturers of products that you sell, or the logos of software that you recommend, or anything else that you like. We focused mainly on the animation and interaction aspects of the widget, but also considered things such as providing a basic fallback in case JavaScript is disabled in the browser.
- Follow us on Twitter, or subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
Write for us!
We pay $150 for user submitted tutorials and articles that we publish. Anyone can send in a contribution
User Plus
Community Link Feed
- Create Christmas Designs With These 50 Sets Of Pho
Give your Christmas designs this holiday season a personal touch by creating your own designs. Here are 50 sets of quality Photoshop brushes for your projects. - Web Design Harmony: Concept, Conveyance And Theme
Concept is what you want to communicate. Conveyance is how you will communicate it. Theme is how well you coordinate it. This post will help you with some higher level thoughts and ideas behind designing a website. - 18 Impressive Web Form Validation Scripts To Enhan
Forms are such a common element on the Internet we tend to blunder through them without too much thought. However, if the web site has added a few nice touches that make the process easier, it tends to speed up the process and reduce any frustration - 200+ Javascript / JQuery Tutorials For Designing A
In this list I have included some great tutorials on jQuery and Javascript. Jquery & Javascripts are used for making the websites for attractive and usable. - Six Strategies: The Civil Strategy For Your Own We
Stepping into the self employed fraction or what most would address as the entrepreneur zone is not an easy feat. - 10 Javascript & CSS TreeView And Sitemap Plugins A
Javascript Tree view and sitemap are good tools to display the structure of your website. I have collected 10 plugins and tutorials that will save your time hunting for one. - 69 Awesome Abstract Photoshop Brushes
Yet another set of killer brush sets to play along with, created by great brush artists. - Site-Specific Browsers: Turn Sites To Desktop Apps
As web designers/developers, desktop applications are harder to create as they have a totally different environment. We can make use of site-specific browsers which enable us to lock a website inside an application-looking browser. - Over 38 Free Flash Photo Gallery Ready To Use For
Flash galleries are getting more and more popular these days. If you’re going to give a professional look to your image gallery, this post is your chance to check out over 38 professional ones. - Free For All: Winter Holidays Edition
Whatever winter event you're designing for, you'll want these free fonts, clip art, stock photos, and WordPress and Blogger templates.
User Comments
( ADD YOURS )Peewee1002 April 22nd
I suppose this could come into some use. Though it seems alittle annoying to use TBH.
( )Neil April 22nd
I agree, nice, but whats the point?
( )David Perel April 23rd
I don’t believe its annoying. It can be useful for portfolio sites or blog news sites. You would just have to slow down the scroll speed slightly and its all good.
( )Jarod April 22nd
Good tutorial for learning techniques, but I certainly wouldn’t want to put this on any website. Users would have seizures.
( )Dan Wellman April 22nd
lol, well hopefully the animation techniques will be useful…
( )Chukki April 22nd
Hmmn…the example isn’t so wonderful. But as a basic to learn the animation technique would it be wonderful!
( )Philo April 22nd
Nice article Dan!
( )Although I think the speed could be a bit less
Dan Wellman April 22nd
thanks, will try and rein it in a bit next time
( )Ryan April 23rd
I agree nice Tut but the speed is a little much for me… We’ve all seen this before on websites but much much slower! Thanks Dan good read…
( )mike April 22nd
Thanks for the article
( )Dan Wellman April 22nd
np, thanks for reading
( )antonio April 22nd
Nice tutorial, I like this website
( )Patternhead April 22nd
Nice tut
( )Guido April 22nd
Nice tutorial.
( )An example where this is used:
http://www.bannerconnect.net
barry April 22nd
I’m hungry.
( )Shuuun April 22nd
Its bugged… if you are clicking on an arrow and wait till the loop begin a second time, the scroller starts to lag :O
( )Dan Wellman April 22nd
very true, I missed that while testing >< that same thing was happening at a different point, which is why I added the e.relatedTarget checks in the mouseout handler. I’d say this would just need to be modified slightly to fix this…
( )Shuuun April 22nd
mb check if the mouse is in the container already, and only onmousemove start showing the control pannel .
Steve April 22nd
Hmm not so sure about this one!
( )Lamin Barrow April 22nd
The one thing i love about this tut i is there are no plugins involved.. just write it your self code. Thanks for you time and effort Dan.
( )Dan Wellman April 22nd
no worries, glad you enioyed
( )Jem April 22nd
Very cool… But its bringing back horrible memories of the marquee tag!!!
( )Dan Wellman April 22nd
lol, just wait for my next article – ‘replicating the fun of the blink tag’
( )Meshach April 22nd
Great tut. The results are pretty cool.
( )crypta April 22nd
great tut!
( )Dan Wellman April 22nd
thanks for reading
( )Chandan April 22nd
great tutorial,
i am looking to implement this in my next project.
( )abhijit April 22nd
Nice tutorial. Well, may be it will be better to stop the animation after one “round”……
( )cagatay April 22nd
thanks
( )http://www.unitechtasarim.com
Chris April 22nd
awesome!
( )Diego SA April 22nd
I liked it. I’d only change somethings, but it’s nice!
( )Benjamin Reid April 22nd
Nice demo, I’d remove the auto-scroll though.
( )Shane April 22nd
Performance on my relatively powerful machine isn’t fantastic, and it’s rather jerky, and a little too fast at the same time.
Sometimes, readers could lift a piece of code and use it directly on their own – a bit of copy and paste, and they’re done. This article demands a little more thought, for although the end result isn’t the most appealing, the techniques are the most important thing.
Despite this, it’s worth bearing in mind that as powerful and relatively simple jQuery is, we don’t want to overuse certain effects to the detriment of usability.
BTW, a similar effect with text (although deprecated) can be achieved with the marquee tag.
The previous sentence was my attempt at a little sarcasm, before you all reply with a dissing
( )Thomas April 22nd
Do you also happen to know how to make scroll continuously? Meaning that you don’t have space between the offscreen and the scrolling items shown?
( )Dan Wellman April 22nd
Hi, I mentioned this briefly in the article about how personally, I felt it better to have a single animation running, but you could easily remove the gap between the images by individually animating each image, then as soon as an image leaves the frame, you could remove it, then add it directly after the last image, start the animaion again, etc…
( )Mathew May 16th
Can you please Dan specify which tags we should remove to make the animation run continue sly without any gap after last image like this website
http://www.bannerconnect.net
Thank you
lawrence77 April 22nd
wow!
its amazing, the layouts and images too!
Thanks for this articles Dan!
and also…
I put my mouse pointer in the arrow, in the first round its ok, but from second round!
See the result!
Cheers for the articiles and also waiting for the next one ‘replicating the fun of the blink tag’
( )Tim April 22nd
its broken in Safari 4.0 Beta..
( )Dan Wellman April 22nd
but it’s fine in the latest stable release
( )Morten April 22nd
Where do you get the stable release?
Dan Wellman April 23rd
lol, apologies, by stable release I meant current, stable, non-beta release – i.e. 3.2.
Browser testing in betas would be nice…
sacarias April 22nd
This plugin is ver sexy. i have recently been looking for something similar. and this isnt exactly what i wanted, its so awesome looking that i may have to use this in my app
( )Matt Misner April 22nd
This is getting pretty crazy i was googling how to do this and then you post it on the site
( )Ferdy April 23rd
Definitely a fun little widget, although a bit shaky, not very smooth.
In terms of usability, I would advise against using this in all cases. In fact, studies suggest that almost all animations hurt usability, users hate them, they are distracting and associated with advertisements. The only place where one could use animations and sophisticated effects are high media sites, for example for a movie or video game. Users expect it there.
Despite all this, a fun and educational jQuery article it is.
( )Dan Wellman April 23rd
Hi,
Thanks for reading. Fun, and how to successfully restart animations at the correct (previous) speed were definately the angle on this tutorial. I totally agree with your comment about the perceived advertisment status of animated elements such as this; one of the things that inspired me to write this tutorial was the fact that on all of the ecommerce sites I build, there is something similar which animates company logos across the screen using flash, I wanted to do the same with just JS.
But I think animations can have a place on regular sites too, not necessarily in the format shown in this example, but for many other things too, such as displaying error messages on forms using an animation, opening content boxes, etc.
( )Martyn Web April 23rd
I dont know if its just me but the arrows don’t seem to do anything in the demo. Im using Firefox Latest.
( )Ryan April 23rd
I’m using FF and it seems to be working for me…
( )Dan Wellman April 23rd
yup, I tested in the latest FF and the arrows should switch the direction – they do for me
Daniel April 23rd
Thank you for this!
It is very similar to what a customer has asked for, but vertical.
I skimmed the article and saw that it looks like it is set up only for ltr or rtl.
How difficult is it to go vertical?
Looking at it, I think I would just have to come up with the CSS and make a new variable btt or something similar, correct?
One other question..
( )The 2 rights are a mistake correct?
#ltr { background:url(images/ltr.png) no-repeat; rightright:100px; }
Dan Wellman April 23rd
yeah that’s a mistake, my apologies, although it should be correct in the stylesheet in the code download…
Using vertically should in theory be easy, although would require as well as changes to the animation (up or down instead of left or right) a new background image. but the animations should be very simple to convert…
thanks for reading
( )Kuwat November 5th
How to making vertical scrolling..? please give about sourcecode, thank’s bro….
Ricardo April 24th
Ok, by now you must be tired that everybody tells you that it goes too fast… So I wont say it. But, what’s interesting to me it’s that it could be used to implement a featured news section (we set a div as the wrapper, we set the links inside and float the image inside it to one side). I would call it a carousel though (not a marquee, never a marquee).
In any case, thanks for the tutorial, it’s always useful that somebody takes the chance not only to write about something they know but also takes time to answer the comments.
( )Dan Wellman April 24th
yes, it could be used to scroll anything, text, images, etc
glad you found the tutorial informative, I’m only too happy to respond to comments from readers
( )Johan April 24th
Far too jerky on a PC.
( )Dan Wellman April 24th
I think we could potentially reduce the jerkiness with a slowdown in the animation, however, some of the jerkiness is going to be down to choice of browser and possibly even conditions on the visitor’s machine?
( )Andrew April 24th
Actually, it was very informative and I think that this would come into its own if the default motion was ‘0′. The images would then move move depending on where the mouse was located in the Window. In the center it stops, at the left the images go right, and so on . . . Thanks, and tagged for future reference.
( )Dan Wellman April 25th
np
I’ve seen widgets such as you describe that move depending on mouse pointer position, very engaging…
( )mark July 29th
Dan,
how i can remove the space at the start of the scroll
Taylor Satula April 25th
Kinda cool little fast and some of the images don’t work
( )Dan Wellman April 26th
which images?
( )Hat April 28th
That was great, Thank you
( )CgBaran Tuts April 28th
Great tutorial thanks
( )Gav May 6th
Looks great. What would i need to change though to make the images wrap around so there’s no gap? I’ve had a look but can’t work it out.
( )thanks!
Solomon GEbbie May 13th
Love the plugin,
How do i make it so that the images continously scroll so that there isnt a big gap between the start and the end,
Ive customized it a bit so that the width of the contiainer has a width of 100%; so it spans across the whole page.
I have about 30 pictures that i would like to display, Is there a way of making it so that the pictures dont come in from the right of the screen and rather just start all across the page and then start scrolling ?
also for some reason when i change the width to 100% and load the page, all the images display first as tiny thumbnails then they flash off then start sliding in ? how do i stop this ?
( )mark July 29th
Hey solomon,
how u can remove the space at the starting of the scroll…
( )Juan Manuel May 28th
Muy bueno, ahora es mas rápido que flash ??
( )Julianto May 28th
how to make it re-loop?
( )Pikatzu June 24th
Cracking tutorial! Ive been scouring the net for this and this is most definitely the best continuous image carousel ive seen.
( )Dont mind the negative comments, it just shows peoples lack of creativity. They probably assume that it has to be the same speed and aesthetics.
Vimal Saifudin July 6th
Hi,,, very nice one.. was really helpful to integrate it in one of my silverlight applications and its work perfectly as i require. Its included along with animations created in silverlight..and nice to see that it looks same like the one created in silverlight.. One thing i would like to know to get a continuous animation what should be done.. after reading your article i tried removing js-disabled class from the script and it removed all the gaps between the images… but i would like to have animation in such a way after the last image it should suddenly start from the first image next to the final image so that the user should never see an ending to the carousel.. also while start it should have the screen length images filled on viewer div..
( )I would like to get a method which can be helpful.. I really appreciate you for your hard work and knowledgr in jquery
Jason July 9th
I love the fact that when you scroll over the image the effect stops. Usability simple!
( )reloadro July 17th
Hello. Really nice image scroller but i have a problem with the control navigation url # . How can i prevent it from reseting the page location to top when i click to change scroll direction ?
( )Super-Munkyboy August 20th
Go into the script and remove the a tag #. Thats what I did.
( )mark July 29th
how to remove the space when the scrolling starts.
( )The scroller is from right to left , its creates a huge space when it starts moving from right to left for first image.
Cali August 4th
Thank you for this tutorial…. very clear and completely detailed to follow.
( )nmarketers August 13th
We liked it very much. We were looking for integrating the same in our website
( )chad August 15th
awesome. thanks
( )Frank August 24th
Hi,
nice, but whats trick to get it runn endless without reloading the page?
Is there any solution??
Thx, Frank
( )pk's August 25th
nice tutorial , can you make one more tutorial to slide images on button click.
( )Thanks
Comments September 21st
We liked it very much. We were looking for integrating the same in our website
( )bcj19 September 27th
Any chance you have a demo that allows for paging rather than scrolling? I’d to see how to make this work with 3-4 images per page, with the arrows moving to the next page of 3-4 images.
By the way… Thanks for this tutorial. I appreciate the thorough, easy to follow instructions.
~ b
( )Jay October 1st
Hello, I have used your script. I put around 40 pictures (every picture of size 20kB). It often happens that FF and Chrome crashes (ex. the browser takes around 800Mb of memory and hangs). When I have 15 images everything works fine. Have you tried adding a lot of images to this scroller?
( )Jay October 1st
One more thing. When I run the test page from the local machine – everything works fine. The problem occurs after I upload the page to the web server.
( )Jay October 1st
Sorry it was problem with the other tool -> not the jQuery Scroller.
( )Rob October 3rd
I notice a lot of people are requesting to remove the space at the end of the loop. I’m also very interested in how to do this. Any help and/or examples would be great.
I’m using it here:
( )http://www.ampprod.com/advertise
GlobalAMP October 3rd
I noticed a lot of comments requesting information on how to remove the space at the end of the loop. I would also like to remove that space.
We are using this here: http://www.ampprod.com/advertise
Ps- Thanks for this.
( )GlobalAMP October 3rd
I noticed a lot of comments requesting information on how to remove the space at the end of the loop. I would also like to remove that space.
Ps- Thanks for this
( )Joe October 11th
V. Nice!!
( )David October 13th
Great tutorial! But when I open it on firefox – images are not showing at all. It works great on Safari. Does anyone have a similar problem with firefox?
Please help.
( )tuna November 10th
very nice..
( )abant November 10th
thanks, will try and rein it in a bit next time
( )Sudhakar November 13th
plz help me i want to show latest products and latest memory using this jquery script. When i click on latest memory products then under this category products scroll and when i click on latest memory then this category products scroll. I’m using Ajax but when these products comes then jquery scripts not work otherwise this script is working.
Second i want to change direction of scroll always enable at the left and right of the div in which this scrolling.
( )Don Thottakath November 13th
Great Work…
( )One more thing. Can we pull these images dynamically?