Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 1 | fancyBox |
| 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 |