Using FancyBox

FancyBox

  • Download the FancyBox source code from here:
    http://fancyapps.com/fancybox/#license
  • Go to the FancyBox folder, go to the Source folder, open the following files, and save them to your project folder:
    • jquery.fancybox.css
    • jquery.fancybox.js
  • Add the CSS and the .js files inside your <head></head> tags:
    • <script src=”jquery.fancybox.js?v=2.1.5″></script>
    • <link rel=”stylesheet” type=”text/css” href=”jquery.fancybox.css?v=2.1.5″ media=”screen” />
  • Add the following mini-script inside the <head></head> tags:
    • <script type=”text/javascript”>
      $(document).ready(function() {
      $(“.fancybox”).fancybox();
      });
      </script>
  • Add the following to the HTML. Note that you need TWO images for each image: The thumbnail (smaller size) image that displays on the page, and the full-size image that displays in the fancy box.
    • <div id = “gallery”>
      <p>Gallery</p>
      <a class=”fancybox” href=”images/yourimage1.jpg” data-fancybox-group=”gallery” title=”Put your captain here.”><img src=”images/thumbnail1.jpg” alt=”” /></a>
      <a class=”fancybox” href=”images/yourimage2.jpg” data-fancybox-group=”gallery” title=”Put your captain here.”><img src=”images/thumbnail2.jpg” alt=”” /></a>
      <a class=”fancybox” href=”images/yourimage3.jpg” data-fancybox-group=”gallery” title=”Put your captain here.”><img src=”images/thumbnail3.jpg” alt=”” /></a>
      <a class=”fancybox” href=”images/yourimage4.jpg” data-fancybox-group=”gallery” title=”Put your captain here.”><img src=”images/thumbnail4.jpg” alt=”” /></a>
      </div>
  • Style the #gallery div to fit your page.
  • Please note, if you don’t already have a link to the main Javascript Library at Google you will need to add it:
    <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”&gt;
    </script>
Advertisements

This blog is for exploring new models of journalism using technology and community participation.

Posted in Uncategorized

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: