Ultimate Fade In Slideshow with Lightbox problem

[vlauwen]

1) Script Title:
Ultimate Fade In Slideshow with Lightbox problem

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem:

The ultimate fade-in slideshow v2.4 works great but when I add the Lightbox to the slideshow, the lightbox won't open but I'm getting a new empty page instead of the lightbox. So I searched a lot how to fix it, but none of the posts on this forum works for the newest version of the slideshow in combination with the lightbox. I did found solutions for Lightwindow, Colorbox or Fancybox but I would like to work with Lightbox so I was wondering if someone could help me with my problem or knows how to fix it.

[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!
	],

[vlauwen]

Yes I did choose Lightbox because of the way it looks, but Slimbox2 is better!

John you really are a hero, Thank you very much! It works great and looks beautiful!

[jscheuer1]

I also have an init now that I just worked out that will show the description from the slideshow as the caption for the slimbox and allow for next/prev in the slimbox to go over all of the enlarged images in the show. It needs a little tweaking to make it more user friendly. If you're interested, I'll let you know when it's ready.

[vlauwen]

My Fade in Slideshow and slimbox work both great, but how can I make work the next/prev labels in the Fade in Slideshow and in the Slimbox. I would like to have the next/prev labels in the slideshow with the mouse over when you get on the slideshow. And I also want to use the prev/next labels when the slimbox is open?

[jscheuer1]

I'm not sure all of what you're asking there. The next/prev buttons in the slideshow can be had simply by following the instructions on the slideshow's demo page. To get slimbox to use it's next/previous buttons you can use this script:

ufadeload_fn.js

Here's an example of how to do that, includes the next/previous buttons for the slideshow (in the head):

<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" src="js/ufadeload_fn.js"></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">
jQuery('#fadeshow1').uFadeSlimbox({gals: ['mygallery'], loop: true});
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.tinypic.com/11l7ls0.jpg", "http://i1092.photobucket.com/albums/i414/herrysusanto1/smingpool.jpg", "", "Nothing beats relaxing next to the pool when the weather is hot."],
		["http://i29.tinypic.com/xp3hns.jpg", "http://i33.photobucket.com/albums/d81/funky_diva23/Travel_Australia_Perth%201995-2004/perthmay05_margrvr_jewelcaves5.jpg", "_new", "Some day I'd like to explore these caves!"],
		["http://i30.tinypic.com/531q3n.jpg", "http://i100.photobucket.com/albums/m39/HypnoCenter/fruitdisplay.jpg"],
		["http://i31.tinypic.com/119w28m.jpg", "http://i730.photobucket.com/albums/ww309/laonhaque99/Fall/autumn_scene_4.jpg", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:6000, cycles:0, wraparound:true},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: "fadeshow1toggler"
});
</script>

Then in the body:

<div id="fadeshow1"></div>
<div id="fadeshow1toggler">
<input type="button" class="prev" value="&lt;">
<input type="button" class="next" value="&gt;">
</div>

Demo:

http://home.comcast.net/~jscheuer1/s...de_slimbox.htm

[vlauwen]

Thanks John! This is exactly what I needed. But I have a little question, how can I change the descriptions in slimbox ? Because it shows the name of the picture and I want to change the text below that what shows which picture you're watching of the total, Image 1 of 4.

[jscheuer1]

The name of the picture is the second default fall back. That deserves some explanation. Lets say you have an entry in the slideshow's imagearray:

["small.jpg", "large.jpg"],

Slimbox will show the large.jpg, and the description will be:

large
Image 2 of 4

If the entry in the imagearray is:

["small.jpg", "large.jpg", "", "My big Image"],

Slimbox will show:

My big Image
Image 2 of 4

And if the slideshow is set to show descriptions, My big Image will also be the description in the slideshow.

But if you have:

["small.jpg", "large.jpg", "", "Click for my big Image", "My big Image"],

Slimbox will still show:

My big Image
Image 2 of 4

But the slideshow will use, Click for my big Image.

OK, that's the description part. Now for the Image 2 of 4 part. That's controlled by slimbox. Using a text only editor like NotePad, look inside the ufadeload_fn.js script near the end:

 . . . 						}
					});
					gal.setting.syncapproved = links.length === gal.setting.imagearray.length;
					$.slimbox(links, index, {loop: options.loop /* , Aditional Options */ });
					e.preventDefault();
				}
			});
		}
	return this.selector? this : $;};
})(jQuery);

Let's zoom in on that line:

$.slimbox(links, index, {loop: options.loop /* , Aditional Options */ });

The green part is a comment. One of slimbox's options is counterText (from http://www.digitalia.be/software/slimbox2#usage):

counterText: Text value; allows you to customize, translate or disable the counter text which appears in the captions when multiple images are shown. Inside the text, {x} will be replaced by the current image index, and {y} will be replaced by the total number of images. Set it to false (boolean value, without quotes) or "" to disable the counter display. Default is "Image {x} of {y}".

So you can make that line:

$.slimbox(links, index, {loop: options.loop, counterText: 'Pic #{x} out of {y} pics' /* , Aditional Options */ });

And now instead of:

My big Image
Image 2 of 4

Slimbox will show:

My big Image
Pic #2 out of 4 pics