jQuery Dynamic Slideshow
We had a requirement to create a slideshow of a large number of images. The total size of all the images was over 5 MB and most jQuery plugin’s I searched for used and <img> and <ul> to create the slideshow which wouldn’t work in this case as it would increase the size of the page humongously.
So I wrote this jQuery plugin which fetches the images from <a> anchor tags and loads the images one after another, allowing the possibility of showing unlimited number of images since only 2 images are loaded in the DOM any any given time.
Download jquery.dynamicslideshow.js here.
Dynamic Slideshow Example here
dynamicSlideshow demo:
Usage:
$(function(){
$("#slider").dynamicSlideshow(<optional args>);
});
<div id="slider" style="position: relative; width: 200px; height: 200px;overflow: hidden;">
<a href="image1.jpg" alt="http://example.com?1">Image 1</a><br />
<a href="image2.jpg" alt="http://example.com?2">Image 2</a><br />
<a href="imageN.jpg" alt="http://example.com?3">Image N</a><br />
</div>
how to set the custom width and height for the images
Hey,
Thanks for sharing. Looks simple and elegant.
Nice trick with the anchor images.
Just what I was looking for – dont need all the fancy transition effects and such.
Thanks.
The plugin could be tweaked a bit to accommodate that. One other option is to fix width and height of the container div and set overflow to hidden. This wouldn’t render well though if the size variations are huge.
Its very cool!
very nice! THANX
I did a test in Dreamweaver and it works beautiful after previewing in Firefox, but the image does not display in Dreamweaver for layout purposes, just a grey outline. I guess this is normal?
Ya, the whole idea was not to put an image upfront to allow dynamic load. As dreamweaver won’t execute js while laying it out, it wont show the images but just the container and the links. The links could have some description though if it helps laying things out. The container is emptied anyways after the image url’s are extracted.
Hi, very nice script, THX.
But I have a question, because in IE6 the pics are not always displayed. If I visit my site with your script embedded, first time, than its no problem. The Script works perfect. But if I look to a other website in my site and then came back to the site with the script inside, the pics are not displayed. Then I have to refresh this site again and then it runs again.
Thanks for answering.
It could be because it does not initialize the next time. Could you share the URL and I can look it up?
thanks for this.
looks nice.
I was also searching for similar thing for videos. I have to put some 20+ videos on my site. Could you suggest something?
Thanks
I tried the plugin..
There is no result on my screen..
This is what i wrote:
$(document).ready(function(){
$(“#slideshow”).dynamicSlideshow();
});
what am i missing?
here is the html code without “”
html
head
script type=”text/javascript” src=”imageshow.js”
/script
script type=”text/javascript”
$(document).ready(function(){
$(“#slideshow”).dynamicSlideshow();
});
/script
/head
body
div id=”slideshow”
a href = “066.jpg” /a
a href = “063.jpg” /a
/div
/body
/html
I am not sure. Could you try –
div id=”slideshow”
a href = “066.jpg” /a
a href = “063.jpg” /a
a href = “066.jpg” /a
a href = “063.jpg” /a
/div
Possibly the boundary conditions are not checked since I used this for really large number of images.
i did try with 4 images.. still doesn’t work. nothing comes on screen….
I really want to use this plugin.. please help.
I do have more than 70 pics actually. But i need to make sure the plug in works. So i was using only few..
hey it worked!
thanks a lot! its a lovely plugin!!
i had made some typing error apparently. Sorry for the trouble. Thanks a lot again.
but if you’re considering it for a large no of images, is there any way in which we can specify just the album and the plugin will fetch the images in that album?
Or each time i make new addition to my album i need to include an “a href” statement to my source code?
Just populate the img[] array via ajax instead of DOM and you should be all set.
This is a great plugin. Do you accept donations? I’d like to pay you for this.
How can I add a link to each image so depending on whats showing a user can click the image and it will take them to a page.
Hey, thanks for the appreciation. Well, $$ is always welcome. I will put a donation box.
Not the best way but you could apply a patch –
//The way it works -
<a href="http://example.com/image.jpg" rel="nofollow">http://example.com/image-page.html</a>
var img = [];
var content = [];
...
img.push($(this).attr("href");
content.push($(this).text());
....
$(this).bind('click',function(){
someFunction(content[0]);
});
...
function initSlider(container, img) {
...
$(this).bind('click', function(){
someFunction(content[curr]);
});
//And in the someFunction
function someFunction(url) {
// do your thing with the url like
window.open(url);
}
Thanks,
I just grabbed your source code. Much easier that way. Nice script. Wish it was random images, but thanks again.
i am having a problem. the slideshow is comming in the top left corner and cannot place where i want. can you please guide me. your code has
css({position:’absolute’,top:0,left:0,’z-index’:8})
so is there any way i can place it anywhere i want except absolute position.
Regards,
Zain Alam
Yes, have a wrapper div with position: relative . That will keep the slideshow within bounds.
@Sirko
I’m having the same problem. It even happens with the demo on this page. When I first come here, or hit refresh, the slideshow works fine. If I click a link on your site, then use my back button, the slideshow doesn’t start (and no image appears). I’m using IE8 to view your site, but when testing my scripts, it does the same thing in IE8, IE8 in IE7 comp. mode, and in IE6. It works great in other browsers.
@Zach
I figured out the fix for IE:
Change:
$(j).attr(’src’, img[0]).css({position:’absolute’,top:0,left:0,’z-index’:0}).load(function(){
$(container).append(this);
initSlider(container, img);
});
To:
$(j).attr(’src’, img[0]).css({position:’absolute’,top:0,left:0,’z-index’:0}).load(function(){
initSlider(container, img);
});
$(container).append(j);
Basically I moved the append function out of the load event, because for some reason, when you view an already cached page, IE doesn’t call the load event for an image that isn’t in the DOM (or isn’t visible I think). This is how I understand it anyway from testing this.
I couldn’t simulate this at my end but the solution looks good. Thanks.
One thought I had is if the load event is not called, how is initSlider() called? Anyways, whatever works!
@Yusuf
initSlider() wasn’t being called when you returned to the page (via the back button or local navigation) in IE. To test this, I put “alert(‘test’);” at the beginning (tried end too) of the load event’s function. The alert came up (along with the slideshow) on a refresh or if I hadn’t yet been to that page, but upon returning via Back or local navigation, the alert didn’t appear (and neither did the slideshow).
My guess is this: when you hit the back button, or click local navigation back to a page IE has already loaded, IE doesn’t have to load the image, and the image isn’t in the DOM, so IE ignores the load event, since it didn’t actually do any loading of the image on that run. On a whim, I’d call that a bug, whether it be in jQuery’s element load event, or in IE.
I don’t know why you don’t see it, but it might also be an OS thing. I’m on XP at work.
@Yusuf
Steps to see the problem on your site for me:
1. Open this page in IE8. The slideshow appears.
2. Click Projects at the top.
3. Click the Back button in my browser’s toolbar. The slideshow shows as a white blank space.
First of all, great job on minimizing the load times on my site!
Second, this is probably a noobish question, but is there anyway to make these pictures become a hyperlink? Considering they technically are anchors, i doubt it, but maybe there’s a trick!
Thanks again!
Somewhere up in my comments I have described how this could be done. The trick is to have the URL as the innerHTML of the anchor tag and bind a click event to the image when it loads.
What is the image link ?
image link code where insert ?
This plugin does not use the![]()
tag. It uses tag. Try copy-pasting the example above as it is and then play around.
@Yusuf
// <![CDATA[
$(function(){
$("#slider").dynamicSlideshow({duration: 6000});});
// ]]>
@Yusuf
my pictures tag.
//
//
Hi,
Any idea what’s wrong with this code, as suggested above:
I’m getting Error: img[curr] is undefined?
jQuery.fn.dynamicSlideshow = function(attr) {
function extLink(event) {
window.open(event.data.ext_url);
}
attr = attr || {};
attr.duration = attr.duration || 6000;
function initSlider(container, img) {
var curr = 1;
setInterval( function(){
if (curr == img.length) {
curr = 0;
}
var i = new Image();
$(i).load(function(){
$(container).append(this);
$(container).find(‘img:first’).css({‘z-index’: 1});
$(this).css({opacity: 0.0, ‘z-index’: 195}).animate({opacity: 1.0}, 1000, function() {
$(container).find(‘img:first’).remove();
})
}).attr(’src’, img[curr++][0]).css({position:’absolute’,top:0,left:0,’z-index’:200}).bind(‘click’, {ext_url:img[curr][1]}, extLink );
}, attr.duration );
};
$(this).each(function(){
var img = [];
var extlink = [];
$(this).find(“a”).each(function(){
img.push([$(this).attr("href"),$(this).text()]);
});
var j = new Image();
var container = this;
$(this).empty();
$(j).attr(’src’, img[0][0]).css({position:’absolute’,top:0,left:0,’z-index’:200}).bind(‘click’, {ext_url: img[0][1]}, extLink ).load(function(){
$(container).append(this);
initSlider(container, img);
});
});
}
i guess the problem is at – ttr(’src’, img[curr++][0]).css({position:’absolute’,top:0,left:0,’z-index’:200}).bind(’click’, {ext_url:img[curr][1]}, extLink ); where curr pointer is incremented and used again in the call to bind.
ne’ways, i have received many of these requests and will upload a upgrade sometime this week.
Hi,
Thanks Yusuf, couldn’t see the wood from the trees, I’ve got it sorted now. Many thanks!
what about the update? waiting for it
Hmmm, I got bit busy
. Have uploaded the same. Check the example.
great script! got it working with any problems, but my photo’s which i use have different width & heights. How can i set the image to center verticaly and horizontally in the div? any idea’s?
you would have to do that with css – margin: 0 auto; should do the trick.