PDA

View Full Version : Lightbox Viewer



chechu
12-13-2007, 03:34 PM
1) Script Title: Lightbox Viewer

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

3) Describe problem: Hey,
I'd like to know if it is possible to have the lightbox showing from a text link. As shown on DD, all the thumbnails need to be placed to be able to show all in a roadtrip. I'd like to place a textlink (f.ex. 'portfolio'), and when you click on it, one image comes up with the possibility to go on a roadtrip (prev-next).

ddadmin
12-14-2007, 08:35 AM
I believe what you can do physically define the text links that point to their enlarged image and that belong in the same group, but "hide" all but the first link. For example:


<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]" style="display:none">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]" style="display:none">image #3</a>

Untested, but worth a shot.

chechu
12-14-2007, 02:16 PM
Thanks a lot !
As I work with a restricted computer, can anyone please test if this is useable in IE and Firefox, old and new browsers ?

chechu
12-14-2007, 02:53 PM
I have two textlinks, one next to the other, and I want them to display two different roadshows.
How can that be done, as now, the second textlink follows the roadshow of the first textlink.

ddadmin
12-15-2007, 09:36 AM
I have two textlinks, one next to the other, and I want them to display two different roadshows.
How can that be done, as now, the second textlink follows the roadshow of the first textlink.

Theoretically, you'd have something like this then:


<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image 1a</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]" style="display:none">image 1b</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]" style="display:none">image 1c</a>

<a href="images/image-1.jpg" rel="lightbox[roadtrip2]">image 2a</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip2]" style="display:none">image 2b</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip2]" style="display:none">image 2c</a>

The key is just to use a different element name for rel="lightbox[roadtrip2]" for each group of links.

chechu
12-15-2007, 11:02 AM
Problem solved !!!! Thanks so much.

chechu
12-16-2007, 08:46 PM
How can I get rid of "image 2 of 17" on the bottom of every image ?
Also, there is a white area on the bottom; how do I put that black also ?
Please go to http://www.cecicasariego.com and click on the botom left (portfolio) on 'portraits' to see what I mean.
Thanks !

ddadmin
12-17-2007, 07:53 AM
How can I get rid of "image 2 of 17" on the bottom of every image ?
Also, there is a white area on the bottom; how do I put that black also ?
Please go to http://www.cecicasariego.com and click on the botom left (portfolio) on 'portraits' to see what I mean.
Thanks !

Well, the line:


Element.setInnerHTML( 'numberDisplay', "Image " + eval(activeImage + 1) + " of " + imageArray.length);

inside the .js file controls the showing of "image x of total". Commenting that line out should do the trick.

Most of the lightbox's look should be controlled by lightbox.css. Just glancing over that file, it would seem the pertinent line is this:


#outerImageContainer{
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}

I may be wrong though. Try experimenting a bit with the .css file.

chechu
12-18-2007, 10:33 AM
It worked out fine, thanks.
I think the problem with the white bg at he bottom is when you need to scroll down to see the text below the image. Go to http://www.cecicasariego.com and click on portraits (portfolio), and you'll see that the smaller imgs do not have the white line below, as you don not need to scroll down. Is there a solution for that ?

busybee
12-21-2007, 08:59 AM
hiya,
newbie here in forums. was playing with the lightbox and was wondering if it's possible to have the next and previous buttons appear permanently without the mouse rolling over it?

also, does anyone know how to add thumbnails inside the lightbox itself, like those found in firefox theme download pages?

any help would be greatly appreciated.

thanks.

jscheuer1
12-22-2007, 02:55 PM
hiya,
newbie here in forums. was playing with the lightbox and was wondering if it's possible to have the next and previous buttons appear permanently without the mouse rolling over it?

also, does anyone know how to add thumbnails inside the lightbox itself, like those found in firefox theme download pages?

any help would be greatly appreciated.

thanks.

http://www.dynamicdrive.com/forums/showthread.php?t=22500

and:

http://www.dynamicdrive.com/forums/showthread.php?p=120764

busybee
12-24-2007, 05:37 PM
awesome and many thanks. :) and a merry Christmas to everyone who is celebrating it.

chechu
12-29-2007, 12:30 PM
When you do mouseover on the link to the lightbox, an "alt" text appears, which is written in the source as "title", to appear under the upcoming image.
Is it possible to have nothing on mouseover ?
Hard to explain. Please go to http://www.cecicasariego.com/indexGB.html and move your mouse over "portraits" (portfolio) and the text of Depp comes up, that is meant to be the text under the image.

jscheuer1
12-29-2007, 05:26 PM
The behavior in various browsers is different, and I have no idea whether or not your style will do anything odd (because of the span element) with this:


<A HREF="http://www.cecicasariego.com/img/imggroot/PAQdepp.gif"
rel="lightbox[roadtrip]" alt="Johhny Depp"
title=" Johnny Depp (for sale) [img 1/16]<br> aquarel on paper | 35 x 45 cm<p>"><span
title="Portrait Example">portraits</span></a>

But, given that you want your title for the lightbox display, and would perhaps like a different one for the mouseover, that will work out fairly well. You can make the words "Portrait Example" be whatever you like, this will be what you see onmouseover.

chechu
12-29-2007, 08:08 PM
Actually, I'd like to have nothing on mouseover. I have a .js script that doesn't show the url of the links on mouseover, and would like this one to be the same.

jscheuer1
12-29-2007, 09:32 PM
Just for your information, the alt attribute is invalid for the a tag and should be removed, it isn't doing anything anyway, it's for img tags and possibly for object, and embed tags - I missed that the first time. You can do this:


<A HREF="http://www.cecicasariego.com/img/imggroot/PAQdepp.gif" rel="lightbox[roadtrip]"
style="display:none"
title=" Johnny Depp (for sale) <br> aquarel on paper | 35 x 45 cm<p>">portraits</a>
<A HREF="http://www.cecicasariego.com/img/imggroot/PAQdepp.gif" rel="lightbox[roadtrip]"
title="">portraits</a>


The order is important. The display:none; one with the title should come first. This will only work for sure with lightbox series (rel="lightbox[[I]something]"), but that's what you have. Even if you have just one image, it can still work, because then you would have two links, and you could still use the [something] construct.

chechu
12-29-2007, 09:37 PM
<A HREF="http://www.cecicasariego.com/img/imggroot/PAQdepp.gif" rel="lightbox[roadtrip]"
style="display:none"
title=" Johnny Depp (for sale) [img 1/16]<br> aquarel on paper | 35 x 45 cm<p>" this.title="">portraits</a>

Is this possible ? Didn't know you could place twice <a> for the same link.

jscheuer1
12-29-2007, 09:47 PM
That's not an accurate quote of what I had.

What I had works, and it works because lightbox removes duplicates, and because of the way that lightbox removes duplicates (that's why the order of the links is important). On an ordinary page though, you can have 1000 or however many duplicate links you like, no problem.

I did make a typo though (will edit out from my previous post), this.title should simply be title:


<A HREF="http://www.cecicasariego.com/img/imggroot/PAQdepp.gif" rel="lightbox[roadtrip]"
style="display:none"
title=" Johnny Depp (for sale) [img 1/16]<br> aquarel on paper | 35 x 45 cm<p>">portraits</a>
<A HREF="http://www.cecicasariego.com/img/imggroot/PAQdepp.gif" rel="lightbox[roadtrip]"
title="">portraits</a>

But it doesn't seem to make any difference. Go with the correct syntax of just title though.