Results 1 to 7 of 7

Thread: Help required with Lightbox image viewer 2.0

  1. #1
    Join Date
    Aug 2006
    Posts
    101
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default Help required with Lightbox image viewer 2.0

    1) Script Title: Lightbox image viewer 2.0

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

    3) Describe problem:

    See my website: http://www.arti-mo.com/shamajo/droomwenspim.htm

    In the center of the text/contents I have used the a.m. script for several pictures (see foto´s) of the event to be opened in a new window. The idea is that the screen is being filtered and the new windows is being put on top of that. For reasons I don't understand the "filter screen" is on top of the page as where the new window with the enlarged picture is in the right place. This means that you won't see the base screen filtered; you only see it when you scroll up.

    Does anyone know the solution?

    By the way: it works fine in FF, NS and OP.

    Although in NS you can see a dotted border of the area for next picture (Volgende >) and previous picture (< Vorige).
    And in OP I see a strange "null" in the Image Data Container.
    Is there a solution for these 'problems'?

    Thanks a lot,
    Monique
    Last edited by monique; 03-12-2007 at 02:00 AM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    With body styles like these:

    Code:
    body {
    	position:absolute;
    	width:900px;
    	margin-left:-450px;
    	left:50%;
    	background-color:#ffce00;
    	font-family:trebuchet,arial,helvetica,serif;
    	font-size:12px;
    	color:#25177a;
    	scrollbar-face-color:#ffce00;
    	scrollbar-highlight-color:#ffce00;
    	scrollbar-3dlight-color:#910d84;
    	scrollbar-darkshadow-color:#910d84;
    	scrollbar-shadow-color:#910d84;
    	scrollbar-arrow-color:#910d84;
    	scrollbar-track-color:#ffce00;
    }
    It is a wonder lightbox works very well in any browser. These types of styles should be (if used at all) be applied to a container element, ex:

    HTML Code:
    <body>
    <div id="container">
    The rest of your page here
    </div>
    </body>
    In NS (and sometimes in other browsers) dotted borders are to show the active link or other element on the page. They are a feature for mouseless navigation and so should usually just be tolerated. Folks who use one of these browsers for their primary are used to seeing them so, they don't really detract from the experience for most of them. They can be removed in most cases by setting the style of the link in question to:

    Code:
    outline-style:none;
    But, as I say, this is generally not a great idea. I don't thnk it should be done on your page.

    The null description in Opera is a bit of a bug. If you give your links title attributes, these will be shown in that space in all browsers or, I think you can give the links a one space title attribute:

    Code:
    <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
    or:

    Code:
    <a href="images/image-1.jpg" rel="lightbox" title=" ">image #1</a>
    The one space title will pop up a blank tool tip on hover in other browsers but, this can be avoided by giving the contained image a title or an empty title:

    Code:
    Code:
    <a href="images/image-1.jpg" rel="lightbox" title=" "><img src="some.jpg" alt="" title=""></a>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2006
    Posts
    101
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    Well John, I have put the 4 lines of the body styles now in a container called "bg" but it still doesn't work...

    I tried several other "things" but none of them work

    The other two issues I am not that worried about, but this is really a problem.

    Is there another solution?

    Monique

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    That change at least got the overlay rendering the entire width of the page on larger screens. I'm not sure if you were aware that was a problem.

    Your layout is still too full of styles that are confusing IE as to the true height of the page. These are probably the use of absolute positioning elsewhere in the styles, or floats, but could be other things as well. To track them all down, and change them and still have the page render as desired would be quite an effort although it could be done. Even so, there might still be a problem. So, instead, I've devised a bit of IE only javascript script and style that will take care of the problem (from your page's source code, addition red):

    Code:
    <link rel="alternate stylesheet" type="text/css" href="css/ie_printgroot.css" media="print" title="bigger" />
    <![endif]-->
    
    <script type="text/javascript" src="js/styleswitcher.js"></script> 
    
    <!-- het script voor de slideshow -->
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    <script src="js/prototype.js" type="text/javascript"></script>
    <script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
    <script src="js/lightbox.js" type="text/javascript"></script>
    <!--[if IE]>
    <script type="text/javascript">
    if(window.attachEvent){
    function lb_ie_ov_fix(){
    var truebod=document.compatMode && document.compatMode!="BackCompat"? document.documentElement : document.body;
    if(typeof overlay!=='undefined')overlay.style.top=truebod.scrollTop-50+'px'
    }
    window.attachEvent('onscroll', lb_ie_ov_fix);
    document.attachEvent('onmousedown', lb_ie_ov_fix);
    document.attachEvent('onkeydown', lb_ie_ov_fix);
    }
    </script>
    <style type="text/css">
    #overlay {
    padding:50px 0;
    }
    </style>
    <![endif]-->
    </head>
    
    <body>
    <div id="bg"> 
      <div id="voorwaard . . .
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Aug 2006
    Posts
    101
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    IT WORKS!!! You're really AMAZING!!!

    Wonderfull. If you would be around, we'd have a drink together...

    You've helped me and many handicapped people I am making this website for. Really GREAT!

    I still have a lot to learn...

    Many many thanks,
    Monique

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Since I had a mock up of your page, I decided to try the Opera fix I suggested and it works. Here is an example of a lightbox link with the added attributes:

    Code:
    <a href="afbeeldingen/wenspim/foto001.jpg" rel="lightbox[pim]" title=" "><img alt="" title="" src="afbeeldingen/wenspim/foto001k.jpg" class="solid" alt="wens Pim foto 1" /></a>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Aug 2006
    Posts
    101
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    You were allright again!

    Thanks very much - also on behalf of the Wish Foundation Shamajo!

    Monique

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
  •