| 提交 | 用户 | 时间 | ||
| 58d006 | 1 | fancyBox |
| A | 2 | ======== |
| 3 | ||
| 4 | fancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages. | |
| 5 | ||
| 6 | More information and examples: http://www.fancyapps.com/fancybox/ | |
| 7 | ||
| 8 | License: http://www.fancyapps.com/fancybox/#license | |
| 9 | ||
| 10 | Copyright (c) 2012 Janis Skarnelis - janis@fancyapps.com | |
| 11 | ||
| 12 | ||
| 13 | How to use | |
| 14 | ---------- | |
| 15 | ||
| 16 | To get started, download the plugin, unzip it and copy files to your website/application directory. | |
| 17 | Load files in the <head> section of your HTML document. Make sure you also add the jQuery library. | |
| 18 | ||
| 19 | <head> | |
| 20 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> | |
| 21 | <link rel="stylesheet" href="/fancybox/jquery.fancybox.css" type="text/css" media="screen" /> | |
| 22 | <script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script> | |
| 23 | </head> | |
| 24 | ||
| 25 | Create your links with a `title` if you want a title to be shown, and add a class: | |
| 26 | ||
| 27 | <a href="large_image.jpg" class="fancybox" title="Sample title"><img src="small_image.jpg" /></a> | |
| 28 | ||
| 29 | If you have a set of related items that you would like to group, | |
| 30 | additionally include a group name in the `rel` (or `data-fancybox-group`) attribute: | |
| 31 | ||
| 32 | <a href="large_1.jpg" class="fancybox" rel="gallery" title="Sample title 1"><img src="small_1.jpg" /></a> | |
| 33 | <a href="large_2.jpg" class="fancybox" rel="gallery" title="Sample title 1"><img src="small_2.jpg" /></a> | |
| 34 | ||
| 35 | Initialise the script like this: | |
| 36 | ||
| 37 | <script> | |
| 38 | $(document).ready(function() { | |
| 39 | $('.fancybox').fancybox(); | |
| 40 | }); | |
| 41 | </script> | |
| 42 | ||
| 43 | May also be passed an optional options object which will extend the default values. Example: | |
| 44 | ||
| 45 | <script> | |
| 46 | $(document).ready(function() { | |
| 47 | $('.fancybox').fancybox({ | |
| 48 | padding : 0, | |
| 49 | openEffect : 'elastic' | |
| 50 | }); | |
| 51 | }); | |
| 52 | </script> | |
| 53 | ||
| 54 | Tip: Automatically group and apply fancyBox to all images: | |
| 55 | ||
| 56 | $("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox(); | |
| 57 | ||
| 58 | Script uses the `href` attribute of the matched elements to obtain the location of the content and to figure out content type you want to display. | |
| 59 | You can specify type directly by adding classname (fancybox.image, fancybox.iframe, etc) or `data-fancybox-type` attribute: | |
| 60 | ||
| 61 | //Ajax: | |
| 62 | <a href="/example.html" class="fancybox fancybox.ajax">Example</a> | |
| 63 | //or | |
| 64 | <a href="/example.html" class="fancybox" data-fancybox-type="ajax">Example</a> | |
| 65 | ||
| 66 | //Iframe: | |
| 67 | <a href="example.html" class="fancybox fancybox.iframe">Example</a> | |
| 68 | ||
| 69 | //Inline (will display an element with `id="example"`) | |
| 70 | <a href="#example" class="fancybox">Example</a> | |
| 71 | ||
| 72 | //SWF: | |
| 73 | <a href="example.swf" class="fancybox">Example</a> | |
| 74 | ||
| 75 | //Image: | |
| 76 | <a href="example.jpg" class="fancybox">Example</a> | |
| 77 | ||
| 78 | Note, ajax requests are subject to the [same origin policy](http://en.wikipedia.org/wiki/Same_origin_policy). | |
| 79 | If fancyBox will not be able to get content type, it will try to guess based on 'href' and will quit silently if would not succeed. | |
| 80 | (this is different from previsous versions where 'ajax' was used as default type or an error message was displayed). | |
| 81 | ||
| 82 | Advanced | |
| 83 | -------- | |
| 84 | ||
| 85 | ### Helpers | |
| 86 | ||
| 87 | Helpers provide a simple mechanism to extend the capabilities of fancyBox. There are two built-in helpers - 'overlay' and 'title'. | |
| 88 | You can disable them, set custom options or enable other helpers. Examples: | |
| 89 | ||
| 90 | //Disable title helper | |
| 91 | $(".fancybox").fancybox({ | |
| 92 | helpers: { | |
| 93 | title: null | |
| 94 | } | |
| 95 | }); | |
| 96 | ||
| 97 | //Disable overlay helper | |
| 98 | $(".fancybox").fancybox({ | |
| 99 | helpers: { | |
| 100 | overlay : null | |
| 101 | } | |
| 102 | }); | |
| 103 | ||
| 104 | //Change title position and overlay color | |
| 105 | $(".fancybox").fancybox({ | |
| 106 | helpers: { | |
| 107 | title : { | |
| 108 | type : 'inside' | |
| 109 | }, | |
| 110 | overlay : { | |
| 111 | css : { | |
| 112 | 'background' : 'rgba(255,255,255,0.5)' | |
| 113 | } | |
| 114 | } | |
| 115 | } | |
| 116 | }); | |
| 117 | ||
| 118 | //Enable thumbnail helper and set custom options | |
| 119 | $(".fancybox").fancybox({ | |
| 120 | helpers: { | |
| 121 | thumbs : { | |
| 122 | width: 50, | |
| 123 | height: 50 | |
| 124 | } | |
| 125 | } | |
| 126 | }); | |
| 127 | ||
| 128 | ||
| 129 | ### API | |
| 130 | ||
| 131 | Also available are event driven callback methods. The `this` keyword refers to the current or upcoming object (depends on callback method). Here is how you can change title: | |
| 132 | ||
| 133 | $(".fancybox").fancybox({ | |
| 134 | beforeLoad : function() { | |
| 135 | this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : ''); | |
| 136 | ||
| 137 | /* | |
| 138 | "this.element" refers to current element, so you can, for example, use the "alt" attribute of the image to store the title: | |
| 139 | this.title = $(this.element).find('img').attr('alt'); | |
| 140 | */ | |
| 141 | } | |
| 142 | }); | |
| 143 | ||
| 144 | It`s possible to open fancyBox programmatically in various ways: | |
| 145 | ||
| 146 | //HTML content: | |
| 147 | $.fancybox( '<div><h1>Lorem Lipsum</h1><p>Lorem lipsum</p></div>', { | |
| 148 | title : 'Custom Title' | |
| 149 | }); | |
| 150 | ||
| 151 | //DOM element: | |
| 152 | $.fancybox( $("#inline"), { | |
| 153 | title : 'Custom Title' | |
| 154 | }); | |
| 155 | ||
| 156 | //Custom object: | |
| 157 | $.fancybox({ | |
| 158 | href: 'example.jpg', | |
| 159 | title : 'Custom Title' | |
| 160 | }); | |
| 161 | ||
| 162 | //Array of objects: | |
| 163 | $.fancybox([ | |
| 164 | { | |
| 165 | href: 'example1.jpg', | |
| 166 | title : 'Custom Title 1' | |
| 167 | }, | |
| 168 | { | |
| 169 | href: 'example2.jpg', | |
| 170 | title : 'Custom Title 2' | |
| 171 | } | |
| 172 | ], { | |
| 173 | padding: 0 | |
| 174 | }); | |
| 175 | ||
| 176 | There are several methods that allow you to interact with and manipulate fancyBox, example: | |
| 177 | ||
| 178 | //Close fancybox: | |
| 179 | $.fancybox.close(); | |
| 180 | ||
| 181 | There is a simply way to access wrapping elements using JS: | |
| 182 | ||
| 183 | $.fancybox.wrap | |
| 184 | $.fancybox.skin | |
| 185 | $.fancybox.outer | |
| 186 | $.fancybox.inner | |
| 187 | ||
| 188 | You can override CSS to customize the look. For example, make navigation arrows always visible, | |
| 189 | change width and move them outside of area (use this snippet after including fancybox.css): | |
| 190 | ||
| 191 | .fancybox-nav span { | |
| 192 | visibility: visible; | |
| 193 | } | |
| 194 | ||
| 195 | .fancybox-nav { | |
| 196 | width: 80px; | |
| 197 | } | |
| 198 | ||
| 199 | .fancybox-prev { | |
| 200 | left: -80px; | |
| 201 | } | |
| 202 | ||
| 203 | .fancybox-next { | |
| 204 | right: -80px; | |
| 205 | } | |
| 206 | ||
| 207 | In that case, you might want to increase space around box: | |
| 208 | ||
| 209 | $(".fancybox").fancybox({ | |
| 210 | margin : [20, 60, 20, 60] | |
| 211 | }); | |
| 212 | ||
| 213 | ||
| 214 | Bug tracker | |
| 215 | ----------- | |
| 216 | ||
| 217 | Have a bug? Please create an issue on GitHub at https://github.com/fancyapps/fancyBox/issues | |
