Web Design + Strategy: Fancybox: Image Gallery setup

1. In order to set up Fancybox first include the JavaScript and CSS files in between the <head></head> of your HTML document, like this:



<!-- Add jQuery library -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript">
</script>


<script src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js" type="text/javascript">
</script>


<link href="fancybox/source/jquery.fancybox.css?v=2.0.6" media="screen" rel="stylesheet" type="text/css"></link>
<script src="fancybox/source/jquery.fancybox.pack.js?v=2.0.6" type="text/javascript">
</script>


<link href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.2" media="screen" rel="stylesheet" type="text/css"></link>
<script src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.2" type="text/javascript">
</script>
<script src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.0" type="text/javascript">
</script>

<link href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.0.6" media="screen" rel="stylesheet" type="text/css">

2. You must also call the fancybox function in between the <head></head> of your HTML document, like this:



<!-- Add function to trigger fancybox styles, MUST HAVE class="fancybox" -->
<script type="text/javascript">
 $(document).ready(function() {
  $(".fancybox").fancybox({
      //or none (default is elastic)
      prevEffect: 'fade',
      nextEffect: 'fade',
      helpers : {
   title : {
       //inside, outside, float, over
       type: 'inside'
   },
   overlay : {
    //value between 0-1 
    opacity : 0.5,
    css : {
   //hexadecimal value to adjust fancybox interface bg
                 'background-color' : '#fff'
    }
   },
      }
  }); <!--  closes $(".fancybox").fancybox({ line -->
 }); <!-- closes $(document).ready(function() {    -->
</script>

3. To set up a Fancybox link, create an <a> with an attribute of class="fancy box" . If you would like view your Fancybox content as a gallery set, add an attribute of rel="yoursetname" in your <a>


<!-- class="fancybox" triggers javascript function,  rel="flowers" triggers [set] name)-->


<a class="fancybox"  rel="flowers" title="Image 1" href="images/spring02.jpg"><img src="images/spring02_thumb.jpg" alt="" /></a>

Thursday, July 19, 2012

Fancybox: Image Gallery setup

No comments:

Post a Comment