combining ultimate fade-in slideshow with lightbox in asp with external JS

[effyl01]

1) Script Title:
ultimate fade-in slideshow 2.4
Lightbox Slideshow

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

http://www.justinbarkhuff.com/lab/lightbox_slideshow/

3) Describe problem:

Hi,
I am running a Ulitimate fade-in slideshow 2.4 in an asp enviorment, with an external JS file, and everything is working greate.

I am having trouble combining it with Lightbox Slideshow

Here are the configuration of how U.F.SS work for me:

Code of MasterPage.master -

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js"></script>

If you are not running <div id="fadshow1"> on every page.aspx at your site you then you will get an error message, that pops up warning you that the DIV for the slideshow is not found on the page so to avoit it
disable the warnning message by commenting out the following line inside the .js file:

		if (setting.$wrapperdiv.length==0){ //if no wrapper DIV found
			//alert("Error: DIV with ID \""+setting.wrapperid+"\" not found on page.")
			return
		}

Added this code in the end of the fadeslideshow.js file (remeber the semi-column):

;


var mygallery1=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [150, 120], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["/AppImages/Customers/Nolio.jpg","/AppImages/Customers/Nolio.jpg"],
["/AppImages/Customers/HP.jpg"],
["/AppImages/Customers/Ofek.jpg"],
["/AppImages/Customers/Tebeka.jpg"],
["/AppImages/Customers/Gilevents.jpg"]//<--no trailing comma after very last image element!
],

displaymode: {type:'auto', pause:2000, cycles:0, wraparound:false, randomize:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1000, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

Code in page.aspx

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    CodeFile="Customers.aspx.cs" Inherits="Customers" Title="" %>


 </br>
      
<div id="fadeshow1"></div>

</asp:Content>

code in CSS:

div#fadeshow1 {

left:-230px;
top:90px;

}

All the setting are ok and the U.F.SS wotks great.
I 've written it down in this order becuase it took me a long time to navigate throw the different posts untill i found how to achieve that

And now I want to combine the Lightbox.
I've done all that it says in the site:
1. Donwloaded all files and extracted them to the root.
2. added the referenace to JS and the CSS in the masterpage.master

now i just tried to add rel="lightbox" to the link in the U.F.SS picture array in the fadeslideshow.js file but it didnt work:
Sample of change:

["/AppImages/Customers/Nolio.jpg", "/AppImages/Customers/Nolio.jpg" rel="lightbox", ""]
["/AppImages/Customers/HP.jpg"],

It does not work.

Any help would be appriciated.
Thanks.

[jscheuer1]

These two scripts are incompatible. You might be able to have Lightbox Slideshow use a more recent version of Prototype, Scriptaculous, etc. that can be made to coexist with jQuery. But the versions used by Lightbox Slideshow are completely incompatible with jQuery. Even if that works out, you would need a front end of sorts to generate the Lightbox Slideshow links, or edit Ufade to actually generate them. The former would be better though because otherwise you'd have duplicates (Ufade makes two of each image). It gets complicated. If Lightbox Slideshow has a routine for removing duplicates, that part would be made easier.

But I would suggest a different approach. Try ColorBox (which can do a slideshow like Lightbox Slideshow does or just a single image, which is all your Ufade slideshow from your post has setup at the moment):

http://colorpowered.com/colorbox/

It uses jQuery, so the conflicts would be minimized immediately. It also has a way of looking into the markup to find links to use that doesn't depend upon setting a rel attribute for the link. It would still be tricky, but probably easier to setup. The only real issue would potentially be these duplicates - if ColorBox doesn't automatically remove them for you.

Once you've installed both scripts - Oh and be sure to get rid of all of the Prototype and related stuff as well as Lightbox Slideshow itself, something like:

;


var mygallery1=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [150, 120], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["/AppImages/Customers/Nolio.jpg","/AppImages/Customers/Nolio.jpg"],
["/AppImages/Customers/HP.jpg"],
["/AppImages/Customers/Ofek.jpg"],
["/AppImages/Customers/Tebeka.jpg"],
["/AppImages/Customers/Gilevents.jpg"]//<--no trailing comma after very last image element!
],

displaymode: {type:'auto', pause:2000, cycles:0, wraparound:false, randomize:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1000, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
});

jQuery(function($){
	$('#fadeshow1 .gallerylayer a').colorbox();
});

Should get you a very basic implementation. It worked here. You may want to update the jQuery to version 1.5.2, probably should, and it should only be used once on the page, before either the fladeslideshow.js and the jquery.colorbox.js or jquery.colorbox-min.js (use only one of these last two, the min version is faster to load) external tags.

Note: If you can get that much working, I've got a method (been playing around with it) where you can have a colorbox group or even a colorbox slideshow of the larger images with captions from the Ufade imagearray description fields or from an added field. Haven't worked out a way to pause the Ufade slideshow while the larger image(s) are being viewed or if that's even required.

[effyl01]

Hi,
Thanks for your time.

Colorbox seems beatifull. But i'm clueless on where to begin.

I download it.
I Deleted all marks to perviouse lightbox scripts, as you mentioned.
I called the new JS files - in the head of the masterpage.master

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js"></script>

<script type="text/javascript" src="jquery.colorbox.js.js"></script>
<script type="text/javascript" src="jquery.colorbox-min.js"></script>

And now what?

How do I call Colorbox to display an array of photos (the same photos that are displayed as slideshow with the U.F.SS) when a photo is clicked in the U.F.SS pictures?

;


var mygallery1=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [150, 120], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["/AppImages/Customers/Nolio.jpg"],
["/AppImages/Customers/HP.jpg"],["/AppImages/Customers/Gilevents.jpg"]//<--no trailing comma after very last image element!
],

displaymode: {type:'auto', pause:2000, cycles:0, wraparound:false, randomize:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1000, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})


var mygallery2=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [150, 120], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["/AppImages/Customers/Glasshouse.jpg"],
["/AppImages/Customers/Lnet.jpg"],
["/AppImages/Customers/Convex.jpg"],
.
.
.
.

Thanks a lot,
Effy.

[jscheuer1]

Change this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js"></script>

<script type="text/javascript" src="jquery.colorbox.js.js"></script>
<script type="text/javascript" src="jquery.colorbox-min.js"></script>

to (update to jQuery 1.5.2, and remove the tag for the un-minified version of the colorbox script):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js"></script>

<script type="text/javascript" src="jquery.colorbox-min.js"></script>

Pick one of the colorbox.css files, they're in the various example folders of the distribution archive, you can get an idea of how each looks by viewing and using the index page in each of these example folders in the browser. I liked the one in the example5 folder. You/we could even modify/customize one of the existing colorbox.css stylesheets to be more to your liking, but at least pick one that's closest to what you want. We can worry about modifying it later, if that's even desired.

Once you have chosen, put the tag for it in the head of the page, in the head of the masterpage.master is probably where it would go. Make sure any images the colorbox.css file you pick uses are available to it. They're in the images folder of the distribution archive. This much is all pretty similar to installing the other lightbox script you already had. If you use the same folder structure as the distribution archive, there will be minimal work for this step. The main difference is that the old script probably had only one .css file, so you didn't have to choose anything or probably even consider paths. You do know about paths and folders and how they matter in the various types of files you're using, right? If it is an issue, it will only be as regards a few lines of code and/or making sure a few files are in a particular spot. So if that's a problem and you want help, do your best, we can fix it later once I see your demo.

Then where you have:

;


var mygallery1=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [150, 120], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["/AppImages/Customers/Nolio.jpg"],
["/AppImages/Customers/HP.jpg"],["/AppImages/Customers/Gilevents.jpg"]//<--no trailing comma after very last image element!
],

displaymode: {type:'auto', pause: . . .

add the highlighted:

;

fadeSlideShow.myoninit = function(){
		var gal = this, gs = gal.setting, $layers = gs.$gallerylayers, group = gs.wrapperid;
		$layers.each(function(i){ // since there are two identical layers of images and links, we treat them each separately to avoid duplicates in a group
			$layers.eq(i).find('a').click(function(){
				if(gs.displaymode.type === 'auto'){ // if Ufade is in auto mode, stop it and save a flag to restart it when ColorBox closes
					gal.navigate(gs.curimage);
					gs.colorboxed = true;
				}
			}).colorbox({rel: group + i, title: function(){ // Begin ColorBox Init of Gallery Layers
					return this.getAttribute('data-cbtitle');
				}, onClosed: function(){ // return Ufade to auto mode if it was in it when Colorbox launched
					if(gs.colorboxed){
						gs.colorboxed = false;
						gs.displaymode.type = 'auto';
						gs.playtimer = setTimeout(function(){gal.showslide('next');}, gs.displaymode.pause);
					}
				}
			}).end().find('img').each(function(j){ // End ColorBox Init - Begin Assigning Attributes from the imagearray for use as ColorBox titles
				var link;
				if((link = this.parentNode).tagName.toLowerCase() === 'a'){
					link.setAttribute('data-cbtitle', gs.imagearray[j][4] || gs.imagearray[j][3] || '');
				}
			}); // End Assigning Attributes
		});
	};

var mygallery1=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [150, 120], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["/AppImages/Customers/Nolio.jpg"],
["/AppImages/Customers/HP.jpg"],["/AppImages/Customers/Gilevents.jpg"]//<--no trailing comma after very last image element!
],

displaymode: {type:'auto', pause: . . .

And to each (I see you probably have a number of them) of this and similar, add the highlighted as shown:

var mygallery1=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [150, 120], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["/AppImages/Customers/Nolio.jpg"],
["/AppImages/Customers/HP.jpg"],["/AppImages/Customers/Gilevents.jpg"]//<--no trailing comma after very last image element!
],

displaymode: {type:'auto', pause:2000, cycles:0, wraparound:false, randomize:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1000, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: "",
oninit: fadeSlideShow.myoninit
})

Don't miss the added comma (red) after the togglerid value.

This can all be tweaked if need be. Let's just get it working for you first. Once you've done all of the above, if you have problems, give me the link, I should be able to spot them.

Extra Information:

Those last two parts don't need to be so complicated, but if you have descriptions in the slideshow that you want for colorbox captions and/or more than one linked image in a given show and you want them grouped, you will need all that. If you want colorbox to group across slideshows or to not group at all, that can be arranged, let me know. The code already has built in that if there are no descriptions in the Ufade show, there will be no captions in the colorbox. You can also specify an additional description field in the imagearray for an alternate caption for colorbox, one that's different from the description used in Ufade. Or you can make this additional field a single space, and it will disable the caption for that colorbox, while allowing Ufade to use its own description normally.

[effyl01]

Hi John,
Thanks a lot for you help.

It doesnt work

The problem: the pictures shown in the U.F.SS are not linkable, i can not press on the pictures.

I dont have the site accessable on the internet yet.
If you could help - here's the site as a zip file, with all the content.

www.intuative.com/IT4U.zip

the talked about page is at - customer.aspx

as for the ColorBox css - i copied the content of the file to my css.
(but it's not the CSS causing the problem

As for the ColorBox images path inside the CSS i set it up to be accessable.

Again, John, thanks for all your help.
Effy.

[jscheuer1]

What do you mean press? Are you using an iPad or other device with a touchscreen? If you mean click though, that means that either the Ufade images have no links, or that something about the layout is covering them in some unseen way. To have a link for an image in Ufade, you need to have the second field in the image array entry filled in, for example in this excerpt from my working demo:

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", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
		["http://i29.tinypic.com/xp3hns.jpg", "../content/ohoopee1.jpg", "", "Some day I'd like to explore these caves!"],
		["http://i30.tinypic.com/531q3n.jpg", "", "", '<a href="http://www.google.com/" target="_new">Google<\/a>', ' '],
		["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: "",
	oninit: fadeSlideShow.myoninit
});

only the highlighted imagearray line has a link. So only the i29.tinypic.com/xp3hns.jpg (it's the image of a cave) would be clickable. And in the examples from your post, this one for instance:

imagearray: [
["/AppImages/Customers/Nolio.jpg"],
["/AppImages/Customers/HP.jpg"],
["/AppImages/Customers/Gilevents.jpg"]//<--no trailing comma after very last image element!
],

None are linked, so there will be no ColorBox and none of the images can be clicked. With ColorBox and this setup, you can link to a page on the same domain (it will be fetched via AJAX, which has some limitations), or to an image anywhere on the net or in the local testing environment.

Usually you would want larger or different images. Just to test though, you could use the same images:

imagearray: [
["/AppImages/Customers/Nolio.jpg", "/AppImages/Customers/Nolio.jpg"],
["/AppImages/Customers/HP.jpg", "/AppImages/Customers/HP.jpg"],
["/AppImages/Customers/Gilevents.jpg", "/AppImages/Customers/Gilevents.jpg"]//<--no trailing comma after very last image element!
],

I tested it here before posting it and it works fine. Unfortunately though, I don't have a testing environment for asp. So if the above is not the solution, it would be hard to say. But asp is essentially like any server side code. What counts in a case like this is what's in the served source code of the page. Look at the page in the browser. Use its 'view source'. If the source code isn't as I have laid out, then it needs to be changed on that page or on some page used by the server to make that page.

That's not the only thing that can go awry using server side code to assemble a page. Once you start using includes and similar server side files and/or other server side techniques, it can be easy to inadvertently mess up a path or paths for the actual page.

In this case (because I have no asp testing environment), the only way I could tell any of that is if I could see the page live. If you have Firefox, I could probably guide you through the steps needed to check these things on your own.

[effyl01]

Solved.

John, YOU ARE THE MAN!

If stupidity would hurt I would scream in agony.
Of course, if there arn't links in the pictures array I cannot click on the pictures...DAHHH

Everything is working as supposed to.
Indeed the example5 has the better CSS.

Colorbox has a fairy simple view. The Lightbox, which I started this thread with, has a much much more nicer gui.

Effy.

[jscheuer1]

Everything is working as supposed to.
Indeed the example5 has the better CSS.

Colorbox has a fairy simple view. The Lightbox, which I started this thread with, has a much much more nicer gui.

Great! Now, as I alluded to earlier we could try to make the example5 css look more like the Lightbox Slideshow css. The first thing I did was to change/add the highlighted:

/*
    ColorBox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}

/* 
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;opacity: 0.7!important;filter: alpha(opacity=70)!important;}
#colorbox{}
    #cboxTopLeft{width:14px; height:14px; background:url(images/controls.png) no-repeat 0 0;}
    #cboxTopCenter{height:14px; background:url(images/border.png) repeat-x top left;}
    #cboxTopRig . . .

[effyl01]

Hi,
did as you suggested.
I added

opacity: 0.7!important;filter: alpha(opacity=70)!important;}

But nothing changed.

No differance in the behavor at all.

Effy.

[jscheuer1]

It lightens the overlay, makes it a little more see through, could be hard to notice. That or the old file is cached or still being used for some other reason.