Reputation: 1
As the title says, I'm trying to edit a template to display a PDF. The original template would display an image in a light box when the link was clicked, but when I change the href to a PDF file it won't load (which I expected, I just don't know how to fix it because I'm relatively new to coding). Here's the code for it:
<div class="col-md-4 col-sm-6">
<div class="item">
<div class="thumb">
<a href="script/Passing Time.pdf" data-lightbox="image-1"><div class="hover-effect">
<div class="hover-content">
<h2>Passing Time</h2>
<p>At the end of Myla's life, she meets the one person to change it forever.</p>
</div>
</div></a>
<div class="image">
<img src="img/first_item.jpg">
</div>
</div>
</div>
</div>
I know I could just delete the "data-lightbox" section to display the pdf, but I'd like to see if anyone knows how I could make it more visually appealing. Any help is greatly appreciated!
Upvotes: 0
Views: 76
Reputation: 11730
LightBox (now LightBox2) has no ability to support "Media Types" other than image/type which are natural extensions to HTML.
HyperTextML is a web page of text in which you can borderless frame fixed image media such as <img src="protocol://"
thus you can use any image as base64.txt URI or external image resource https://
PDF Media (application/pdf) needs a different type of <embed> <i[nline]frame> of <object>
Thus needs a totally different type of modal.
There are several around such as "fancybox" but recommendation would be off topic, and thus this:
Simply you can not use Lightbox. (Consider other Scripted Box Modals)
see https://github.com/lokesh/lightbox2/issues/454
Upvotes: 0