Absolute position Lightbox

JavaScript
1

Hello all,

I’m working on a portfolio section for one of our clients. I need the foto’s to be displayed in a specific area in the webpage using lightbox. Now the images are dispolayed but not on a absolute position. Scrolling the page or viewing it on different screen resolutions result in different positions of the photo’s.

Here is the link to a page with thumbnails. You can click on one of them. http://www.taka-kata.com/portfolio/Decibel The idea is that the picture will cover the flash video.

Hopefully someone can help me out?

btw, this is the lightbox css


#lightbox{
    position: absolute;
    width: 100%;
    z-index: 100;
    text-align: center;
    line-height: 0;
    margin:0px;padding:0px
    }

#lightbox a img{ border: none; }

#outerImageContainer{
    position: relative;
    width: 351px;
    height: 150px;    
    top: 80px;    
    left:50%;
    margin-left:-212px;
    background-color: #fff;
    }
* html #outerImageContainer     {top: 79px;}
#imageContainer{
    padding: 2px;
    }

#loading{
    position: absolute;
    top: 40%;
    left: 0%;
    height: 25%;
    width: 100%;
    text-align: center;
    line-height: 0;
    }
#hoverNav{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10;
    }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
    width: 49%;
    height: 100%;
    background: transparent url(/styles/takayamav1/images/blank.gif) no-repeat; /* Trick IE into showing hover */
    display: block;
    }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(/styles/takayamav1/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/styles/takayamav1/images/nextlabel.gif) right 15% no-repeat; }


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

#imageData{
    padding:0 2px;
    display:none
    }
#imageData #imageDetails{display:none; width: 70%; float: left; text-align: left; }    
#imageData #caption{ font-weight: bold;    }
#imageData #numberDisplay{ display: none; clear: left; padding-bottom: 2px;    }            
#imageData #bottomNavClose{  display: none;width: 66px; float: right;  padding-bottom: 2px;    }    
        
#overlay{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 90;
    width: 100%;
    height: 500px;
    display:none;
    background-color: #000;
    filter:alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
    }
    

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    }

* html>body .clearfix {
    display: inline-block; 
    width: 100%;
    }

* html .clearfix {
    /* Hides from IE-mac \\*/
    height: 1%;
    /* End hide from IE-mac */
    }
2

why don’t you use something more simple. For example - add to each link onlick=“some_funktion();”. And the funktion will make visible image which is already absolutely positioned on the place where the flash is but will hidden property. So when you click on a link a funktion will make that image be visible.

3

Hi,

You seem to be using the lightbox but not using any of its features :slight_smile:

I think you will need to change the javascript to get the element to display where you want as it seems it is basing its top position on how far the page has scrolled so that the image is kept within the window. You would need to ask in that javascript forum if you want the script altered as changing the css seems to have no effect on the top position.

However if you do implement your version then the image will appear above the top of the screen if the page has scrolled down and that seem a bit silly.

It seems to me that if you want to use that lightbox then you should use it in the way that it was intended with the image always appearing in the viewport and the screen faded to allow the image to be viewed.

If you just want to place the image in the same place without any of the effects of the lightbox then a simple javascript hide and show would do the trick as mentioned above.

4

I would love to, it’s just that i am not familiar with javascript and this lightbox feature works very well. Also the images are uploaded through a Content Management System and the pages are not created manually.

5

I don’t agree, i do uses the loader, the transitions and the next and previous functions. The only thing that is not used is the layer with opacity. :slight_smile:

But what is true is that i just want the larger image to be displayed in a specific, absolute positioned part of the website. The pages are however dynamic (not created manually but using a CMS with photoalbum module) and i have no idea how to do this in a different way as using Lightbox.

6

I don’t agree, i do uses the loader, the transitions and the next and previous functions.

I was looking in ie6 and your image is only half visible as it extends off the right side of the window and therefore I didn’t see any of those things :slight_smile:

and i have no idea how to do this in a different way as using Lightbox.

I’m guessing you need to change the scroll offset to zero.

e.g.


function getPageScroll(){

    var yScroll;

    if (self.pageYOffset) {
        yScroll = self.pageYOffset;
    } else if (document.documentElement && document.documentElement.scrollTop){     // Explorer 6 Strict
        yScroll = document.documentElement.scrollTop;
    } else if (document.body) {// all other Explorers
        yScroll = document.body.scrollTop;
    }

    arrayPageScroll = [B]new Array('',0) [/B]
    return arrayPageScroll;
}

and you’d need to offset ie back to the centre.


#lightbox{
    position: absolute;
    width: 100%;
    z-index: 100;
    text-align: center;
    line-height: 0;
    margin:0px;padding:0px;
 [B]   left:0;[/B]
    }

#lightbox a img{ border: none; }

#outerImageContainer{
    position: relative;
    width: 351px;
    height: 150px;    
    top: 80px;    
    left:50%;
    margin-left:-212px;
    background-color: #fff;
[B]text-align:center[/B]
}
[B]* html #outerImageContainer     {margin-left:-70px;left:0}[/B]
#imageContainer{
    padding: 2px;
    }

Although I haven’t been able to test that exactly and javascript isn’t my area :slight_smile:

You have a partial doctype which means ie is working in quirks mode and uses the broken box model which will also give you differences in ie6-.

Use a full doctype for ie6 and then you only have ie5.+ to worry about with box model issues.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
7

Thanks Paul, i tried it but i didn’t help much. Still the image loads on a relative position on the screen. I think you;re right the problem is the Javascript and not the CSS. Do you know how i can move this topic to the another forum?

Once this is working it could also be a very usefull solution to many other websites i guess.

8

Thanks Paul, i tried it but i didn’t help much. Still the image loads on a relative position on the screen.

I tested this locally and it was working. Did you find and change that javascript code as I instructed?

Looking at the javascript code online it seems you haven’t changed it.

It still shows this:


arrayPageScroll = new [B]Array('',yScroll) [/B]
	return arrayPageScroll;
9

Moved to javascript Forum

10

Comment-out line 351 of “lightbox.js”, just to see what happens. It might give you css-control of the ‘lightbox’ element’s position.


var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 15);
//Element.setTop('lightbox', lightboxTop);
Element.show('lightbox');
11

Thanks a lot Mike!
This was it, everything is working just fine now!

12

:slight_smile: :tup:

Btw, it’s always nice to see Paul in the Javascript forum. We don’t respect him because he has a green badge. It is he (and the other greenies) who make that badge a very respectable symbol. Thanks, Paul.

13

Btw, it’s always nice to see Paul in the Javascript forum

Thanks Mike… Yes - they don’t let me out much these days :slight_smile: