Search jQuery

jQuery Forum

Using jQuery Plugins

gautamx07

Fancybox plugging with PDF

in Using jQuery Plugins • 8 years ago

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fancybox</title>
<link href="../_css/site.css" rel="stylesheet">
<link href="fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet">
<script src="../_js/jquery-1.7.2.min.js"></script>
<script src="../_js/jquery.easing.1.3.js"></script>
<script src="fancybox/jquery.fancybox-1.3.4.min.js"></script>
<script>
$(document).ready(function() {
$('#gallery a').fancybox({
overlayColor: '#060',
overlayOpacity: .3,
transitionIn: 'elastic',
transitionOut: 'elastic',
easingIn: 'easeInSine',
easingOut: 'easeOutSine',
titlePosition: 'outside' ,
cyclic: true
});
}); // end ready
</script>
</head>
<body>
<div class="wrapper">
<div class="header">
<p class="logo">JavaScript <i>&</i> jQuery <i class="mm">The<br>Missing<br>Manual</i></p>
</div>
<div class="content">
<div class="main">
<h1>Gallery</h1>
<div id="gallery">
<a href="../_images/large/slide1.jpg" rel="gallery" title="Lotsa golf balls"><img src="../_images/small/slide1_h.jpg" width="70" height="70" alt="golf balls"></a>
<a href="../_images/large/slide2.jpg" rel="gallery" title="Someplace pretty"><img src="../_images/small/slide2_h.jpg" width="70" height="70" alt="rock wall"></a>
<a href="../_images/large/slide3.jpg" rel="gallery" title="The Old Course"><img src="../_images/small/slide3_h.jpg" width="70" height="70" alt="old course"></a>
<a href="../_images/large/slide4.jpg" rel="gallery" title="Lotsa tees"><img src="../_images/small/slide4_h.jpg" width="70" height="70" alt="tees"></a>
<a href="../_images/large/slide5.jpg" rel="gallery" title="Tree and pond"><img src="../_images/small/slide5_h.jpg" width="70" height="70" alt="tree"></a>
<a href="../_images/large/slide6.jpg" rel="gallery" title="Is that the Loch Ness Monster?"><img src="../_images/small/slide6_h.jpg" width="70" height="70" alt="ocean course"></a></div>
</div>
</div>
<div class="footer">
<p>JavaScript & jQuery: The Missing Manual, by <a href="http://sawmac.com/">David McFarland</a>. Published by <a href="http://oreilly.com/">O'Reilly Media, Inc</a>.</p>
</div>
</div>
</body>
</html>
Using the facy box plugging i created the following image gallary(Image 1 and two)
now look at the following page . the area marked in "RED" redirects and goes to a PDF file .
how can i acheive the gallary effect with facybox (Does fancy box support this in the 1st place ? I.E. PDF)
what changes will i need to make to the code (Give me a vague idea) .
Thank you .
Gautam.

Replies(4)

jakecigar

Re: Fancybox plugging with PDF

8 years ago

Each browser supports PDFs differently. Some with plugins, some with OS support, some really poorly. Use <img>s instead for a nice cross browser experience.

Or limit yourself to a few certain configurations.

JΛ̊KE

coldfusio..

Re: Fancybox plugging with PDF

8 years ago

Hello,

As Jake mentioned, the result of using FancyBox is not uniform across various browsers.

Here is a demo of FancyBox using a PDF.

http://james2013.batcave.net/pop_pdf.htm

Jim

P.S. Only Firefox ( on my machine ) comes close to what you would expect to happen.

jakecigar

Re: Re: Fancybox plugging with PDF

8 years ago

[Error] Failed to load resource: the server responded with a status of 403 (Forbidden) (jquery.fancybox.js, line 0)

JΛ̊KE

gautamx07

Re: Fancybox plugging with PDF

8 years ago

Jake , Thank you for your advice , BTW , I am using the latest version of fancyBox and also I taught Jquery is pretty good with cross browser compatibility . But tats just my assumption .

and Fusion , Thanks for the Lovely Demo , and By the way , it worked just fine for me .

But i have a new problem now , its all working fine locally/offline but when i upload the Files to Bluehost , It just keeps showing the loading sign and the PDF never appears , have you ever experienced that , any possible reason for this happening ??

Top Reply

Response title

Attachments

jQuery Forum

Fancybox plugging with PDF

Replies(4)

Re: Fancybox plugging with PDF

Re: Fancybox plugging with PDF

Re: Re: Fancybox plugging with PDF

Re: Fancybox plugging with PDF

Statistics

Tags

Actions