Log in

View Full Version : Changing display area in Lightbox Image Viewer v2.0


cre8tor
04-05-2007, 02:56 PM
1) Script Title: Lightbox Image Viewer v2.0

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

3) Describe problem:
Hello - I'm a neophyte at web design and have 3 questions re; this script which is incredible by the way.

First; I'd like to change the display area of the lightbox/image container from the default - centered on page to a specific area on my page. I've been able to move the display horizontally to the left by giving the lightbox div a width in pixels and a value for the left position. However I can't move the display vertically. I've tried experimenting with the top: value in the lightbox, image container & outer image container divs in the CSS file to no avail. Is it possible to specify a new dispaly area?

Second; I unable to get the previous and next buttons to display when I group my images per the instructions. Help

Finally; Is there any way to prevent IE from blocking the action of this script or any other script for that matter so that vistiors to my site don't get the annoying active X message? I'm fearful that visitors won't get the full effect I'm going for with my gallery because they won't allow the blocked content?

Thanks Mark
jscheuer1
04-05-2007, 03:27 PM
To change the top position:


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

You can use a negative value to move it up.

The next/previous thing works fine if done correctly, I'd need to see your code. Perhaps the paths to the next/previous images are invalid in your setup. If so, make sure you have put the images where indicated in the distribution archive.

The blocking you are talking about is probably only the local active X security feature:


Unless a user's security is really tight, that only happens locally, as a security measure. As far as IE is concerned, javascript is ActiveX. Click on the bar and click on allow and click on yes. Once your page is live, this will not happen. You can also give your page 'the mark of the web'. That way (in most cases) it will not display the security bar locally either. Put this right after your <html> tag like so:


<html>
<!-- saved from url=(0014)about:internet -->
<!-- this and above comment should be removed for live, non-demo use -->
<head>

But, navigating away from the page to another local page, or including another local page on it via a frame or an iframe can be problematical if said page does not also have 'the mark of the web' on it.
cre8tor
04-05-2007, 05:42 PM
Hey John,

You are the Master coder! The solution worked perfectly. Thanks for getting back to me so quickly.

I've attached the portion of my code dealing with the thumbnails in hopes that yu might be able to see why the next and prev buttons aren't showing. I only set up 3 links to test the script. Hope this is what you were referring to.


<div id="paintingsright">
<div id="newworkgallery">
<ul>
<li><a href="images/MH-0201.jpg" rel="lightbox[new_work]" title="BIG Painting"><img src="images/thumbs/MH-0201_tn.jpg" alt="thumbnail of painting" /></a></li>
<li><a href="images/MH-0202.jpg" rel="lightbox[new_work]" title="Orange Painting | 40x30 | acrylic on canvas"><img src="images/thumbs/MH-0202_tn.jpg" alt="thumbnail of painting" /></a></li>
<li><a href="images/MH-0203.jpg" rel="lightbox[new_work]" title="Letting Go | 40x30 | acrylic on canvas | 2007"><img src="images/thumbs/MH-0203_tn.jpg" alt="thumbnail of painting" /></a></li>
<li><img src="images/thumbs/MH-0204_tn.jpg" alt="thumbnail of painting" /></li>
<li><img src="images/thumbs/MH-0205_tn.jpg" alt="thumbnail of painting" /></li>
<li><img src="images/thumbs/MH-0209_tn.jpg" alt="thumbnail of painting" /></li>
<li><img src="images/thumbs/MH-0212_tn.jpg" alt="thumbnail of painting" /></li>
<li><img src="images/thumbs/MH-0216_tn.jpg" alt="thumbnail of painting" /></li>
<li><img src="images/thumbs/MH-0218_tn.jpg" alt="thumbnail of painting" /></li>
</ul>
</div>
jscheuer1
04-05-2007, 08:21 PM
No, nothing is jumping out at me. What I really meant and, I apologise for not being clearer, was that I would need a link to your live page in order to be certain of what the problem is with the next/previous thing.
cre8tor
04-05-2007, 08:54 PM
Hey John,

Thanks for taking the time to look. I'm new at the posting thing also and wasn't sure what you needed. When I get the pages live on my site I'll post again. I've now lost the close button in the lower right corner also.

Thanks again
Mark