Adding Carousel Slider and FancyBox

Carousel  Slider

  • Grab the HTML, CSS and JavaScript code from here:
    http://paulmason.name/item/simple-jquery-carousel-slider-tutorial

    • Copy and paste the HTML into your HTML
    • Copy and paste the CSS into your CSS
    • Copy the JavaScript, create a NEW Javascript file in Dreamweaver. Paste the Javascript code into the new Javascript file. Save the file in the SAME FOLDER as your HTML and CSS with extension .js. In my example, I name the file slider.js.
  • In the HTML, replace <img src=“/image-1.jpg” /> with your own image. Please note that all images in the Carousel Slider should be the same size. 
  • Inside the <head> tag, add a link to the main Javascript Library at Google:
    <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”&gt;
    </script>
  • Inside the <head> tag, add a link to the Javascript file you created from the Carousel Slider Web site:
    <script src=”slider.js”></script>
  • In the CSS, change the image height and width inside the .slider li style tag.
  • If you want to change the pace of the transition or the time the images stay on the page, you can change this in the slider.js file.

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">
    </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: