Lightbox help please!

[teegirl13]

I was hoping if someone could help me with why the lightbox isn't loading. It pops the image in a new browser. I tried the same script on a dummy page and it did work. But on this page in my portfolio it doesn't. I'm pretty sure it has something to do with the fact it has several images in my body tage like (onload MM_preload images etc.) I think that may conflict and was hoping there was a way around it.

Link to lightbox code is..
http://www.dynamicdrive.com/dynamici...tbox/index.htm

My code can be found here..
http://www.cviscusi.com/cv_flower_website/arbor.htm

Any ideas? Thanks

[jscheuer1]

Why preload onload? Preload as you load, that way the images will be ready sooner. Onload conflicts are a common reason why scripts will not work together. I think f you go to the author's page for lightbox and look around, you will find information specific to these types of situations with that script.

Try:

http://www.huddletogether.com/projects/lightbox/

and scroll down to the troubleshooting comments.

[teegirl13]

Thanks. I did look there and I think I did what was explained about adding a piece of code to the very end of the body tag after the preload images.

BUT- now it works on my computer locally but not when I upload it to my server! It dims, and gives me the loading bar but never pops up the image. Any ideas why it won't work remotely?

[jscheuer1]

That is the classic symptom of the images not being available on the server. This can be more complex than one might at first imagine. But, first of all, did you upload your larger version images to the server? If not, you have to. Next, if you did, they must be in the exact location as specified in the hrefs of the links that are rel="lightbox". If you have all of this, or think you do, then probably the images have inconsistencies of case in their path and/or filenames. On a local computer for instance, .jpg is the same as .JPG - not so on the web, similarly:

images\photo.jpg

is often the same as:

images/photo.jpg

but on the web it must be:

images/photo.jpg

Other case issue apply:

My_photo.jpg

is different (on the web) than:

my_photo.jpg

etc.

If you need more help, please provide a link to your live page.

[teegirl13]

Thank you so much for writing that out for me. I'm embarrassed to say I hadn't uploaded the thumnail images. It hadn't worked for so many hours of me playing around with it I must have later forgotten to do that. I knew I was prob overlooking something stupid staring at it for so long but wow who would have thought that. Thanks for being patient with me and helping me get it right. I really appreciate it, noone else was writing back.

[brett wilson]

Hello- I also have a question about Lightbox;
I'd like to learn how to revise the script to make the lightboxes load a little higher in the browser page.

You can see an example HERE of what I mean.

I want that picture to load at the very top, allowing me to increase the size of my photos vertically and still be able to read the 'Close' remark at the bottom.

Can anyone point me in a right direction here?

- Much apprieciated.

[jscheuer1]

There are different ways, I am sure. The easiest is to apply a negative top margin style to the element containing the image and data. These differ among versions. The example you give uses light box 2.02 and this thread is about the original. For the original, it is the lightbox id itself that you need to use, example (from demo page's lightbox.css, addition red):

#lightbox{
	background-color:#eee;
	padding: 10px;
	border-bottom: 2px solid #666;
	border-right: 2px solid #666;
	margin-top:-80px;
	}

In lightbox v2.02, it is the outerImageContainer id:

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

Lightbox v2+ appears to start higher on the page to begin with.

[brett wilson]

Why thank you very much.
I didn't really consider altering the css... I figured it was a javascript issue, of which I know less than nothing.

Thank you again.

[jbert]

Commander cody So glad I found some lightbox2 actual help. I have succesfully installed Lightbox2 with the captioned links. When the link is clicked a new page opens. I would like the linked window in a lightbox also. I have insertes the rel="lightbox" at every place and it just will not do it. Is this because the other lightbox from the SET [vac] is still open???


can this be done please


Jim

[jscheuer1]

Commander cody So glad I found some lightbox2 actual help. I have succesfully installed Lightbox2 with the captioned links. When the link is clicked a new page opens. I would like the linked window in a lightbox also. I have insertes the rel="lightbox" at every place and it just will not do it. Is this because the other lightbox from the SET [vac] is still open???

can this be done please

I'm not sure I get you. You say you put rel="lightbox" at every place. This is usually an act of desperation, and at the same time tells me little about what you have actually tried. Also, I'm not clear what you are trying to open from the linked caption or if that is really what you are trying. It sounds like you are:

Opening a normal lightbox link with an image and a caption shown in the lightbox. You have somehow worked it out that the caption shown in the lightbox is itself a link. Now you want that link, when clicked to open in the lightbox.

If I have that much right, that can be done, if that second link is to an image. Lightbox only does images. But the second link cannot be made to open in the lightbox by using the rel="lightbox" attribute alone - because for that, the link must exist when the page loads, but you are creating it at the time that the caption is loaded into the lightbox.

Working on the demo page that comes with v2.03 of lightbox I put a script block in the head to define my caption link:

<script type="text/javascript">
var t1='<a href="photo9.jpg" rel="lightbox" title="Monalisa" onclick="myLightbox.start(this); return false;">Photo 9</a>';
</script>

And changed the demo link to:

<a href="images/image-1.jpg" rel="lightbox" onmouseover="this.title='test';" onmousedown="this.title=t1;"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>

This worked out pretty well, but as I say, the 'box from within the box link' must be to an image. I say 'pretty well', because there is a flickering of the overlay, but this can be easily fixed by editing lightbox.js and modifying the added link slightly, if this is what you are really trying to do.