PDA

View Full Version : Slideshow Vs lightbox



sanduwa
04-16-2010, 03:13 AM
Hello,

I would like to know how to combine the Slideshow with the lightbox.

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

Slideshow :
http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm

Is there any possibility to open lightbox when click on the Slideshow ?????
I have tried this several times. But I couldn't. Now I'm fed-up with this.

This is urgent. It would be great if someone could help me.

Thanks,
Sanduwa.

bluewalrus
04-17-2010, 02:44 PM
Try this http://www.dynamicdrive.com/forums/showthread.php?t=38294

or one of these

http://www.dynamicdrive.com/forums/result.htm?cx=partner-pub-3356683755662088%3A1wdgia-fhcv&cof=FORID%3A9&ie=ISO-8859-1&q=slideshow+lightbox&sa=Search&siteurl=www.dynamicdrive.com%2Fforums%2Fshowthread.php%3Ft%3D54023#916

jscheuer1
04-17-2010, 04:59 PM
Bluewalrus, that first is for a slide show that is no longer available. The second is just an index.

sanduwa, here's what I would try - first install the scripts on the page as instructed on each one's demo page. For Lightbox, don't worry about making any rel="lightbox" links, just install its scripts in the head. For Swiss Army, use a configuration like so:


var slides=[]; //FIRST SLIDESHOW
//configure the below images and descriptions to your own.
slides[0] = ["photo1.jpg", "Kissing Fools", "photo1_lrg.jpg"];
slides[1] = ["photo2.jpg", "Seated Woman", "photo2_lrg.jpg"];
slides[2] = ["photo3.jpg", "The Dog Lovers", "photo3_lrg.jpg"];
slides[3] = ["photo4.jpg", "Standing Woman", "photo4_lrg.jpg"];
slides[4] = ["photo5.jpg", "John, Mary and Jesus", "photo5_lrg.jpg"];
slides.use_title = 1;
slides.onclick = "this.title = this.getElementsByTagName('img')[0].title; this.rel = 'lightbox'; myLightbox.start(this); return false;";

sanduwa
04-17-2010, 07:47 PM
hello jscheuer1,
Thank you for responding me.
But I'm bit confusing with your last line. what is "myLightbox" ???
should lightbox & Slideshow take separately then do the above modification only on the Slideshow ???
or should be install lightbox scripts in the Slideshow header ???
If I'm not bothered you please help me....


thanx,
sanduwa.

jscheuer1
04-17-2010, 08:15 PM
Just do what I said. If it doesn't work, give me a link to the page where you are trying this.

By way of explanation, myLightbox is used by the Lightbox script as a reference to the internal functions like start(), which we need here. So to start a lightbox from a link, we literally do:


myLightbox.start(link);

Don't change myLightbox, it's fine like it is and is already defined in the Lightbox script.

sanduwa
04-18-2010, 04:16 AM
WOW it's working..... !!! you are very smart.... :)
thank you very much....
thank you again for your kindly help jscheuer1(John).

madu
04-26-2010, 08:14 AM
Hi all,
the above lightbox(lightbox V2.03) can be integrated. but it is not possible to integrate the "Swiss Army Image Slideshow" with bellow bellow "Lightbox_Slideshow" (Version 1.1).

Swiss Army Image Slideshow:
http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm

Lightbox_Slideshow:
http://www.justinbarkhuff.com/lab/lightbox_slideshow/
(click on "Group of Images")

it is not working with
slides.onclick = "this.title = this.getElementsByTagName('img')[0].title; this.rel = 'lightbox[Brussels]'; myLightbox.start(this); return false;";

would anyone tell me what is the solution ???

sanduwa
04-26-2010, 09:25 AM
hello madu,
please contact Mr. jscheuer1(John)
he will definitely help you as he help me....

sanduwa

jscheuer1
04-26-2010, 01:13 PM
Hi all,
the above lightbox(lightbox V2.03) can be integrated. but it is not possible to integrate the "Swiss Army Image Slideshow" with bellow bellow "Lightbox_Slideshow" (Version 1.1).

Swiss Army Image Slideshow:
http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm

Lightbox_Slideshow:
http://www.justinbarkhuff.com/lab/lightbox_slideshow/
(click on "Group of Images")

it is not working with
slides.onclick = "this.title = this.getElementsByTagName('img')[0].title; this.rel = 'lightbox[Brussels]'; myLightbox.start(this); return false;";

would anyone tell me what is the solution ???

Two things:


You already have a slide show, why start another? It's possible, but not all that great of an idea. Swiss army does incremental preload, so you may use your full size images in it. Or, if you like the Lightbox Slideshow, just make up one link to launch it, make all of the rest hidden.


The main problem though is that Lightbox Slideshow 1.1 is a different script, and uses different syntax.


The first is a matter of opinion. The second can be easily solved (at least partly) by using the correct syntax for Lightbox Slideshow 1.1 (change highlighted):


slides.onclick = "this.title = this.getElementsByTagName('img')[0].title; this.rel = 'lightbox[Brussels]'; Lightbox.start(this); return false;";

However, this will not start a full Lightbox Slideshow because, at that point, there will be only one or two lightbox[Brussels] links on the page. You can make up as many links as you want in a division that is display none, and if Lightbox Slideshow is good at removing duplicates, it will work out. Even if it isn't, that part can probably be fixed. These extra links can be either hard coded or manufactured for you from the Swiss Army array using javascript.

madu
04-26-2010, 04:49 PM
Mr. jscheuer1(John), Thank you for immediate responding.

But it's not working as i hope. just i want to show the all photos, through the lightbox.i want is click on the slideshow & open the lightbox then show the all photos by automatically or by clicking on the lightbox's next, prev, stop, start buttons.

is it possible???

jscheuer1
04-26-2010, 04:54 PM
Please post a link to a page on your site that contains the problematic code so we can check it out.

madu
04-26-2010, 04:57 PM
Mr. jscheuer1(John), Thank you for immediate responding.

But it's not working as i hope.this is giving the same result as sanduwa's problem. but just i want to show the all photos, through the lightbox on a one click.not a single photo on a one click.
I really want is click on the slideshow & open the lightbox then show the all photos by automatically or by clicking on the lightbox's next, prev, stop, start buttons.
is it possible???

please visit
http://www.justinbarkhuff.com/lab/lightbox_slideshow/ & click on the images under the topic "Group of Images". then see, how the navigate the images through the lightbox.

thank you very much,
madu.

jscheuer1
04-27-2010, 02:59 PM
I did say that:


However, this will not start a full Lightbox Slideshow because, at that point, there will be only one or two lightbox links on the page. You can make up as many links as you want in a division that is display none, and if Lightbox Slideshow is good at removing duplicates, it will work out. Even if it isn't, that part can probably be fixed. These extra links can be either hard coded or manufactured for you from the Swiss Army array using javascript.

That's why I asked:

Please post a link to a page on [b]your site that contains the problematic code so we can check it out.

I could then customize the function to do that from Swiss Army based upon how your Swiss Army array looked.

But, let's say you did it like I said here:


var slides=[]; //FIRST SLIDESHOW
//configure the below images and descriptions to your own.
slides[0] = ["photo1.jpg", "Kissing Fools", "photo1_lrg.jpg"];
slides[1] = ["photo2.jpg", "Seated Woman", "photo2_lrg.jpg"];
slides[2] = ["photo3.jpg", "The Dog Lovers", "photo3_lrg.jpg"];
slides[3] = ["photo4.jpg", "Standing Woman", "photo4_lrg.jpg"];
slides[4] = ["photo5.jpg", "John, Mary and Jesus", "photo5_lrg.jpg"];

Then your array would be called slides and we could do this:


<script type="text/javascript">
(function(ar){
var d = document.createElement('div'), a = document.createElement('a'), a1;
a.rel = 'lightbox[Brussels]';
d.style.display = 'none';
for(var i = 0; i < ar.length; ++i){
a1 = a.cloneNode(true);
a1.title = ar[i][1];
a1.href = ar[i][2];
d.appendChild(a1);
}
document.body.insertBefore(d, document.body.firstChild);
})(slides);
</script>

Place that right after your opening <body> tag. This assumes that the Swiss Army scripts were installed as instructed on its demo page, with the array of slides in the head of the page.

The only real problem we could then have if Lightbox Slideshow, like many recent Lightbox scripts, doesn't remove duplicate links/images correctly.

Looking at the code, it appears not to make any attempt to do so, if I'm right about that there will be duplicates in the slide show created by Lightbox Slideshow. But I might be wrong, try it out. If there are duplicates, we can probably fix that.

sanduwa
04-28-2010, 06:50 PM
Is this not working perfectly on IE ???

jscheuer1
04-29-2010, 02:39 AM
You are not using the version of Lightbox you indicated that you were in your first post. Testing with the archive you emailed me indicates you should remove the highlighted:


slides.onclick = "this.title = this.getElementsByTagName('img')[0].title; this.rel = 'lightbox'; myLightbox.start(this); return false;";

sanduwa
04-29-2010, 03:10 AM
Mr John,
still it's not working perfectly. sometimes it works. sometimes it's giving the same error massage. please run that several times then you will see the error.

thank you for your kindly help,
sanduwa.

jscheuer1
04-29-2010, 05:53 AM
Works fine here. If you are still getting an error message, you haven't made the change I suggested in my last post, or you are viewing a cached version of the page. I tested it with that change repeatedly in IE and could see no problem or error message.

sanduwa
04-29-2010, 06:27 AM
Yes Mr jscheuer1. I made the change that you have posted finally.

slides.onclick = "this.title = this.getElementsByTagName('img')[0].title; this.rel = 'lightbox';";

but still it's not working properly. :confused:

can it be problem with my browser ???
I downloaded it from
http://www.soft32.com/Download/Free/Internet_Explorer/4-997-1.html (http://www.soft32.com/Download/Free/Internet_Explorer/4-997-1.html)

thanks for listening me :)

jscheuer1
04-29-2010, 12:53 PM
You should use IE 8. But if you want IE 7, you should get your IE 7 from Microsoft:

http://www.microsoft.com/downloads/details.aspx?FamilyID=9ae91ebe-3385-447c-8a30-081805b2f90b&displayLang=en

However, it is very possible that if you run Windows Vista, Windows 7, or a non-Windows OS that you will never be able to install it properly. Also, if you've ever had IE 8 installed, there may be registry entries left over from that which make IE 7 work oddly.

I tested your page in IE 8 with its IE 7 engine, same result - no error message, and works fine after repeated refreshes.

Are you getting an error message, or is it just that it isn't behaving as expected?

If the former, what error message are you getting? If the latter, what exactly isn't it doing?

sanduwa
04-29-2010, 03:25 PM
You are right Mr.John
It's a problem with browser.Now I'm using IE 8. In here no error massage.
but still sometimes the page is not appeared.
can it fixed by changing the code.....????

suggestion:

can we use this code for non-IE browsers & when click on the slideshow then open the lightbox

slides.onclick = "this.title = this.getElementsByTagName('img')[0].title; this.rel = 'lightbox'; myLightbox.start(this); return false;";

and (using if-else) only for IE browser can we use normal code & when click on the slideshow then open the image in a another web page( like a link )

can it be happened ???

Thank You very much Mr.John :)

jscheuer1
04-30-2010, 01:34 AM
I have an IE 7 test environment on another machine. When I get some time I will bring it back online and test your page in it. The page should work in IE 7. It would help if you could put your test page online somewhere, otherwise I will have to publish it somewhere just to test it.

The code (highlighted):


slides.onclick = "this.title = this.getElementsByTagName('img')[0].title; this.rel = 'lightbox'; myLightbox.start(this); return false;";

Should never be used with the version of Lightbox you are using. It will always give an error regardless of browser. It's just that most browsers don't report errors as readily as IE does. You should use (for all browsers):


slides.onclick = "this.title = this.getElementsByTagName('img')[0].title; this.rel = 'lightbox';";

We can make a branch for IE though:


slides.onclick = "this.title = this.getElementsByTagName('img')[0].title; this.rel = 'lightbox';";
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
slides.onclick = "open(this.href, '_blank'); return false;";
@end @*/

About the page not appearing sometimes, do you mean the entire page, or just the Lightbox? It wouldn't hurt to validate your page:

http://validator.w3.org/

jscheuer1
04-30-2010, 04:39 AM
In my IE 7 test environment the page wouldn't show up at all.

After I validated the page - not completely, just some of the major stuff - it worked in IE 7:

http://home.comcast.net/~jscheuer1/side/vfs/test_test/test.htm

sanduwa
05-01-2010, 10:11 AM
It's working perfectly in IE8. :)
You are a genius Mr.John
Thank you very much. You helped me lot.
Thank you again.

madu
05-01-2010, 06:10 PM
jscheuer1, i'm continuing from,
http://www.dynamicdrive.com/forums/showthread.php?t=54023&page=2

this code is not working as i want,


var slides=[]; //FIRST SLIDESHOW
//configure the below images and descriptions to your own.
slides[0] = ["photo1.jpg", "Kissing Fools", "photo1_lrg.jpg"];
slides[1] = ["photo2.jpg", "Seated Woman", "photo2_lrg.jpg"];
slides[2] = ["photo3.jpg", "The Dog Lovers", "photo3_lrg.jpg"];
slides[3] = ["photo4.jpg", "Standing Woman", "photo4_lrg.jpg"];
slides[4] = ["photo5.jpg", "John, Mary and Jesus", "photo5_lrg.jpg"];




<script type="text/javascript">
(function(ar){
var d = document.createElement('div'), a = document.createElement('a'), a1;
a.rel = 'lightbox[Brussels]';
d.style.display = 'none';
for(var i = 0; i < ar.length; ++i){
a1 = a.cloneNode(true);
a1.title = ar[i][1];
a1.href = ar[i][2];
d.appendChild(a1);
}
document.body.insertBefore(d, document.body.firstChild);
})(slides);
</script>

Place that right after your opening <body> tag. This assumes that the Swiss Army scripts were installed as instructed on its demo page, with the array of slides in the head of the page.

what i want is lightbox slideshow. not lightbox. when i Place this code as you said it's working as normal lightbox but not like lightbox slideshow. i want to perform lightbox slideshow.
( sorry for being late)

jscheuer1
05-01-2010, 11:37 PM
jscheuer1, i'm continuing from,
http://www.dynamicdrive.com/forums/showthread.php?t=54023&page=2

this code is not working as i want,


var slides=[]; //FIRST SLIDESHOW
//configure the below images and descriptions to your own.
slides[0] = ["photo1.jpg", "Kissing Fools", "photo1_lrg.jpg"];
slides[1] = ["photo2.jpg", "Seated Woman", "photo2_lrg.jpg"];
slides[2] = ["photo3.jpg", "The Dog Lovers", "photo3_lrg.jpg"];
slides[3] = ["photo4.jpg", "Standing Woman", "photo4_lrg.jpg"];
slides[4] = ["photo5.jpg", "John, Mary and Jesus", "photo5_lrg.jpg"];




<script type="text/javascript">
(function(ar){
var d = document.createElement('div'), a = document.createElement('a'), a1;
a.rel = 'lightbox[Brussels]';
d.style.display = 'none';
for(var i = 0; i < ar.length; ++i){
a1 = a.cloneNode(true);
a1.title = ar[i][1];
a1.href = ar[i][2];
d.appendChild(a1);
}
document.body.insertBefore(d, document.body.firstChild);
})(slides);
</script>

Place that right after your opening <body> tag. This assumes that the Swiss Army scripts were installed as instructed on its demo page, with the array of slides in the head of the page.

what i want is lightbox slideshow. not lightbox. when i Place this code as you said it's working as normal lightbox but not like lightbox slideshow. i want to perform lightbox slideshow.
( sorry for being late)

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

madu
05-02-2010, 01:11 AM
i have no link to post for this. because i'm testing it by locally.
simply i try to integrate
slideshow
http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm (http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm)
and
lightbox-slideshow
http://www.justinbarkhuff.com/lab/lightbox_slideshow/

let's take the link that you have published for sanduwa,
http://home.comcast.net/~j scheuer1/side/vfs/test_test/test.htm (http://home.comcast.net/~jscheuer1/side/vfs/test_test/test.htm)
can you integrate this with lightbox-slideshow and publish?
thanx

jscheuer1
05-02-2010, 02:58 PM
i have no link to post for this. because i'm testing it by locally.
simply i try to integrate
slideshow
http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm (http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm)
and
lightbox-slideshow
http://www.justinbarkhuff.com/lab/lightbox_slideshow/

let's take the link that you have published for sanduwa,
http://home.comcast.net/~j scheuer1/side/vfs/test_test/test.htm (http://home.comcast.net/~jscheuer1/side/vfs/test_test/test.htm)
can you integrate this with lightbox-slideshow and publish?
thanx

sanduwa at least provided me with a 'best effort'. That example was fine for resolving the issues that it had and showed that sanduwa was willing to make the effort to set this up. With only two images, it wouldn't be all that great for what you are trying.

Attach a full archive of your installation including images (5 images is enough, don't send like 250), styles, scripts, etc. If you want it private, email it to me (that's what sanduwa did), you can find my address in my profile.

But it would be easiest if you could just put it up somewhere that I could have a look at it.

madu
05-02-2010, 05:09 PM
jscheuer1,
i mail you a sample code. please tell me what wrong with it

thanks

jscheuer1
05-02-2010, 08:03 PM
OK, I made a typo:


<script type="text/javascript">
(function(ar){
var d = document.createElement('div'), a = document.createElement('a'), a1;
a.rel = 'lightbox[Brussels]';
div.style.display = 'none';
for(var i = 0; i < ar.length; ++i){
a1 = a.cloneNode(true);
a1.title = ar[i][1];
a1.href = ar[i][2];
d.appendChild(a1);
}
document.body.insertBefore(d, document.body.firstChild);
})(slides);
</script>

It should be:


<script type="text/javascript">
(function(ar){
var d = document.createElement('div'), a = document.createElement('a'), a1;
a.rel = 'lightbox[Brussels]';
d.style.display = 'none';
for(var i = 0; i < ar.length; ++i){
a1 = a.cloneNode(true);
a1.title = ar[i][1];
a1.href = ar[i][2];
d.appendChild(a1);
}
document.body.insertBefore(d, document.body.firstChild);
})(slides);
</script>

Just that much will get it working, sort of. The next/previous, and close buttons as well as the loading and blank images aren't getting used because the paths are wrong in lightbox.css. In the archive you sent me they should be, for example (addition highlighted):


background:url("../images/closelabel.gif") no-repeat;

Paths to background images in .css files are relative to the .css file, not to the page that uses the .css file.

Finally we do have the problem of duplicates that I was afraid of. This can be fixed in lightbox.js, use this version (right click and 'save as'):

3287

There could still be other problems. But this worked well in Firefox 3 and in IE 7 and 8.

madu
05-03-2010, 09:26 AM
Oh now it's working 100% perfectly :)
it's working all the browsers.
yes jscheuer1, you are a really genius. i appreciate your fantastic knowledge
and thank you so much.

thanks,
madu