Image slider for displaying pictures or portfolios
I love image slideshows and portfolios with an extra bit of interaction and effects. The problem I found when I wanted to make one of my own was that I always ran out of ideas how to display portfolio items / pictures in a special way. But then it hit me, and the idea for this image slider was born.
Download
Image Slider zip-archive
Example
See the image slider in action
Example of the image slider is located at: http://www.gayadesign.com/scripts/slider/
The slider and all its files can be downloaded here: http://www.gayadesign.com/scripts/slider/gdslider.zip
First I want to explain what this image slider does:
This image slider creates a slideshow of images and makes it look like the images have been cropped to only thin strokes. Once the user clicks on an image it will expand across the slideshow and show the picture in its full galore. Click of the left or the right side of the container to navigate to other pictures, the images will keep appearing as if there is an infinite loop of images. It also preloads the images that will be shown on the page.
The pictures in the example are all pictures from http://www.sxc.hu/ a nice site with free stock photos.
Please note that this script does not work in IE6.
Implementing this script is fairly easy. The zip-archive contains everything you need except from Scriptaculous and Prototype. So let’s download that first.
Next, unzip the archive somewhere and upload the contents of the /src/ and /lib/ folders to you web server.
Great! Now that you have Scriptaculous uploaded, download the image slider and unzip it. Upload the contents to your web server (I used the js folder to put the Scriptaculous files in to keep things separated).
Now it’s time to make things work. Add the following code to your <head> tag. Adjust the following code to your preferences:
<!-- include scriptaculous + prototype --> <script src="js/scriptaculous/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous/scriptaculous.js" type="text/javascript"></script> <script src="js/extraTransitions.js" type="text/javascript"></script> <script src="js/slider.js" type="text/javascript"></script>
You can find the html code to put on your page in the example.html file which is the following:
<div id="items"> <div id="loading"> <div id="pictureLoadContainer"></div> </div> <div id="caption" style="display: none"> <div class="background"> </div> <div id="captionContent" style="display: none"></div> </div> <div id="overflow"> <!-- put images with alt attributes here --> </div> <div id="SlideLeft" class="nav left"> <img src="images/arrow_left.png" alt="Click to move left" /> </div> <div id="SlideRight" class="nav right"> <img src="images/arrow_right.png" alt="Click to move right" /> </div> </div>
The images you want to load inside the slider have to be 1000 x 620 by default. I’ll explain how adjust this later in the tutorial.
Put the images you want to load in the <div> called “overlay”, just like a normal image on your webpage.
<img src="uritoimage" alt="caption to go with the image" /> <img src="uritoimage" alt="caption to go with the image" /> <img src="uritoimage" alt="caption to go with the image" /> ...
You are basically done with adjusting the script if you like the default looks.
To adjust the height and width of several elements take a look in the style.css file.
- Define the height and width of the item container in: #container #items.
- Define the size of the navigation buttons in: #container #items .nav.
- Define the size of the items in: #container .item.
- If you adjust the height also adjust it here: #container #items #overflow.
If you adjust the widths of elements you also have to change the slider.js file in the js folder. The code is at the top of the script:
/* edit these options according to your CSS */ itemWidth: 250, //width of an item totalWidth: 1000, //total width of the container navWidth: 112, //width of the nav including padding /* end edit options */
Adjust the number to the amount of pixels you had it changed into. Easy not?
The script will load automatically and will only start once all the images have been loaded.
Have fun!
Articles like this one
18 Comments
-
I’ll definitely be using this soon. keep up the good work my man.
-
@louis
Thanks. I hope this tut may in some people.
-
Great stuff Gaya, I always expect quality from this website :)
I would love to see some jQuery implementations of some of your javascripts snippets if you ever get the chance. Keep up the great work!
-
Hey Drew,
First of all: thanks for the comment! Second: jQuery is one of my goals! I’ve been looking at other blogs and commenting / giving feedback / asking questions about jQuery. I think I’ve finally got the chance to try it out now. Stay tuned and maybe I’ll be converting some of my things to jQuery.
-
Sounds great Gaya, really looking forward to see you work some jQuery magic ;)
-
Dude! This is a kick-ass idea. I was always looking for something like this. I will let you know when I use it.
-
@Farrhad
Sure thing! Thanks for the nice comment. Hope to see your implementation =)
-
Amazing script! Where you set up the kind of effect transition?
-
Thanks Mr. Oliveras,
Adding a transition to an effect in scriptaculous isn’t really hard. where you define the duration you can add:
transition: Effect.Transitions.NameOfTheEffect
-
Cool, thanks again!
-
Hello Gaya,
I read that you have switch to jquery and that it took only fifteen minutes to rewrite a script.
Will you propose a conversion of that fabulous script soon ?Thanks
-
is it possible, to this effect as a jquery plugin ?
I don’t want to mix jquery, script …, prototype … on one page.
Greetings,
Frankie
-
Hi all,
It’s been a while since I looked at the jQuery version of this script. It didn’t really work out. If I find the time I’ll post an article about the jQ version for sure.
-
I cant get it to work.
Effect is not defined
extraTransitions.js()extraTra…itions.js (line 15)
[Break on this error] Effect.Transitions.Elastic = function(pos) {\r\nextraTra…itions.js (line 15)
Effect is not defined
anonymous()slider.js (line 72)
anonymous()slider.js (line 57)
[Break on this error] new Effect.Fade(loading, {duration: 0…ng.parentNode.removeChild(loading)}});\r\n
-
This comment is a bit outdated but Im doing the other way arround (started with jquery) and now doing some magento stuff (need to learn learning prototype) and bump into your script. This is just sweet! Tank you Gaya.
Hope you or someone here can help me out :
Instead of reading the ALT atribute, Can the captations come from another element inside the that holds the image?
If yes, can they parse one tag inside the captation?
How can I achieve this
-
(sorry last post lost the html)
This comment is a bit outdated but Im doing the other way arround (started with jquery) and now doing some magento stuff (need to learn learning prototype) and bump into your script. This is just sweet! Tank you Gaya.Hope you or someone here can help me out :
Instead of reading the ALT atribute, Can the captations come from another element inside the li that holds the image?
If yes, can they parse one a tag inside the captation?
How can I achieve this
-
I have download and completed all the things as guided but still can’t see it working did all tihngs and even images paths are also absolutely perfect. I can just see only loader.gif image loading. Am i doing something or still something has to be done to get it working?
-
Great stuff. I barely noticed this website, but it is bookmarked. You seem to take a smart/simple approach to what you do. Always the way to go… Thanks!
Recent comments