Looking for multi-functional slideshow - full screen, customizable appearance, etc.

[tnd1000]

Hey there. I love the scripts I've seen around here, but I'm currently looking for a slideshow to use on my site (mypetsonparade.com). Thus far, I've been using the Ultimate Fade-In Slideshow. It's great, but it doesn't have all the features my clients are looking for. However, there are several other DD slideshow scripts that have features my clients would like. I just don't yet have the coding knowledge to write a slideshow with the desired features, which are:

1. Ability to make the show full-screen
2. Ability to customize the appearance of the show (background-color/image of the player, etc.)
3. Capacity for a very large volume of pictures
4. Pictures can link to other pages
5. Pictures can have captions/descriptions
6. Show starts automatically, but has navigation buttons


Any help would be greatly appreciated!

[djr33]

What's missing from the Ultimate Fade-In Slideshow? I think all of those features should be available (if you look into how you can customize it), except for one:


1. Ability to make the show full-screenThat's going to be tough. Do you mean full-window? If so, that's fine. It may not be a feature in every slideshow, but a lot at least have something like a "lightbox" effect where the image is big in the center and there's a border around it.
But you can't actually make it full-screen using just DHTML as far as I know. This is possible using Flash. But I do think you'd actually need Flash to make that work. Is that an option? Personally I'd recommend against it.


3. Capacity for a very large volume of picturesIn what sense? There aren't usually limits to the number of images, although it may take a long time to load. There's no way around the loading time. However, you can use different strategies such as pre-loading (or not!) to make it smoother when it's used. If you have a "lot" of images, you may want to look at either not preloading the images or doing some sort of background process preloading so that it will not make you wait for everything to work.

[bernie1227]

1) the ability to make the show fullscreen
It is possible to combine the ultimate fade-in slideshow with something like slim box 2 like Daniel mentioned, and as detailed by this post by John (jscheuer1):

Why lightbox? Do you like how it looks? If that's the only issue use slimbox2, see:

http://www.dynamicdrive.com/forums/blog.php?b=247

However, if you're also having trouble implementing/integrating it with the slideshow, let me know.

Two (there are more) advantages with slimbox2 here are that it looks just like lightbox, and is compatible with jQuery. So for a simple integration you don't need to do anything with the slideshow script, just add slimbox2 and its styles to the page and this highlighted init for it:


<link rel="stylesheet" href="css/slimbox2.css" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/slimbox2.js"></script>
<script type="text/javascript">
(function($){
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
$('.gallerylayer a').live('click', function(e){
var t = this;
$.slimbox(t.href, 'Enlarged Image' || '', { /* Options */ });
e.preventDefault();
});
}
})(jQuery);
</script>
<script type="text/javascript" src="js/fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>
<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.t . . .

Set the links in the imagearray as the paths to the larger images:


imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "images/image-1.jpg", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "images/image-2.jpg", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg", "images/image-3.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "images/image-4.jpg", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],

[tnd1000]

Daniel: The Ultimate Fade-In Slideshow does have a lot of the features I listed, but in particular I'm having a hard time customizing its appearance. My client would like it to either have a background-image or have no background at all, and I can't figure out how to edit the background at all.
As for the capacity, I just wasn't sure if some slideshows would malfunction with a large number of photos.

Bernie: Thanks for the link! I'm having some trouble loading the Slimbox site right now (I'm on dial-up), but I'll check it out when I can. If I can use that for the full-screen and then figure out how to customize the background, my client will be happy, haha.

[bernie1227]

You can change the background color as explained here:
http://www.dynamicdrive.com/forums/showthread.php?59515-Ultimate-Fade-in-Slideshow-change-background-colour

[djr33]

As for the capacity, I just wasn't sure if some slideshows would malfunction with a large number of photos.In theory, no. (Unless they have a limited number of spaces, eg, a gallery with 6 places for images, but not in the "slideshow" layout I don't think.)

But it could take a lot of memory and slow down the computer. That's not something inherent about the Javascript code, just about the browser dealing with all of those images. Generally I don't expect it to be a problem with reasonably sized images on relatively modern computers, but if you do run into trouble feel free to post about it here-- and one solution is to look into the best way to deal with it using preloading (or not).

[tnd1000]

Thank you both very much! Can't tell you how big of a help this has been!!! If the images become a problem, I'll definitely check into the matter of preloading.

[djr33]

Ok, good luck with it. Also, there's an obvious solution if you are thinking about hundreds or thousands of images: create several pages and different galleries. That will help users anyway, because they'll want to look at specific subsets of the images rather than all of them at one time. I can imagine that not working on certain very specific kinds of sites, but for the most part it's an option and would solve that. If you're only using 100 or less images, I think it will be fine. If more, consider splitting it into a few pages if you find it to slow down the browser.

[bernie1227]

If you're going to look at preloading, a good starting point would be:
http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/
As it offers multiple methods of preloading.