Tony Whiteside
Tony Whiteside

Reputation: 1

Trying to edit a template to display a PDF

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

Answers (1)

K J
K J

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:

Answer

Simply you can not use Lightbox. (Consider other Scripted Box Modals)

see https://github.com/lokesh/lightbox2/issues/454

Upvotes: 0

Related Questions