Results 1 to 7 of 7

Thread: Nagging issue with Lightbox 2

  1. #1
    Join Date
    Jul 2006
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Nagging issue with Lightbox 2

    1) Script Title: Lightbox image viewer 2.03a

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

    3) Describe problem: A specific problem I am having with this code and IE.

    Works great in Firefox and Safari

    Please see the code working on this page:-
    http://myweb.tiscali.co.uk/design_jo...URGH/index.htm

    When you maximize the image to the bottom left the screen alpha overlay does not fill the whole iframe when using IE. (see next top scroll bar)

    Looks great in Firefox and Safari .....erm... Well it did look great in Safari however its not displaying the iframe at all at the moment due to another issue on another thread.

    I think the problem is something to do with either tables or scroll bars....?!#?

    Im very much a cut and paste novice.... Im running out of things to alter by trial and error at the moment...

    Any Ideas as to why IE wont display correctly ?

    many thanks
    Jon
    Last edited by its_jon; 04-01-2008 at 08:56 PM.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Inside the IFRAME page itself, try adding a valid doctype to the very top in the source:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    This may or may not help, but worth a try.

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

    Using the IE developer toolbar, I set the margin of the page in the iframe to 0. That took care of it. You have some errors on that page as well that should be avoided. The one that jumped out at me is:

    Code:
    <style type="text/css">
    img {
    border-width: 1px;
    border-color: #cccccc;
    border-style: solid;
    }
    <style type="text/css">
    
    
    
    <style type="text/css">
    h1 {font-size: 100%}
    h2 {font-size: 110%}
    p {font-size: 80%}
    </style>
    You cannot open another style block inside of an already opened style block.

    So, avoiding something like that, make a new style block:

    Code:
    <style type="text/css">
    body {
    margin:0;
    }
    </style>
    in the head of the page.

    If you want the page to have a margin, you can use a container division:

    Code:
    <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#808080" VLINK="#808080" ALINK="#FF0000">
    <div style="margin:11px;">
    
    The rest of the stuff from inside the body can go here
    
    </div>
    </BODY>
    </HTML>
    - John
    ________________________

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

  4. #4
    Join Date
    Jul 2006
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thanks Very much !

    Working now !

    http://myweb.tiscali.co.uk/design_jo...URGH/index.htm

    Although this site looks basic at the moment its been the most difficult for me as this time I have been trying my best to make it look simple
    As more of a gfx person if something goes wrong with the code (If I cut some code leaving a bit behind - possibly partly what happened here) I struggle to find my way back if I initially miss the error.

    So cheers !

    I have another very very minor issue with the lightbox.....

    I was wanting to make the background white and fully opaque.
    I can not find a config for the level of transparency.

    I have achieved it in IE by setting one of the numbers in the effects file from 100 to 200

    HTML Code:
    Element.setStyle(element, {opacity: value});
        if(/MSIE/.test(navigator.userAgent))  
         Element.setStyle(element, 
           { filter: Element.getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'') +
                     'alpha(opacity='+value*100+')' });
    from +value*100+

    to

    +value*200+

    But.... this does not work for Firefox. Turning the background white is easy... in the css file... I thought itmay also be easy to set the background Opaque .

    Lastly.... The option to set the caption as a hyperlink is very welcome. Is it also possible to use this hyperlink option to trigger the printing of the enlarged image ?
    I used
    <a href="JavaScript:window.print();">
    at this point and the hyperlinked caption (I named print imaga) did trigger the print command however the whole page printed followed by the enlarged image....It would be great to print only the enlarge image.... I dont know if its possible... but I can envisage that im probably missing something simple here.

    Many Regards
    John
    Scotland.
    Last edited by its_jon; 04-02-2008 at 07:56 AM. Reason: I blamed IE instead of Firefox 2nd off last paragraph

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

    To make the overlay opaque in FF (in lightbox.css):

    Code:
    #overlay{
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: 90;
    	width: 100%;
    	height: 500px;
    	background-color: #ccc;
    	opacity:1.0!important;
    	}
    That will override the script initiated changes in opacity of the overlay for FF, Opera, Safari, perhaps others, not IE.

    A page's appearance when printing can be controlled by a print stylesheet (there are other ways, but this is the best IMO). I already addressed this for lightbox elsewhere in the forum. See:

    http://www.dynamicdrive.com/forums/s...28&postcount=3

    And for something extra:

    http://www.dynamicdrive.com/forums/s...94&postcount=3
    - John
    ________________________

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

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    its_jon (04-02-2008)

  7. #6
    Join Date
    Jul 2006
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Working !... nearly

    Thanks for the code... Im not sure I have used it correctly though.

    The print button works excellent on the expanded lightbox image now....
    The trouble now is that I also have a 'print page' option..... And its only printing the image when you click it.... not the full page...

    ?? .... either I used the code wrong or maybe I have to be more specific now with the print page code ?

    Looking good though...plus full opacity in IE
    http://myweb.tiscali.co.uk/design_jo...URGH/index.htm

    Many thanks,
    John

  8. #7
    Join Date
    Jul 2006
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    I could not get it to work in the end... it was either a case of printing out an image or printing out the full page with the enlarged as well.

    So I came up with a 3rd option..... which also needs some refinement so I have started a new thread about the Tabbed Document Viewers code which is now the main function itself.

    Many thanks for all the help for the viewer !.... im really very very happy and im sure the people of Jedburgh will be happy with their site as it is a non profit organization putting the site together.

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
  •