JQuery FancyBox Plugin Introduction

Here is a jquery picture play plugin called FancyBox, Project home address: http://fancybox.net/

The characteristics of FancyBox are as follows:

1. Support for images, HTML text, Flash animations, iframe, and Ajax

2. You can customize the CSS style of the player

3, can play as a group, navigation buttons (previous item, next item)

4, if the mouse scroll plug-in (mouse wheel plugin) included in the words FancyBox can also support the mouse wheel scroll to flip through the picture

5, FancyBox player support projection, more three-dimensional feeling

FancyBox How to use:

1. Introduction of jquery Core library and FancyBox plugin library

<script type= "Text/javascript" src= "/js/jquery-1.8.0.js" ></script><script type= "Text/javascript" Src= "/fancybox/jquery.fancybox-1.3.4.pack.js" ></script>

Optional-If you need to use fancy transition (some animation effects) You also need to introduce the following script

<script type= "Text/javascript" src= "/fancybox/jquery.easing-1.4.pack.js" ></script>

Optional-If you need to support the mouse wheel scrolling effect you also need to introduce the following script

<script type= "Text/javascript" src= "/fancybox/jquery.mousewheel-3.0.4.pack.js" ></script>

2. Add Style file

<link rel= "stylesheet" href= "/fancybox/jquery.fancybox-1.3.4.css" type= "text/css" media= "screen" >

3. Create a LINK element on the page

A, picture elements

<a id= "Simple_1" href= "/img/simple1.jpg" ></a>

B, ordinary text

<a id= "simple_2" href= "#data" kesrc= "#data" > click here to display the text </a><div style= "Display:none;" >    <div id= "Data" > that laughter reminds me of my flowers, in every corner of my life quietly for me to open .</div></div>

C, Iframe

<a id= "Simple_3" href= "http://www.baidu.com" >Baidu</a>

D. Different animation styles

<a id= "example1" href= "/img/simple1.jpg" ></a><a ID = "Example2" href= "/img/simple1.jpg" ></a><a id= " Example3 "href="/img/simple1.jpg "></a><a id=" Example4 "href="/img/simple1.jpg "></a>

E, different title positions

<a id= "Example5" href= "/img/simple1.jpg" title= "learn a little bit every day." ></a><a id= "Example6" href= "/img/simple1.jpg" title= " Learn a little bit every day. " ></a><a id= "Example7" href= "/img/simple1.jpg" title= " Learn a little bit every day. " ></a><a id= "Example8" href= "/img/simple1.jpg" title= " Learn a little bit every day. " ></a>

F, play in group format

<a rel= "Example_group" href= "/img/simple1.jpg" ></a><a rel= "Example_group" href= "/img/simple2.jpg" ></a>

4, jquery realization effect

<script type= "Text/javascript" >$ (function () {$ ("a#simple_1"). FancyBox ();//Picture element $ ("a#simple_2"). FancyBox (); /Plain Text $ ("#simple_3"). FancyBox ({//iframe element ' width ': ' 75% ', ' height ': ' 75% ', ' Autoscale ': false, ' transitionin ': ' None ', ' Transitionout ': ' None ', ' type ': ' iframe '});//Different animation style $ ("A#example1"). FancyBox (); $ ("A#example2"). FancyBox ({' Overlayshow ': false, ' transitionin ': ' Elastic ', ' transitionout ': ' Elastic '}, $ ("A#example3"). FancyBox ({' Transitionin ': ' None ', ' transitionout ': ' None '}); $ ("A#example4"). FancyBox ({' Opacity ': true, ' overlayshow ': false, ' Transitionin ': ' Elastic ', ' transitionout ': ' None '});//different header positions $ ("A#example5"). FancyBox (); $ ("A#example6"). FancyBox ( {' titleposition ': ' Outside ', ' overlaycolor ': ' #000 ', ' overlayopacity ': 0.9}); $ ("A#example7"). FancyBox ({' titleposition ': ' Inside '}), $ ("A#example8"). FancyBox ({' titleposition ': ' Over '});// Play as a group of $ ("A[rel=example_group]"). FancyBox ({' Transitionin ': ' None ', ' transitionout ': ' None ', ' titleposition ': ' Over ', ' TitleFormat ': function (title, currentArray, Currentindex, currentopts) {return ' <span id= ' fancybox-title-over ' >image ' + (Currentindex + 1) + '/' + Curr Entarray.length + (title.length? '   ' + title: ') + ' </span> ';}}) </script>