Lightbox 2 description text

[Hound]

Hello,

I recently found dynamic drive and have been VERY impressed.
My background is in graphics and only know HTML. This site has been very helpful with adding a professional level to my websites.

My experience with javascript was minimal at best. I needed a gallery and Lightbox2 did the trick perfect!

I was so proud of myself when playing with the code I was able to figure out that you could use HTML code inside the title=""

My questions are:
Is there a way to change the font color? the typical way is not working.
When putting the text into a title code, it gives a yellow fly out box when hovering over the picture on the website... how do i stop this from happening (it is also displaying the html code aswell)

Hope those make sense.

Thanks for all the great work! Keep it up!!

[jscheuer1]

Formatting the text would be done in the stylesheet (lightbox.css). These are the style you would want to adjust:

#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	}

#imageData{
	padding:0 10px;
	}
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}

Keep a copy of the original values just in case you really mess up and want to start over.

Now about avoiding the flyout - if memory serves, the title of the link determines the text. If you are using an image as the trigger, set its title and alt to empty strings. If you are using just text, enclose it in a span and give it an empty title attribute, examples -

image trigger:

<a href="someimage.jpg" rel="lightbox" title="Some Image - Cool!"><img src="trigger.jpg" border="0" alt="" title=""></a>

text trigger:

<a href="someimage.jpg" rel="lightbox" title="Some Image - Cool!"><span title="">Click for Some Image</span></a>

I'm not sure about the text trigger but, is the best shot I can think of. The image method I've used and it works.

[Hound]

You are my hero. trying it tonight

[Hound]

now for another tricky question... how would i put a link in the discription.. having the </a> jacks it up i think.

[jscheuer1]

That is tricky. I played around with this a bit and this worked in Opera 9.01, FF 1.5.0.9 and IE 7:

<a href="images/image-1.jpg" rel="lightbox" onmousedown="this.title='<a href=\'http://www.google.com/\'>Google<\/a>';" onmouseout="this.title=''"><img src="images/thumb-1.jpg" width="100" height="40" alt=""></a>

[Hound]

Man, i cant wait to try this at home
MANY MANY THANKS

[Hound]

Ok...
SOooooooOOOo close... Here is the code i am using

<a href="artwork/illustration/OilForFood.jpg" rel="lightbox"
onmousedown="this.title=
'<h4>Oil For Food<\/h4>

Editorial illustration to accompany a column about the U.N.\'s Oil-for-Food scandal that ran in the Pittsburg State University Collegio on October 14th of 2004.

<br><br>

<a href=\'http://www.google.com/\'>Google<\/a>';" onmouseout="this.title=''">

<img src="artwork/illustration/OilForFood_mini.jpg" width="100" height="100" border="0" alt="" title="" />
</a>

The ONLY problem I have is that the word google cannot be seen. I.e. It's white on whit background.

[jscheuer1]

I'm not sure about all those physical line-breaks in your code that might just be from the way you pasted it into the message (not the <br> tags) but, if the colors are not to your liking, it has something to do with how the style and/or links are set on your page. I tried this using the demo and got a default link (blue or purple if 'visited').

[Hound]

Ok, the reason those links were white on white is because in my other external css I have the hyperlinks white...

So my new question is, in the lightbox.css can i define the color of the links style? Will the pop up pictures look at the lightbox.css first?

[jscheuer1]

Why not? Try this in lightbox.css -

#imageData{
	padding:0 10px;
	}
#imageData a, #imageData a:visited, #imageData a:active {
color:black;
	}
#imageData a:hover {
color:red;
text-decoration:none;
}
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ fon . . .