JQuery FancyBox Plugin usage parameters

Source: Internet
Author: User

I'm a porter.

This article turns from http://www.weste.net/2013/4-22/90629.html

First, give FancyBox's 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 be played as a group
    4. If the mouse scroll plug-in (mouse wheel plugin) included, FancyBox can also support the mouse wheel scroll to flip through the picture
    5. FancyBox Player supports projection, more stereoscopic feel

FancyBox How to use:

1. Introduction of jquery Core library and FancyBox plugin library

<type= "Text/javascript"  src= "http://ajax.googleapis.com/ajax/ Libs/jquery/1.4/jquery.min.js "></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

<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. Add Style sheet 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

<href= "Http://www.example?iframe">This goes to IFRAME  </a>

<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 ();

FancyBox's API and configuration options description

Property name Default Value Brief Description
Padding 10 Browse box padding, and css padding a meaning
Margin 20 Browse box margins, and margin in CSS one meaning
Opacity False If true, the transparency can be changed when the animation changes FancyBox
Modal False If true, then ' Overlayshow ' will be set to ' true ', ' Hideonoverlayclick ', ' Hideoncontentclick ', ' Enableescapebutton ', ' Showclosebutton ' will be set to ' false '
Cyclic False If True, the album will loop back
Scrolling ' Auto ' Set the value of the overflow to create or hide the scroll bar, which can be set to ' auto ', ' yes ', or ' no '
Width 560 Sets the width of the IFRAME and SWF, and if ' autodimensions ' is ' false ', this can also set the width of the normal text
Height 340 Sets the height of the iframe and SWF, and if ' autodimensions ' is ' false ', this can also set the height of normal text
Autoscale True If the browser window size can be adapted for True,fancybox
Autodimensions True In inline text and Ajax, set whether the dimensions of the element are dynamically resized, and if true, make sure that you have set the dimension size for the element
Centeronscroll False If true, FancyBox will remain in the center of the browser when you scroll the scroll bar
Ajax { } As with jquery's Ajax invocation options, note that the two callback events, ' Error ' and ' success ', are rewritten by FancyBox
Swf {wmode: ' Transparent '} Settings options for SWF
Hideonoverlayclick True If true, click the Mask layer to close the FancyBox
Hideoncontentclick False If true, click Play to close the FancyBox
Overlayshow True If true, the mask layer is displayed
Overlayopacity 0.3 Opacity of mask layer (range 0-1)
Overlaycolor ' #666 ' Background color of mask layer
Titleshow True If true, the caption is displayed
Titleposition ' Outside ' Sets the location of the caption display. Can be set to ' outside ', ' inside ' or ' over '
TitleFormat Null You can customize the formatting of headings
Transitionin, Transitionout ' Fade ' Sets the animation effect. can be set to ' elastic ', ' fade ' or ' none '
Speedin, Speedout 300 Fade and elastic time interval in milliseconds for animation transitions
Changespeed 300 Change the time interval (that is, the rate of change) of the FancyBox dimension in milliseconds
Changefade ' Fast ' The time interval at which content fades (that is, the speed of change) when switching
Easingin, Easingout ' Swing ' Use easing for elastic animations
Showclosebutton True If true, the Close button is displayed
Shownavarrows True True to display the previous next navigation arrow
Enableescapebutton True If True, ESC is enabled to close the FancyBox
OnStart Null callback function, loading content is triggered
OnCancel Null callback function, triggering after canceling content loading
OnComplete Null callback function, triggering when loading content is complete
Oncleanup Null callback function, triggering before closing FancyBox
Onclosed Null callback function, triggering after closing FancyBox

JQuery FancyBox Plugin usage parameters

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.