jquery Popup Plugin FancyBox usage tutorial

1. Introduction of jquery Core library and FancyBox plugin library

 <  script  type  = "Text/javascript"   src  = "Http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"   (www.111cn.net)  ></ script  >  <  script  type  = "Text/javascript"   src  = "/fancybox/jquery.fancybox-1.3.4.pack.js"  ></ script  >  from:http://www.111cn.net/wy/jquery/47982.htm 

Optional – If you need to use fancy transition (some animation effects) You also need to introduce the following 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

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

2. Introduce style file:

<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

<id= "Single_image"  href= "image_big.jpg"><  src= "image_small.jpg"  kesrc= "image_small.jpg"  alt ="" ></ a >

B, Ordinary text

<aID= "inline"href= "#data"kesrc= "#data">This shows content of the element who has id= "data"</a>   <Divstyle= "Display:none;">     <DivID= "Data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Div> </Div>C, Iframe<ahref= "Http://www.example?iframe">This goes to IFRAME</a>

Or

<class= "iframe"  href= "http://www.example">This Goes to iframe</a>D, Ajax<href = "http://www.example/data.php" > This takes content using Ajax</a>

If you want to display descriptive information, you can add a title to the link and put the description in the title.

4. The final jquery initialization code

$ (document). Ready (function () {/       * Most basic, using the default configuration */           $ ("A#single_image"). FancyBox ();           /* Use a custom configuration *          /$ ("A#inline"). FancyBox ({         ' Hideoncontentclick ': true     });       /* Click to configure the support group to play *           /$ ("A.group"). FancyBox ({         ' transitionin '  :   ' elastic ',         ' transitionout ': '   elastic ',         ' Speedin '       : All   ,          ' Speedout '      : $   ,          ' Overlayshow '   :   false     });       

Create albums with the rel tag

<aclass= "Grouped_elements"rel= "Group1"href= "Image_big_1.jpg"><imgsrc= "Image_small_1.jpg"alt=""></a> <aclass= "Grouped_elements"rel= "Group1"href= "Image_big_2.jpg"><imgsrc= "Image_small_2.jpg"alt=""></a>        <aclass= "Grouped_elements"rel= "Group2"href= "Image_big_3.jpg"><imgsrc= "Image_small_3.jpg"alt=""></a>  <aclass= "Grouped_elements"rel= "Group2"href= "Image_big_4.jpg"><imgsrc= "Image_small_4.jpg"alt=""></a>$ ("a.grouped_elements"). FancyBox ();

This article turns from http://www.111cn.net/wy/jquery/47982.htm,

Another article about the use of FancyBox: http://www.cnblogs.com/qinpengming/archive/2013/05/26/3099848.html

jquery Popup Plugin FancyBox usage tutorial