Fancybox plugging with PDF

Fancybox plugging with PDF

  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>Fancybox</title>
  7. <link href="../_css/site.css" rel="stylesheet">
  8. <link href="fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet">
  9. <script src="../_js/jquery-1.7.2.min.js"></script>
  10. <script src="../_js/jquery.easing.1.3.js"></script>
  11. <script src="fancybox/jquery.fancybox-1.3.4.min.js"></script>
  12. <script>
  13. $(document).ready(function() {
  14. $('#gallery a').fancybox({
  15. overlayColor: '#060',
  16. overlayOpacity: .3,
  17. transitionIn: 'elastic',
  18. transitionOut: 'elastic',
  19. easingIn: 'easeInSine',
  20. easingOut: 'easeOutSine',
  21. titlePosition: 'outside' ,
  22. cyclic: true
  23. });
  24. }); // end ready
  25. </script>
  26. </head>
  27. <body>
  28. <div class="wrapper">
  29. <div class="header">
  30. <p class="logo">JavaScript <i>&</i> jQuery <i class="mm">The<br>Missing<br>Manual</i></p>
  31. </div>


  34. <div class="content">
  35. <div class="main">
  36. <h1>Gallery</h1>
  37. <div id="gallery">
  38. <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>
  39. <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>
  40. <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>
  41. <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>
  42. <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>
  43. <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>
  44. </div>
  45. </div>
  46. <div class="footer">
  47. <p>JavaScript &amp; 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>
  48. </div>
  49. </div>
  50. </body>
  51. </html>

  53. Using the facy box plugging i created the following image gallary(Image 1 and two)






  60. now look at the following page . the area marked in "RED" redirects and goes to a PDF file . 

  62. how can i acheive the gallary effect with facybox (Does fancy box support this in the 1st place ?  I.E. PDF)

  64. what changes will i need to make to the code (Give me a vague idea) .   



  68. Thank you .

  70. Gautam.