SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbox Print Option?

    Hi,

    I was wondering if any has done or know examples of a lightbox 2 script with print options?

  2. #2
    SitePoint Evangelist hexburner's Avatar
    Join Date
    Jan 2007
    Location
    Belgium
    Posts
    591
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't think of any examples with a print option, but you should be able to add that funcationality yourself.

    First create a stylesheet for media=print where you hide all elements, and add a rule to the bottom of the stylesheet to display the Lightbox image:
    Code CSS:
    * {
        display: none;
    }
    html, body, #lightbox, #outerImageContainer, #imageContainer, #lightboxImage {
        background: none;
        display: block;
        left: 0px;
        margin: 0px;
        padding: 0px;
        position: relative;
        top: 0px;
    }

    Add the stylesheet in the HTML of your page:
    HTML Code:
    <head>
        ...
        <link media="print" type="text/css" href="print-lightbox.css" rel="stylesheet">
        ...
    </head>
    Create an image for the print-button, and add an image reference:
    Code JavaScript:
    ...
    fileBottomNavCloseImage: 'images/closelabel.gif', // Search for this line
    fileBottomNavPrintImage: 'images/printlabel.gif', // And add this line
    ...

    Then add a print-button next to the close-button in the Lightbox container.
    To do so, replace the following:
    Code JavaScript:
    Builder.node('div',{id:'bottomNav'},
        Builder.node('a',{id:'bottomNavClose', href: '#' },
            Builder.node('img', { src: LightboxOptions.fileBottomNavCloseImage })
        )
    )

    With:
    Code JavaScript:
    Builder.node('div',{id:'bottomNav'}, [
        Builder.node('a',{id:'bottomNavPrint', href: '#' },
            Builder.node('img', { src: LightboxOptions.fileBottomNavPrintImage })
        ),
        Builder.node('a',{id:'bottomNavClose', href: '#' },
            Builder.node('img', { src: LightboxOptions.fileBottomNavCloseImage })
        )
    ])

    Next, bind an onclick-event to the print-button you've just added:
    Code JavaScript:
    ...
    $('bottomNavClose').observe('click', (function(event) { event.stop(); this.end(); }).bind(this)); // Search for this line
    $('bottomNavPrint').observe('click', (function(event) { event.stop(); window.print() }).bind(this)); // And add this line
    ...

    And voila, we're done...
    FOR SALE: 1 set of morals, never used, will sell cheap

  3. #3
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent, thorough directions

    One issue, I am not able to get the image to print? I thought maybe specificity was the issue and removed the commas from the print sheet, but that didn't help either.

  4. #4
    SitePoint Evangelist hexburner's Avatar
    Join Date
    Jan 2007
    Location
    Belgium
    Posts
    591
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've got an example of lightbox with a print button up and running on http://sandbox.tse-webdesign.be/lightbox-print/

    You can download it from: http://sandbox.tse-webdesign.be/ligh...tbox-print.zip

    Hope that helps ;o)
    FOR SALE: 1 set of morals, never used, will sell cheap

  5. #5
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmmmm...can't seem to figure it out, still print a blank page. Here it is on our staging server (link removed), 'load table' list has the lightbox feature
    Last edited by Siebird; Jul 8, 2008 at 18:44. Reason: removed link

  6. #6
    SitePoint Evangelist hexburner's Avatar
    Join Date
    Jan 2007
    Location
    Belgium
    Posts
    591
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Apparently I forgot that the container surrounding the lightbox image has an inline style property set for the top and left offset.
    But, good news, you can just modify the stylesheet to make it work properly.

    Change this:
    Code CSS:
    html, body, #lightbox, #outerImageContainer, #imageContainer, #lightboxImage {
        ...
        position: relative;
        ...
    }

    To:
    Code CSS:
    html, body, #lightbox, #outerImageContainer, #imageContainer, #lightboxImage {
        ...
        position: fixed;
        ...
    }
    FOR SALE: 1 set of morals, never used, will sell cheap

  7. #7
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent, the whole script is very clever! Learned a lot

    Not sure if this can be done or not, but is there a way of dynamically setting the print style for the lightbox versus the entire page. The only reason I was thinking this is if someone wants to print the entire page?

  8. #8
    SitePoint Evangelist hexburner's Avatar
    Join Date
    Jan 2007
    Location
    Belgium
    Posts
    591
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, that's something I could have guessed )

    I've renamed the stylesheet css/print.css to css/lightbox-print.css in this example.

    Replace:
    Code JavaScript:
    $('bottomNavPrint').observe('click', (function(event) { event.stop(); window.print(); }).bind(this));

    With:
    Code JavaScript:
    $('bottomNavPrint').observe('click', (function(event) {
        event.stop();
        var objHead = $$('head')[0];
        objHead.appendChild(Builder.node('link',{id:'lightboxPrintSheet',media:'print', type:'text/css', href:'css/lightbox-print.css',rel:'stylesheet'}));
        window.print();
        setTimeout("$$('head')[0].removeChild($('lightboxPrintSheet'))", 2000);
    }).bind(this));

    When clicking the print button in Lightbox, a stylesheet for media=print is added, and should override previous stylesheets for printing.
    After two seconds (the print dialog needs time to load, I figured 2 seconds is enough time), the stylesheet is removed again.
    This way you can still print the entire webpage.

    Note: The ZIP-file and the online example have been updated.
    FOR SALE: 1 set of morals, never used, will sell cheap

  9. #9
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome, Thanks for all the help

  10. #10
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey hexburner,

    This is a great script however it doesn't seem to work in IE6 on the PC or Safari on the Mac (IE7 on the PC and FF on the Mac work great). Printing from the page works, but you get a blank page when printing the lightbox.

    Any thoughts on how to make it work cross-browser and cross-platform?

    Thanks!

  11. #11
    SitePoint Member
    Join Date
    Mar 2009
    Location
    Texas
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ap_brian View Post
    Hey hexburner,

    This is a great script however it doesn't seem to work in IE6 on the PC or Safari on the Mac (IE7 on the PC and FF on the Mac work great). Printing from the page works, but you get a blank page when printing the lightbox.

    Any thoughts on how to make it work cross-browser and cross-platform?

    Thanks!
    As a follow up, my laptop that still has IE 6 on it printed the lightbox with no issues, other than printing a page for the lightbox and a separate page for the web page the lightbox is located.

    Also checked Safari 3.2.2 and it printed the content of the lightbox just fine, no issues, and only the lightbox contents.

    I further checked K-meleon browser and prints out fine no issues, just lightbox content.

    And of course I checked Firefox 3.0.7 and no issues, the same for IE7.

  12. #12
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey,
    this is really great script but it seems not working IE(no lightbox seen only an image on the white page) in FF its great.
    but help me on this so, that it works in IE also

  13. #13
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Same issues with IE6 and FF, anyone have a solution?!?

  14. #14
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First, thank you for this useful post, I know, it's a little bit old.

    The print option works great on all the browsers except one.. Google Chrome.

    Is there any way to make it compatible with this browser too.

    Thank you for your time.

    Jeremie

  15. #15
    SitePoint Member
    Join Date
    May 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got this to work by making the div large enough to cover everything and setting its background color to white. This is the style rules for the div I want to print.
    @media print{
    div#iwannaprint {
    background:white;
    width:100&#37;;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:99999;}
    }

  16. #16
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can not get this script to print the title for the image.
    Could you take a look and see what the problem might be.
    The site is at ourhousedesigns dot com
    Last edited by chadritchie; Jun 19, 2009 at 18:42.

  17. #17
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Hi, You seem I have a picture that is 650*600, but when i bring out the image the image covers the entire container, How do i increase the container. i've tried everything I know.

    thank you

  18. #18
    SitePoint Member
    Join Date
    Nov 2008
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by hexburner View Post
    I've got an example of lightbox with a print button up and running on http://sandbox.tse-webdesign.be/lightbox-print/

    You can download it from: http://sandbox.tse-webdesign.be/ligh...tbox-print.zip

    Hope that helps ;o)
    I know this thread is a blast from the past but I wanted to thank hexburner - script works well.

  19. #19
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any way to print the caption along with the photo?


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
  •