Отображение PDF-файлов в jQuery PopUp

Question

Мне было интересно, если кто-нибудь знает, как отображать PDF-файлы в jQuery, используя Fancybox/Lightbox и т. Д.? Я пробовал без успеха!

Answer 1

Для FancyBox v1.3.x, имея HTML:

<a class="pdf" href="sample.pdf">open pdf file</a> 

использовать этот скрипт:

$(document).ready(function() { 
$(".pdf").click(function() { 
    $.fancybox({ 
    'width': '70%', // or whatever 
    'height': '90%', 
    'autoDimensions': false, 
    'content': '<embed src="'+this.href+'#nameddest=self&page=1&view=FitH,0&zoom=80,0,0" type="application/pdf" height="99%" width="100%" />', 
    'onClosed': function() { 
    $("#fancybox-inner").empty(); 
    } 
    }); 
    return false; 
}); // pdf 
}); // ready 

Конечно, убедитесь, что вы загрузить JQuery и FancyBox JS и CSS файлы в первую очередь

Обратите внимание, что я установил height = "99%" в теге <embed>. Если вы используете HTML5 DCTYPE, это позволит избежать двойной вертикальной полосы прокрутки. Это связано с тем, что HTML5 инициализирует поля.

Для FancyBox v2.x: если вы используете FancyBox v2.x вы можете использовать один и тот же сценарий, но вам не нужен вариант onClosed, поэтому удалить

'onClosed': function() { 
$("#fancybox-inner").empty(); 
} 

из сценария и последняя пробная запятая после опции content.

также изменить autoDimensions слово для autoSize.