Printable View
Hello,
I would like to know how to combine the Slideshow with the lightbox.
lightbox :
http://www.dynamicdrive.com/dynamici...box2/index.htm
Slideshow :
http://www.dynamicdrive.com/dynamici...army/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, 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:
Code: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;";
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.
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:
Don't change myLightbox, it's fine like it is and is already defined in the Lightbox script.Code:myLightbox.start(link);
WOW it's working..... !!! you are very smart.... :)
thank you very much....
thank you again for your kindly help jscheuer1(John).
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/dynamici...army/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 ???
hello madu,
please contact Mr. jscheuer1(John)
he will definitely help you as he help me....
sanduwa
Two things:Quote:
Originally Posted by madu
- 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):
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.Code:slides.onclick = "this.title = this.getElementsByTagName('img')[0].title; this.rel = 'lightbox[Brussels]';Lightbox.start(this); return false;";
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???
Please post a link to a page on your site that contains the problematic code so we can check it out.
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.
I did say that:
That's why I asked:Quote:
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.
Please post a link to a page on 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:
Then your array would be calledCode: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"];
slidesand we could do this:
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.Code:<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>
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.
Is this not working perfectly on IE ???
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:
Code:slides.onclick = "this.title = this.getElementsByTagName('img')[0].title; this.rel = 'lightbox';myLightbox.start(this); return false;";
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.
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.
Yes Mr jscheuer1. I made the change that you have posted finally.
but still it's not working properly. :confused:Code:slides.onclick = "this.title = this.getElementsByTagName('img')[0].title; this.rel = 'lightbox';";
can it be problem with my browser ???
I downloaded it from
http://www.soft32.com/Download/Free/Internet_Explorer/4-997-1.html
thanks for listening me :)
You should use IE 8. But if you want IE 7, you should get your IE 7 from Microsoft:
http://www.microsoft.com/downloads/d...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?
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
Code: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 :)
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):
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):Code:slides.onclick = "this.title = this.getElementsByTagName('img')[0].title; this.rel = 'lightbox';myLightbox.start(this); return false;";
We can make a branch for IE though:Code:slides.onclick = "this.title = this.getElementsByTagName('img')[0].title; this.rel = 'lightbox';";
About the page not appearing sometimes, do you mean the entire page, or just the Lightbox? It wouldn't hurt to validate your page:Code: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 @*/
http://validator.w3.org/
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/s..._test/test.htm
It's working perfectly in IE8. :)
You are a genius Mr.John
Thank you very much. You helped me lot.
Thank you again.
jscheuer1, i'm continuing from,
http://www.dynamicdrive.com/forums/s...t=54023&page=2
this code is not working as i want,
Code: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"];
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.Code:<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.
( sorry for being late)
If you want more help:Quote:
Originally Posted by madu
Please post a link to a page on your site that contains the problematic code so we can check it out.
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
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
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.Quote:
Originally Posted by madu
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.
jscheuer1,
i mail you a sample code. please tell me what wrong with it
thanks
OK, I made a typo:
It should be:Code:<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>
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):Code:<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>
Paths to background images in .css files are relative to the .css file, not to the page that uses the .css file.Code:background:url("../images/closelabel.gif") no-repeat;
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'):
Attachment 3287
There could still be other problems. But this worked well in Firefox 3 and in IE 7 and 8.
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