Hi all,

 

I have adapted some code that I used once to display some text about an image when you hover your mouse over the image. Instead of showing text it now shows a bigger version of the thumbnail image. However, the further right you go on the page, the images start to dissappear and you have to scroll across to see them. Can anyone tell me how to make the images on the right hand side of the pages display the rollover image to the left of the thumbnail instead? below is a link to the page in question - have a look at the source code.

 

http://www.chemlineuk.com/gallery.htm

 

Thanks

 

Dan

Dan,

 

This isn't a solution to this particular problem, but a suggestion for avoiding the problem entirely. How about having one fixed box where the rollover images appear, instead of having it always appear under the image. Then you can use your Javascript to make the one box change to whichever image is highlighted. You can float this box to the left, or have it below, or whatever, because it would be static.

 

Darren

Dan,

 

This isn't a solution to this particular problem, but a suggestion for avoiding the problem entirely. How about having one fixed box where the rollover images appear, instead of having it always appear under the image. Then you can use your Javascript to make the one box change to whichever image is highlighted. You can float this box to the left, or have it below, or whatever, because it would be static.

 

Darren

 

how about this:

 

http://www.chemlineuk.com/gallery.htm

 

Dan

Yeah that's a good solution, lightboxes are pretty good. Although personally I'd prefer (as a user) to have one which has Previous and Next controls - makes it easier than opening one, closing it, opening another, etc.

 

Darren

Yeah that's a good solution, lightboxes are pretty good. Although personally I'd prefer (as a user) to have one which has Previous and Next controls - makes it easier than opening one, closing it, opening another, etc.

 

Darren

 

i agree, however i havent found a simple way of doing that and I am at best a code plagerist!

 

secondly i am now having problems with what I have already done - have a look - all my magnifying images arent on the corners of the pics now arrrrrgghhhhh. any ideas now?

Dan,

 

I'm surprised a lightbox software is using absolute positioning for something like these images. It's not a good method of doing it, and is prone to looking wrong as soon as something else changes on the page and pushes the images down/up, which it looks like has happened here.

 

My recommendation is you find another lightbox program to use (a simple but effective one is Slimbox), but if you want to continue using this one, you're going to have to edit the CSS to make these magnifying icons fit in place. You should add:

 

.enlargecaption {
margin-left:5px;
margin-top:-13px;
}

 

...to your CSS sheet to align all the icons to the bottom left. As previously mentioned, be aware that if you add another paragraph above the images for example, the images will move down but the icons will remain in the same place. You'll have to change the CSS sheet again to compensate. This is why absolute positioning sucks for this kind of use.

 

Let me know if you have any further issues with it, but please consider my recommendation, I think it'll save you some time and a pretty bad headache keeping everything inline.

 

Darren

Dan,

 

I'm surprised a lightbox software is using absolute positioning for something like these images. It's not a good method of doing it, and is prone to looking wrong as soon as something else changes on the page and pushes the images down/up, which it looks like has happened here.

 

My recommendation is you find another lightbox program to use (a simple but effective one is Slimbox), but if you want to continue using this one, you're going to have to edit the CSS to make these magnifying icons fit in place. You should add:

 

.enlargecaption {
margin-left:5px;
margin-top:-13px;
}

 

...to your CSS sheet to align all the icons to the bottom left. As previously mentioned, be aware that if you add another paragraph above the images for example, the images will move down but the icons will remain in the same place. You'll have to change the CSS sheet again to compensate. This is why absolute positioning sucks for this kind of use.

 

Let me know if you have any further issues with it, but please consider my recommendation, I think it'll save you some time and a pretty bad headache keeping everything inline.

 

Darren

 

Just googled Slimbox and I cant get my head around it. I am good with HTML - anything else is cutting and pasting and tinkering for me. I have looked at what you said above and edited what I thought but the whole thing has gone pear shaped!

I'd recommend you take the time to use Slimbox - the vast majority of it is HTML anyway, you shouldn't need to do anything with Javascript, and you appear to have CSS knowledge, that's all there is to it. There is some usage text on the website to explain how integrate it, which basically boils down to just a few steps:

- Upload all the relevant files to your server

- Include the CSS and Javascript files in your header

- Include the rel="lightbox" code into your links and you're good to go

 

If you're determined to stick with the current gallery then I don't think I can help you as I think you're going to come across more problems when you try to get your site working in older browsers, which using absolute positioning is going to make difficult.

 

Darren

I'd recommend you take the time to use Slimbox - the vast majority of it is HTML anyway, you shouldn't need to do anything with Javascript, and you appear to have CSS knowledge, that's all there is to it. There is some usage text on the website to explain how integrate it, which basically boils down to just a few steps:

- Upload all the relevant files to your server

- Include the CSS and Javascript files in your header

- Include the rel="lightbox" code into your links and you're good to go

 

If you're determined to stick with the current gallery then I don't think I can help you as I think you're going to come across more problems when you try to get your site working in older browsers, which using absolute positioning is going to make difficult.

 

Darren

 

Thanks Darren.

 

I have ditched the old way I was doing things but now I am left struggling to get lightbox to work. Is there any chance you or anyone else can give me a step by step hand in getting it to work.

 

So far I have download lightbox, added CSS and JS and Image files (currently in folder also) into the offline folder where my html pages and "pics" folder containing my site graphics are.

 

I have copied the 2 javascript lines into the header of the page and the second sets of html into the body where i want the gallery. All that happens is I get some thumbnails that once clicked it opens a single large image way down on the bottom of the same page with a close button under it.

 

I am getting so frustrated as it appears so simple to look at so why doesnt it F$%*%*!g work!!!!!!

link to my test pages so you can see whats going on:

 

http://www.chemlineuk.com/gallery2.htm

Hey Dan,

 

No worries, we're here to help.

 

I can see straight away you're not referencing the Lightbox CSS file properly. Remove the <style></style> from the header, it's not needed when you're linking to an external file. I think you'll find a bit of an improvement then

 

Darren

Darren,

 

Has anyone ever mentioned that you are a genius......

 

Thank you so so much

 

Dan

No problem Dan, this is why we're here.

 

Do me a favour and +1 my post that helped you? Helps my Rating on this site. Thanks!

 

A couple of tips about using Lightbox:

- Add the code title="My Image" to your <a> to include a caption in the lightbox image, e.g. <a href="image.jpg" title="My Image">...</a>

- If you have more than one image you can link them into a Gallery by amending the rel="lightbox" to rel="lightbox[galleryname]" instead. This will mean that Previous / Next buttons will appear in the Lightbox to scroll between them.

 

Good luck, and feel free to PM me if you have any problems.

 

Darren

No problem Dan, this is why we're here.

 

Do me a favour and +1 my post that helped you? Helps my Rating on this site. Thanks!

 

A couple of tips about using Lightbox:

- Add the code title="My Image" to your <a> to include a caption in the lightbox image, e.g. <a href="image.jpg" title="My Image">...</a>

- If you have more than one image you can link them into a Gallery by amending the rel="lightbox" to rel="lightbox[galleryname]" instead. This will mean that Previous / Next buttons will appear in the Lightbox to scroll between them.

 

Good luck, and feel free to PM me if you have any problems.

 

Darren

 

 

No Problem - one final question if you dont mind? at the moment the expanded image is appear directly under the menu bar of explorer as if it is "snapped" to the very top of the page. How do I move it down a bit?

 

Dan

I'm not quite sure why IE is pushing it right to the top. It could be because there isn't much available vertical space for it. Try adding a dozen <br> after the image gallery to increase the vertical space and see if it works then.

 

Darren

I'm not quite sure why IE is pushing it right to the top. It could be because there isn't much available vertical space for it. Try adding a dozen <br> after the image gallery to increase the vertical space and see if it works then.

 

Darren

 

No Joy. Do you think it is something in the CSS file?

Fixed - found it in the CSS:

 

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

 

change margin: 20 to whatever you want (was 0)

 

Thanks again Darren you have been a huge help.

 

Dan

Ahh nice one, I was just trying to work out the problem myself.

 

Good luck,

 

Darren

Ahh nice one, I was just trying to work out the problem myself.

 

Good luck,

 

Darren

 

oh - not quite the solution - that is just increasing the margin around the whole image maing the title/close bar have a gap between it and the image. still tinkering - if you work it out let me know and vice versa.

 

Cheers mate

 

I owe you a pint!!

Ahh right OK. I saw that you're not using a DOCTYPE - that might be the problem.

 

Insert this into the very first line of code (it should be before everything else in the code):

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Ahh right OK. I saw that you're not using a DOCTYPE - that might be the problem.

 

Insert this into the very first line of code (it should be before everything else in the code):

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

Ever thought of being a detective?

 

Fixed!!

 

Thanks again Darren

Good to hear it, feel free to PM me if you can't get help from the boards for something.

 

Darren

Dan,

 

This isn't a solution to this particular problem, but a suggestion for avoiding the problem entirely. How about having one fixed box where the rollover images appear, instead of having it always appear under the image. Then you can use your Javascript to make the one box change to whichever image is highlighted. You can float this box to the left, or have it below, or whatever, because it would be static.

 

Darren

 

Actually there is a solution mate, it involves CSS 3 selectors or javaScript to detect the current mouse position.

 

WIthout researching it as i've never needed to do this, you would look at :last-child in CSS 3 and the jQuery version would be something like this coming from jQuery docs.

 

$(document).mousemove(function(e){ $('#status').html(e.pageX +', '+ e.pageY); });

 

lightboxes are beautiful good quality. Although personally I'd prefer (as a user) to have one which has earlier and Next controls - makes it easier than opening one, closing it, opening another, etc.