SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Hybrid View

  1. #1
    SitePoint Addict langedav's Avatar
    Join Date
    Apr 2002
    Location
    Rotterdam, The Netherlands
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Absolute position Lightbox

    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
    HTML Code:
    #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. #2
    SitePoint Enthusiast S.Vasiliy's Avatar
    Join Date
    May 2006
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Addict langedav's Avatar
    Join Date
    Apr 2002
    Location
    Rotterdam, The Netherlands
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by S.Vasiliy View Post
    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.

    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.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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

    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.

  5. #5
    SitePoint Addict langedav's Avatar
    Join Date
    Apr 2002
    Location
    Rotterdam, The Netherlands
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

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

    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.
    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.

    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. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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

    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.

    Code:
    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 = new Array('',0) 
        return arrayPageScroll;
    }
    and you'd need to offset ie back to the centre.

    Code:
    #lightbox{
        position: absolute;
        width: 100%;
        z-index: 100;
        text-align: center;
        line-height: 0;
        margin:0px;padding:0px;
        left:0;
        }
    
    #lightbox a img{ border: none; }
    
    #outerImageContainer{
        position: relative;
        width: 351px;
        height: 150px;    
        top: 80px;    
        left:50%;
        margin-left:-212px;
        background-color: #fff;
    text-align:center
    }
    * html #outerImageContainer     {margin-left:-70px;left:0}
    #imageContainer{
        padding: 2px;
        }
    Although I haven't been able to test that exactly and javascript isn't my area

    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.

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

  7. #7
    SitePoint Addict langedav's Avatar
    Join Date
    Apr 2002
    Location
    Rotterdam, The Netherlands
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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:
    Code:
    arrayPageScroll = new Array('',yScroll) 
    	return arrayPageScroll;

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Moved to javascript Forum

  10. #10
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Comment-out line 351 of "lightbox.js", just to see what happens. It might give you css-control of the 'lightbox' element's position.

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

  11. #11
    SitePoint Addict langedav's Avatar
    Join Date
    Apr 2002
    Location
    Rotterdam, The Netherlands
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MikeFoster View Post
    Comment-out line 351 of "lightbox.js", just to see what happens. It might give you css-control of the 'lightbox' element's position.

    Code:
    var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 15);
    //Element.setTop('lightbox', lightboxTop);
    Element.show('lightbox');
    Thanks a lot Mike!
    This was it, everything is working just fine now!

  12. #12
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


    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. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Btw, it's always nice to see Paul in the Javascript forum
    Thanks Mike..... Yes - they don't let me out much these days


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •