1. Главная
  2. Блоги
  3. Блог Infinity90

Кнопка "Распечатать" для lightbox/colorbox

Главные вкладки

Аватар пользователя Infinity90 Infinity90 8 ноября 2013 в 7:35

Доброго времени суток!

Нужно добавить в окошко lightbox или colorbox кнопку "Распечатать изображение". Вопрос уже несколько раз поднимался, но решение так и не нашлось.

Комментарии

Аватар пользователя HardHardy HardHardy 6 апреля 2014 в 11:15

khanton wrote:
Вот тут все подробно расписано: http://stackoverflow.com/questions/8470487/change-colorbox-interface-to-...

Здравствуйте!
А вы бы не могли помочь разобраться? Smile
Т.е.

$(document).ready(function(){
    $(".intro_modal").colorbox({
            inline:true,
            innerWidth:600,
            height:300,
            onLoad: function() {
                    // Remove print if it is re-opened after ajax
                    $("#cboxPrint").remove();
            },
    });

    $(".checklist_ajax").colorbox({
            iframe:true,
            innerWidth:800,
            height:"95%",
            onComplete: function() {
                    $("#cboxContent iframe").ready(function(){
                            // Add print box once content loaded
                            $("#cboxContent").append('<div id="cboxPrint" style="float: left;">print</div>');
                            $("#cboxPrint").click( function() {
                                    printprepare();
                            });
                    });
            },
    });

});

function printprepare(){
    try{
            var print_frame = document.getElementById('ifrmPrint');
            var print_head = $("#cboxContent iframe").contents().find("head").html();
            var print_body = $("#cboxContent iframe").contents().find("body").html()
            var print_doc = (print_frame.contentWindow || print_frame.contentDocument);
            if (print_doc.document) print_doc = print_doc.document;
            // Write printable content
            print_doc.write("<html><head>");
            print_doc.write(print_head);
            print_doc.write('</head><body onload="this.focus(); this.print();">');
            print_doc.write(print_body);
            print_doc.write("</body></html>");
            print_doc.close();
    }
    catch(e){
            self.print();
    }
}

необходимо скопипастить в любой из подключенных JS colorbox или..?

А HTML

...
<p><a class='intro_modal' href="#inline_content" title="Checklist">Button</a></p>
...
<div style="display:none">
    <div style="padding:10px; background:#fff;" id="inline_content">
            <p>Inline content here...</p>
            <p><a href="link/to/printable/content" class="checklist_ajax cboxElement" title="Checklist">Click here to load content</a></p>
    </div>
</div>

<iframe id="ifrmPrint" src="#" style="width:0pt; height:0pt; border: none;"></iframe>

что? куда? не могу понять Sad

Подскажите плиз ˊ`

Аватар пользователя Velesss Velesss 8 ноября 2013 в 10:20

Например, для colorbox можно через тему добавить:

$(document).bind('cbox_complete', function () {

 if (!$('#print').length ) {        
  $('#cboxNext').after('<a href="javascript:void(0)" id="print">Печать</a>');
 }
       
 $('#print').click(function() {
  window.print();
 });
       
});

Правда, это печать окна в целом.