PDA

View Full Version : Combining Lightbox 2 with conveyor belt script



aliciageeg
09-10-2008, 03:14 PM
1) Script Title: Combining Lightbox 2 with conveyor belt script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm and http://dynamicdrive.com/dynamicindex14/leftrightslide.htm

3) Describe problem: I'm trying to combine the two scripts. I'm using Dreamweaver to make my edits. I can get the conveyor belt to work no worries. But when I click on an image it opens up a window by itself. Can't seem to get the lightbox to work. (both in firefox and IE - windows)

I learn as I go with HTML so apologies if it's something obvious I'm missing. I've tried all the suggestions that other forums have mentioned but none seem to work for me.

Here is a test page for my website:
http://www.heidelbergvolleyball.net.au/test.html
(the images are too small at the moment, i'll fix them later)

Appreciate any help I can get. Cheers

jscheuer1
09-10-2008, 04:00 PM
The lightbox scripts are not on the server where indicated in the script tags from the source code of your page. The lightbox styles are not on or linked to the page, the lightbox stylesheet is probably not on the server. And the lightbox resource images are probably not on the server.

Even when you take care of that, where you have (and similar):


leftrightslide[1]='<a href="images/2008_photos/Ali_Ahmadkhani_Div1.jpg" rel="lightbox"><img src ="images/2008_photos/thumbnails/Ali_Ahmadkhani_Div1.jpg" border=1></a>'


That's not HTML and may (probably will) be written to the page after lightbox initializes. So all of those need the lightbox onclick event hard coded, ex:


leftrightslide[1]='<a onclick="myLightbox.start(this);return false;" href="images/2008_photos/Ali_Ahmadkhani_Div1.jpg" rel="lightbox"><img src ="images/2008_photos/thumbnails/Ali_Ahmadkhani_Div1.jpg" border=1></a>'

aliciageeg
09-10-2008, 11:38 PM
Ok! It's scarey how quickly you got back to me on that one! And how amazingly simple and silly I feel (apart from the second bit - I definitely wouldn't have figured that out!)
Thank you so much for your help! I would have continued to stare at the screen forever or given up.
Cheers

aliciageeg
09-11-2008, 08:26 AM
Sorry, trying to figure this little problem on my own but i have no clue. Can get the conveyor and lightbox working brilliantly. But I seem to have too many images grouping together.

If I only put 9 images in, for some reason it'll say there's 30. And when I get to after the 9th image, it keeps trying to load but never loads anything?

Occurring on this particular page:
http://www.heidelbergvolleyball.net.au/2008_photos.html

Sorry if it's obvious!
Cheers

jscheuer1
09-11-2008, 09:13 AM
In your original post you indicated that you were using lightbox v2.03a. However, looking at your page and following the link to the lightbox script, I see you are using v2.04. Unfortunately, support for removing duplicate images from groups was dropped in that version. I have no idea why.

My best advice would be to use version 2.03a, as the conveyor script makes 3 separate copies of the images' markup, 2 of which are required for the operation of the gallery, the 3rd is only used in its initialization, so could be removed after used, but the other two must remain.

2.03a:

http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

Added Later:

In limited testing, it appears you can just replace the 2.04 version lightbox.js file and the 2.04 version lightbox.css file with the version 2.03a ones.

aliciageeg
09-11-2008, 01:58 PM
Did the trick - thank you. Again something I would never have figured out without you.
Hopefully I won't need to bother you again!
Cheers

jscheuer1
09-11-2008, 03:32 PM
This was bothering me because it has come up before. So I looked into it a bit more.

It turns out that lightbox v2.04 does not require that the lightbox onclick event be added to the code for Conveyor (or virtually any other script lightbox is used with), in fact it should not be added if using v2.04. However, the v2.04 lightbox code also relies upon prototype.js for creating an array of images with no duplicates via prototype's uniq() function. This function does not handle multidimensional arrays though (the lightbox image array is multidimensional), so fails to produce the desired result.

This latter issue can be resolved by adding this code at the very beginning of the v2.04 lightbox.js file:


;(function(){
var b = [[0, 1], [0, 1]];
if (b.uniq && b.length == b.uniq().length || !b.uniq)
Array.prototype.uniq = function (sorted, deep) {
deep = deep || 0;
var a = [], i, j;
for(i = 0; i < this.length; ++i)
a[i] = this[i];
for(i = 0; i < a.length; ++i){
for(j = a.length-1; j > i; --j){
if((a[i][deep] || a[i]) == (a[j][deep] || a[j])){
a.splice(j,1);
};
};
};
if(sorted){
a.sort();
};
return a;
};
})();