Side by Side Diff: fancybox/README.md
Issue 8615139:
adblockpluschrome: Open share page in lightbox (Closed)
Patch Set:
Created Oct. 23, 2012, 4:12 p.m.
| Left: | ||
| Right: |
Use n/p to move between diff chunks;
N/P to move between comments.
« no previous file with comments
|
« fancybox/CHANGELOG.md ('k')
|
fancybox/demo/1_b.jpg » ('j')
|
firstRun.js » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| OLD | NEW |
|---|---|
| (Empty) | |
| 1 fancyBox | |
| 2 ======== | |
| 3 | |
| 4 fancyBox is a tool that offers a nice and elegant way to add zooming functionali ty 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/app lication directory. | |
| 17 Load files in the <head> section of your HTML document. Make sure you also add t he 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/c ss" 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 clas s: | |
| 26 | |
| 27 <a href="large_image.jpg" class="fancybox" title="Sample title"><img src="sm all_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`) attrib ute: | |
| 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 valu es. 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.ifra me, 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.lengt h + (this.title ? ' - ' + this.title : ''); | |
| 136 | |
| 137 /* | |
| 138 "this.element" refers to current element, so you can, for exampl e, 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 fancyBo x, 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 fan cybox.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/fan cyBox/issues | |
| OLD | NEW |
« no previous file with comments
|
« fancybox/CHANGELOG.md ('k')
|
fancybox/demo/1_b.jpg » ('j')
|
firstRun.js » ('J')
