Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Lightbox Print Help

  1. #1
    Join Date
    Feb 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Lightbox Print Help

    1) Script Title: Lightbox image viewer 2.03

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

    3) Describe problem: I am having a problem with the print feature that I have added to my lightbox. The print button works but it prints the whole page as opposed to just the image in the lightbox.

    Here is the code that I used:
    rel="lightbox" title="Caption <a href='javascript: window.print();' > Print </a>"

    How can I have it just print the image instead of the whole page?

    Thanks in advance,

    Eric

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,163
    Thanks
    44
    Thanked 3,238 Times in 3,199 Posts
    Blog Entries
    12

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,163
    Thanks
    44
    Thanked 3,238 Times in 3,199 Posts
    Blog Entries
    12

    Default

    For a slightly different result, one that I prefer, you can use this print stylesheet (see http://www.dynamicdrive.com/forums/s...28&postcount=3 for info on using the print stylesheet):

    Code:
    body * {
    display:none;
    text-align:center;
    margin:0 auto;
    position:static;
    }
    #lightbox, #outerImageContainer,
    #imageContainer, #lightboxImage,
    #imageDataContainer, #imageData,
    #imageDetails, #imageDetails * {
    display:block!important;
    opacity:1.0!important;
    }
    and modify lightbox.js here (additions highlighted):

    Code:
    		var objLightboxImage = document.createElement("img");
    		objLightboxImage.setAttribute('id','lightboxImage');
    		objLightboxImage.setAttribute('alt','No Image Loaded/Selected');
    		objLightboxImage.setAttribute('title','');
    		objImageContainer.appendChild(objLightboxImage);
    - John
    ________________________

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

  4. #4
    Join Date
    Apr 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I'll need this stylesheet info when I get there (so thanks), but right now I'm not understanding how to add the print link in the first place. Thanks for any help.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,163
    Thanks
    44
    Thanked 3,238 Times in 3,199 Posts
    Blog Entries
    12

    Default

    A print link on a page may be created like so:

    HTML Code:
    <a href="javascript:print();" onclick="if(window.print)window.print();return false;">Print</a>
    Or the user can just use their browser's print button or file menu to print the page. If you are using lightbox v2.03a:

    http://www.dynamicdrive.com/dynamici...box2/index.htm

    You can have a print link right on the lightbox image by using a trigger like so for the lightbox:

    HTML Code:
    <a href="images/image-1.jpg" rel="lightbox" 
    title="Print" rev="javascript:print();"><span title="Image 1">image #1</span></a>
    Just for your information, the normal trigger with no link or print link for the lightbox looks like so:

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

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

  6. #6
    Join Date
    Apr 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks John

    I guess why I don't understand what you mean by that is because the code for lightbox v2.03a as displayed on this website is not in that format.

    It looks more like:
    Code:
                    var objBottomNavCloseLink = document.createElement("a");
    		objBottomNavCloseLink.setAttribute('id','bottomNavClose');
    		objBottomNavCloseLink.setAttribute('href','#');
    		objBottomNavCloseLink.onclick = function() { myLightbox.end(); return false; }
    		objBottomNav.appendChild(objBottomNavCloseLink);
    	
    		var objBottomNavCloseImage = document.createElement("img");
    		objBottomNavCloseImage.setAttribute('src', fileBottomNavCloseImage);
    		objBottomNavCloseLink.appendChild(objBottomNavCloseImage);
    And then it defines the variables and such in other sections. I'm guessing I could take that and format it to be used to create the print button? Any ideas? Thanks for your help.
    Last edited by okstated; 04-21-2008 at 06:00 PM.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,163
    Thanks
    44
    Thanked 3,238 Times in 3,199 Posts
    Blog Entries
    12

    Default

    Huh? This is a direct quote from the demo page:

    Code:
    <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
    I'm not talking about editing the script. I'm talking about modifying the HTML code used to trigger the lightbox.

    In other words, I think you are over complicating this.
    - John
    ________________________

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

  8. #8
    Join Date
    Apr 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Ah, sorry, that's my problem. I'm trying to use this in conjunction with a CMS (it's already adjusted with dynamic scripts) and so the files I must modify are either the original javascript or the php coding.

  9. #9
    Join Date
    Apr 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    Alright, I've gotten as far as inserting the print button and it bringing up the print dialogue box and printing the whole page. So I implement the css solution provided here.

    But when I do that it prints nothing. Strangely enough at one point it printed half of the image at the bottom of the page, but for the life of me I can't even get it to do that again. Not sure what it was.

    Here is the code I used in lightbox.js itself:
    Code:
    var objPrintLink = document.createElement("a");
    objPrintLink.setAttribute('href', '#');
    objPrintLink.setAttribute('id', 'printLink');
    objPrintLink.onclick = function(){window.print(); return false; }
    objImageData.appendChild(objPrintLink);
    
    var objPrintIcon = document.createElement("img");
    objPrintIcon.setAttribute('src', printIcon);
    objPrintIcon.setAttribute('title', 'Print');
    objPrintIcon.setAttribute('alt', 'Print');
    objPrintLink.appendChild(objPrintIcon);
    And then:
    Code:
    Element.setHref('printLink', imageArray[activeImage][0]);
    inserted around line 452 with the "Element.hide" grouping.

    This part get's the url to each image correct and so works dynamically. Now if I can just get the picture to print.

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,163
    Thanks
    44
    Thanked 3,238 Times in 3,199 Posts
    Blog Entries
    12

    Default

    You should enclose your added code in a conditional that determines if the browser can do window.print():

    Code:
    if(window.print){
    var objPrintLink = document.createElement("a");
    objPrintLink.setAttribute('href', '#');
    objPrintLink.setAttribute('id', 'printLink');
    objPrintLink.onclick = function(){window.print(); return false; }
    objImageData.appendChild(objPrintLink);
    
    var objPrintIcon = document.createElement("img");
    objPrintIcon.setAttribute('src', printIcon);
    objPrintIcon.setAttribute('title', 'Print');
    objPrintIcon.setAttribute('alt', 'Print');
    objPrintLink.appendChild(objPrintIcon);
    }
    This has nothing to do with your problem, but it will avoid confusion for users whose browser - for whatever reason cannot print using window.print().

    I don't see how this:

    Code:
    Element.setHref('printLink', imageArray[activeImage][0]);
    is required at all, but it probably won't hurt anything. The href will never fire. If it did, you would no longer be looking at the page, the image would load by itself into the window.

    As to your problem, a link to your page would probably help in diagnosing the issue:

    Please post a link to the page on your site that contains the problematic code so we can check it out.


    But, are you sure you copied the style exactly as shown earlier in this thread and included the media="print" descriptor for it? What browser are you using?
    - John
    ________________________

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

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
  •