Circular Image Slide with jQuery
A friend of mine asked me to write a little script for him the other day that would do the following :
1. Slide a list of images from right to left across the screen.
2. When an image moves out of view on the left, it should get appended to the end of the list thus creating the illusion of a never ending or circular procession of images across the screen.
3. Display a “loader” image while the photographs are downloading.
4. You can view a demo of the end result here.
My first impression was that there’s almost certainly a jQuery plugin capable of doing this. Well if there is, I haven’t found it yet. While there are a myriad of “Slide” plugins available, and some come quite close, none could fulfill these requirements.
So I had to go and write my own little script. I haven’t converted the code to plugin form just yet as I need to look a few things up.
If you’d like to just jump straight in, here’s a zipped version of the demo.
First, the HTML:
<div id="slider"> <div id="imageloader"> <img src="images/ajax-loader.gif" /></div> <img src="images/sample1.jpg" /> <img src="images/sample2.jpg" /> <img src="images/sample3.jpg" /> <img src="images/sample4.jpg" /> <img src="images/sample5.jpg" /></div>
Nothing out of the ordinary here, just a div with a bunch of image tags. The only thing to note is the div’s “id”. The real magic happens in the JS and CSS. The pre-loader image is located inside a nested div with an id of “imageloader”. By default, our loader will be visible while our photographs are hidden.
That brings us to the CSS:
#slider {position: relative; overflow: hidden; height:155px;} #slider img {position:absolute; margin:0; display:none;} #imageloader {position:relative; display:block; width: 100%; margin: 0px auto; text-align: center;} #imageloader img { position:relative; top:70px; z-index:100; width:128px; height:15px; display:inline;}
Firstly, due to the nature of the script we have to make use of relative and absolute positioning. With that in mind, we first set our container div to relative positioning. This allows us to assign an absolute position to each child image, this is critical to the functioning of this script.
Next we set the overflow style to “hidden” – this makes sure that we don’t get ugly scroll-bars when images are moving outside of the containing div’s bounds.
We also need to set a fixed height for the container div. Failing to do so will result in the images not being displayed at all (due to the absolute positioning and overflow setting).
For the nested images, we want to set their initial display attribute to “none”. This is so they don’t display until our DOM is ready and all the images are loaded. We also need to set their positions to absolute.
For the pre-loader we just set some styles to make sure it get’s displayed in the correct position : in this case 70px from the top and horizontally in the middle of the container div. We also make sure to set the display attribute to “inline”, thus making sure the pre-loader img is shown while all other img’s are hidden.
Now for the Javascript/jQuery:
var speed = 50;
var pic, numImgs, arrLeft, i, totalWidth, n, myInterval;
$(window).load(function(){
pic = $(“#slider”).children(“img”);
numImgs = pic.length;
arrLeft = new Array(numImgs);
for (i=0;i The “flexiScroll()” function simply moves each image to the left by 1 pixel, recalculates the totalWidth and if necessary, moves the left-most image to the end of the list. Since the end of the list is currently outside of the viewable area, this gives the illusion that the list never ends. And that’s all there is to it. There of course must be a more efficient way of doing this, so if you would like to contribute, please leave a comment or contact me.
Leave a comment Cancel reply
Archives
Recent Posts
Top Posts
- Yet another list of 'extremely useful' jQuery plugins
- Advanced radio button grouping with jQuery
- Mobile App Development - Snake Guide for South Africa
- Howto: Create custom thumbnails from Flutter image fields
- Simplifying Flutter duplicate groups and fields
- Circular Image Slide with jQuery
- 6 jQuery snippets you can use to manipulate select inputs
- How to validate Date of Birth with jQuery
- Still alive and kicking
- jQuery plugin : jqPageFlow - scrolling pagination made easy
It’s Beautiful!
Thanks David, hope you find a good use for it 🙂
How to do what did pictures move with left on a right? thank you!
Hello,
Can you please help me modify the flexiScroll() function to achieve scrolling in the opposite direction?
Hi @Sergey, @Rares
I’ll have a look at that for you as soon as I have a moment, it shouldn’t be too difficult (in theory).
In the meantime I’ve found another jQuery plugin which does the same thing as my little function above. I’m just not sure if you can also move in the opposite direction. You can find the plugin here : http://logicbox.net/blog/simplyscroll-jquery-plugin/ . Give it a go and let me know if you come right with it.
Your script is waaaay superior to the simplyscroll script referenced above. The only thing your script is missing is some extra functionality, however as a horizonal scroller it is excellent.
Thanks Joseph,
As soon as I get some more free time (probably next century) I’ll implement some of that missing functionality.
Nice script. exactly what I was looking for at the moment 😉
Awesome!! For some reason, I tried making the images a link (clickable), and everything comes up blank! Is it something in js that is not allowing that?
Thanks for your tut
Awesome work man 🙂
I was just looking for the same thing…the only thing I would ask and suggest that cant this slide be a little more smooth?
Hi Calisza
Perfect. Very usefull script. Thank’s.
// Steeven
By the way.
The script doesn’t work in Opera browser.
// Steeven
Sorry, it does. I was to quick there.
// Steeven
Actually, there is still some kind of problem. The first load, all pictures get stuck up on each other in a strange way, while the script itself seems to be working as it should.
The next time you reload the page, everything works fine. I guess it is something with a opera’s way of loading images and reporting if everything is loaded.
Hi Jason,
Thanks for the heads-up, haven’t tested in Opera so I’ll need to have a look at it shortly.
please provide the code if somebody has changed the flexiScroll() function to achieve scrolling in the opposite direction?
my id is iterveer@gmail.com
Big beer for U. That was exacly what I was looking for. Thanks for accurate how-to description 🙂
Hi.
Thanks for the work you’ve done…
I am wondering if it’s possible to have text appeared on the bottom of the picture, and the text scroll with the picture.
Thanks again and keep up the good work!
Great slider… its moving quite slow on the PC and I have tried to change the speed variable, but it seems to have no effect.
Thanks Asiano.
Admittedly, the algorithm used is not the most efficient around, so the more images you use the slower it’ll get. The smoothness and speed of the animation also depends quite a bit on the individual PC’s memory and CPU. Javascript isn’t the most animation friendly engine, since that’s not exactly what it was originally built for.
Hopefully advances in browser tech and support for HTML5/CSS3 will make animations like this both easier to achieve and produce a smoother end result.
That being said, I hope to get a chance in the next few days to review the code used in this snippet and make it a bit more efficient.
This function should do the oposite dorection trick. Hope it helps.
function flexiScrollRight(){
for (i=numImgs-1;i>-1;i–){
arrLeft[i] += 1;
if (arrLeft[i] >= width){
totalWidth = 0;
for (n=0;n<numImgs;n++){
totalWidth += $(pic[n]).width();
}
arrLeft[i] = arrLeft[i] – totalWidth;
}
$(pic[i]).css("left",arrLeft[i]);
}
}
Oh, I have forgotten something in my solution. You will need to declare the width variable (where the others are)
var width;
and assign the value in the window load function
width = $(‘#slider’).width();
I hope that now it is complete. 🙂
Ok, mate, sorry for flooding your blog, I hope this is going to be the last post. 🙂 The thing is that I have managed to add controls to your script and some minor enhacements. You can read about, criticise and download the final result here: http://petiar.sk/clanok/circular-image-slide-with-jquery
Take my contribution as a “thank you” for your script. It saved me lot of time and made one of my customers very happy. 😉
Hi, great stuff.
any way to link images with a href?
thanks!!
I’ve copied everything in an html-website and tested this out in several webbrowsers (Safari, Chrome and Firefox so far) and I’ve encountered some problems.
Chrome: displays all images correctly, but I have the impression that when I hover over a specific part that the animation accelerates a bit.
Safari: only shows me a part of the pictures even though I changed the height to for example 400px.
Firefox: doesn’t show me anything. I get a blanc page and when I look at my index.html page with Firebug addon in firefox it shows me that I dont have any content in my body part.
Really weird, anyone any ideas about this?
Kevin
Hi Kevin,
can you post a link to your implementation? This script works fine for me and my customer…
Thanks,
Petiar.
Hello – This is a nice simple script! Can you help me figure out how to add a right margin to each of the images?
How can I add a hyperlink to the scrolling images?
Perfect!
Searched for ages before I found this :D. Thank a million!
how to make those images linkable? “href” makes them invisible
Solution for those, who want to add a link into their images. In js oyu have to change path for variable pic:
now its
pic = $(“#slider”).children(“img”);
make it like this:
pic = $(“#slider img”);