PDA

View Full Version : combining ultimate fade-in slideshow with lightbox in asp with external JS



effyl01
04-16-2011, 10:54 AM
1) Script Title:
ultimate fade-in slideshow 2.4
Lightbox Slideshow

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.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
04-16-2011, 06:33 PM
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
04-19-2011, 11:42 AM
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
04-19-2011, 04:29 PM
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
04-20-2011, 02:39 PM
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
04-21-2011, 07:10 AM
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
04-21-2011, 01:16 PM
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
04-21-2011, 05:04 PM
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
04-22-2011, 09:31 AM
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
04-22-2011, 10:10 AM
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.

effyl01
04-22-2011, 11:55 AM
Got it.
The first opacity: 0.7 can be changed to 0.5 with a dramtic effect. (or to 1)

But the other opacity=70 I changed to 0.1 and tried 1000 with no effect.

jscheuer1
04-22-2011, 02:59 PM
To see the effects of the filter, you must use IE 8 or less. The script itself supports IE only back to and including IE 6.

The opacity style property (opacity: 0.7;) is used by virtually all modern browsers, even IE starting with version 9, which has just been released. With IE 8 and less, going back to IE 5.5, there is the filter:progid:DXImageTransform.Microsoft.Alpha filter, which can be shortened to filter: alpha. It takes several optional parameters (properties), opacity being one of them. In that form it's inferior to the style opacity property in that it conflicts with alpha channel opacity in .png images that employ alpha channel opacity. It was the first opacity available in any major browser though, so we must give MS points for that, and it's still the most versatile owing to its other properties which may be mixed and matched to create all sorts of interesting gradient patterns without the use of graphics. It just kind of sucks when used as a substitute for the style opacity property. And no one else supports it, nor is likely ever to. In the later IE versions it turns off ClearType (anti-aliasing) for text in the elements it's applied to, which can look really bad when it happens. So it's really only good for background elements (like our overlay here) and images. In a few years, it can probably be abandoned.

effyl01
04-24-2011, 10:09 AM
OK.
Got it.
I use IE9 and FF 3.66.
I understand i can not see the change in the Filter:alpha.
I can live with it, and change only the opacity, that's fine.

any other goodies you might recomment to upgrade the Colorbox to a nicer level of visuallity?

Effy.

effyl01
04-25-2011, 08:33 AM
Any option to change the color layout of Colorbox?
any kit of new pictures?
any chanch to make a back and forward button?

Thanks!
Effy.

jscheuer1
04-25-2011, 03:38 PM
Well I happen to feel that it already has that, a nicer level of 'visuallity'. There are several changes one can make. A lot of it's just css and images.

However, I get the idea that ideally you would want it to be just like Lightbox Slideshow.

I was looking at their site and they have a version of their lightbox.js file, lightbox.1.2.js that uses prototype version 1.6. Presumably this could work with jQuery. In fact, from my experience, anything that uses prototype 1.6 can use the most recent Google hosted version. That would be a plus, as it would save you some on installation (less files to download), and in many cases bandwidth (lots of folks already have the Google versions of the prototype scripts cached).

When I get some time, I'll look into getting that to happen.

I was able to get ColorBox to use the Lightbox Slideshow close image and to change its control.png image to give a white background to the title. But my efforts to use the next/previous images from Lightbox Slideshow as buttons that appear over the image appear to only work in non-IE. I've gone over the css and markup differences and have yet to see the problem. I'm not certain I can find it, which is a shame because it's so much better to not have to load two script libraries. I think it might have to do with the overall structure of the markup and how dimensions are calculated visa vis the two scripts.

There's also FancyBox:

http://fancybox.net/

which is also a jQuery based lightbox type script. You might like it, have a look.

And jQuery Lightbox:

http://leandrovieira.com/projects/jquery/lightbox/

That one could probably just have the images from Lightbox Slideshow added, not sure if it does a slide show or not, it does do grouped images though.

jscheuer1
04-26-2011, 04:44 AM
OK, well I worked it out both ways. The more I see of Lightbox Slideshow, the less I like it. As I say it can be made to work, but it's less flexible in most regards, and there is the matter of the added overhead of needing two script libraries. I don't think the Lightbox Slideshow titles/captions can work in Chrome and Safari without some modifications to one or more of the scripts and/or styles involved. Have a look at this demo using ColorBox:

http://home.comcast.net/~jscheuer1/side/colorbox_ufade/

It doesn't make much sense. I used the demo images from Ufade and the demo images from ColorBox. But it does give you a good idea of the interface (css). One thing that might be cool is adding curves to the next and previous images, like transparent corners on the left of the nextlable.gif and on the right of the prevlable.gif - Oh, and these could possibly be made into one sprite, but that's not critical in my opinion. Rolling as many of the helper images as possible into one or more sprites is just good practice though. I did make a sprite of the closelable.gif so that it could change easily on hover.

effyl01
04-26-2011, 09:43 AM
jQuery Lightbox is so much cooler than ColorBox.
Can you please guide me how to use it like you did with the Colorbox?

1. download the files.
2. Refer the JS in the Head, refer the CSS in the head

Till here i know how :)

How to proceed?

Many Many thanks,
Effy.