Skip to content
This repository was archived by the owner on Feb 23, 2023. It is now read-only.

Commit a6a8fff

Browse files
fancyappsfancyapps
authored
Merge pull request #1127 from bocharsky-bw/patch-1
Highlight code blocks in docs
2 parents 76cf164 + 45624dd commit a6a8fff

File tree

1 file changed

+153
-127
lines changed

1 file changed

+153
-127
lines changed

‎README.md

Lines changed: 153 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -16,65 +16,79 @@ How to use
1616
To get started, download the plugin, unzip it and copy files to your website/application directory.
1717
Load files in the <head> section of your HTML document. Make sure you also add the jQuery library.
1818

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>
19+
```html
20+
<head>
21+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
22+
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
23+
<script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
24+
</head>
25+
```
2426

2527
Create your links with a `title` (or `data-fancybox-title`) if you want a title to be shown, and add a class:
2628

27-
<a href="large_image.jpg" class="fancybox" title="Sample title"><img src="small_image.jpg" /></a>
29+
```html
30+
<a href="large_image.jpg" class="fancybox" title="Sample title"><img src="small_image.jpg" /></a>
31+
```
2832

2933
If you have a set of related items that you would like to group,
3034
additionally include a group name in the `rel` (or `data-fancybox-group`) attribute:
3135

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>
36+
```html
37+
<a href="large_1.jpg" class="fancybox" rel="gallery" title="Sample title 1"><img src="small_1.jpg" /></a>
38+
<a href="large_2.jpg" class="fancybox" rel="gallery" title="Sample title 1"><img src="small_2.jpg" /></a>
39+
```
3440

3541
Initialise the script like this:
3642

37-
<script>
38-
$(document).ready(function() {
39-
$('.fancybox').fancybox();
40-
});
41-
</script>
43+
```html
44+
<script>
45+
$(document).ready(function() {
46+
$('.fancybox').fancybox();
47+
});
48+
</script>
49+
```
4250

4351
May also be passed an optional options object which will extend the default values. Example:
4452

45-
<script>
46-
$(document).ready(function() {
47-
$('.fancybox').fancybox({
48-
padding : 0,
49-
openEffect : 'elastic',
50-
closeBtn: false
51-
});
53+
```html
54+
<script>
55+
$(document).ready(function() {
56+
$('.fancybox').fancybox({
57+
padding : 0,
58+
openEffect : 'elastic',
59+
closeBtn: false
5260
});
53-
</script>
61+
});
62+
</script>
63+
```
5464

5565
Tip: Automatically group and apply fancyBox to all images:
5666

57-
$("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox();
67+
```js
68+
$("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox();
69+
```
5870

5971
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.
6072
You can specify type directly by adding classname (fancybox.image, fancybox.iframe, etc) or `data-fancybox-type` attribute:
6173

62-
//Ajax:
63-
<a href="/example.html" class="fancybox fancybox.ajax">Example</a>
64-
//or
65-
<a href="/example.html" class="fancybox" data-fancybox-type="ajax">Example</a>
74+
```html
75+
//Ajax:
76+
<a href="/example.html" class="fancybox fancybox.ajax">Example</a>
77+
//or
78+
<a href="/example.html" class="fancybox" data-fancybox-type="ajax">Example</a>
6679

67-
//Iframe:
68-
<a href="example.html" class="fancybox fancybox.iframe">Example</a>
80+
//Iframe:
81+
<a href="example.html" class="fancybox fancybox.iframe">Example</a>
6982

70-
//Inline (will display an element with `id="example"`)
71-
<a href="#example" class="fancybox">Example</a>
83+
//Inline (will display an element with `id="example"`)
84+
<a href="#example" class="fancybox">Example</a>
7285

73-
//SWF:
74-
<a href="example.swf" class="fancybox">Example</a>
86+
//SWF:
87+
<a href="example.swf" class="fancybox">Example</a>
7588

76-
//Image:
77-
<a href="example.jpg" class="fancybox">Example</a>
89+
//Image:
90+
<a href="example.jpg" class="fancybox">Example</a>
91+
```
7892

7993
Note, ajax requests are subject to the [same origin policy](http://en.wikipedia.org/wiki/Same_origin_policy).
8094
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.
@@ -88,129 +102,141 @@ Advanced
88102
Helpers provide a simple mechanism to extend the capabilities of fancyBox. There are two built-in helpers - 'overlay' and 'title'.
89103
You can disable them, set custom options or enable other helpers. Examples:
90104

91-
//Disable title helper
92-
$(".fancybox").fancybox({
93-
helpers: {
94-
title: null
95-
}
96-
});
105+
```js
106+
//Disable title helper
107+
$(".fancybox").fancybox({
108+
helpers: {
109+
title: null
110+
}
111+
});
97112

98-
//Disable overlay helper
99-
$(".fancybox").fancybox({
100-
helpers: {
101-
overlay : null
102-
}
103-
});
113+
//Disable overlay helper
114+
$(".fancybox").fancybox({
115+
helpers: {
116+
overlay : null
117+
}
118+
});
104119

105-
//Change title position and overlay color
106-
$(".fancybox").fancybox({
107-
helpers: {
108-
title : {
109-
type : 'inside'
110-
},
111-
overlay : {
112-
css : {
113-
'background' : 'rgba(255,255,255,0.5)'
114-
}
120+
//Change title position and overlay color
121+
$(".fancybox").fancybox({
122+
helpers: {
123+
title : {
124+
type : 'inside'
125+
},
126+
overlay : {
127+
css : {
128+
'background' : 'rgba(255,255,255,0.5)'
115129
}
116130
}
117-
});
118-
119-
//Enable thumbnail helper and set custom options
120-
$(".fancybox").fancybox({
121-
helpers: {
122-
thumbs : {
123-
width: 50,
124-
height: 50
125-
}
131+
}
132+
});
133+
134+
//Enable thumbnail helper and set custom options
135+
$(".fancybox").fancybox({
136+
helpers: {
137+
thumbs : {
138+
width: 50,
139+
height: 50
126140
}
127-
});
128-
141+
}
142+
});
143+
```
129144

130145
### API
131146

132147
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:
133148

134-
$(".fancybox").fancybox({
135-
beforeLoad : function() {
136-
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
149+
```js
150+
$(".fancybox").fancybox({
151+
beforeLoad : function() {
152+
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
137153

138-
/*
139-
"this.element" refers to current element, so you can, for example, use the "alt" attribute of the image to store the title:
140-
this.title = $(this.element).find('img').attr('alt');
141-
*/
142-
}
143-
});
154+
/*
155+
"this.element" refers to current element, so you can, for example, use the "alt" attribute of the image to store the title:
156+
this.title = $(this.element).find('img').attr('alt');
157+
*/
158+
}
159+
});
160+
```
144161

145162
It`s possible to open fancyBox programmatically in various ways:
146163

147-
//HTML content:
148-
$.fancybox( '<div><h1>Lorem Lipsum</h1><p>Lorem lipsum</p></div>', {
149-
title : 'Custom Title'
150-
});
151-
152-
//DOM element:
153-
$.fancybox( $("#inline"), {
154-
title : 'Custom Title'
155-
});
156-
157-
//Custom object:
158-
$.fancybox({
159-
href: 'example.jpg',
160-
title : 'Custom Title'
161-
});
162-
163-
//Array of objects:
164-
$.fancybox([
165-
{
166-
href: 'example1.jpg',
167-
title : 'Custom Title 1'
168-
},
169-
{
170-
href: 'example2.jpg',
171-
title : 'Custom Title 2'
172-
}
173-
], {
174-
padding: 0
175-
});
164+
```js
165+
//HTML content:
166+
$.fancybox( '<div><h1>Lorem Lipsum</h1><p>Lorem lipsum</p></div>', {
167+
title : 'Custom Title'
168+
});
169+
170+
//DOM element:
171+
$.fancybox( $("#inline"), {
172+
title : 'Custom Title'
173+
});
174+
175+
//Custom object:
176+
$.fancybox({
177+
href: 'example.jpg',
178+
title : 'Custom Title'
179+
});
180+
181+
//Array of objects:
182+
$.fancybox([
183+
{
184+
href: 'example1.jpg',
185+
title : 'Custom Title 1'
186+
},
187+
{
188+
href: 'example2.jpg',
189+
title : 'Custom Title 2'
190+
}
191+
], {
192+
padding: 0
193+
});
194+
```
176195

177196
There are several methods that allow you to interact with and manipulate fancyBox, example:
178197

179-
//Close fancybox:
180-
$.fancybox.close();
198+
```js
199+
//Close fancybox:
200+
$.fancybox.close();
201+
```
181202

182203
There is a simply way to access wrapping elements using JS:
183204

184-
$.fancybox.wrap
185-
$.fancybox.skin
186-
$.fancybox.outer
187-
$.fancybox.inner
205+
```js
206+
$.fancybox.wrap
207+
$.fancybox.skin
208+
$.fancybox.outer
209+
$.fancybox.inner
210+
```
188211

189212
You can override CSS to customize the look. For example, make navigation arrows always visible,
190213
change width and move them outside of area (use this snippet after including fancybox.css):
191214

192-
.fancybox-nav span {
193-
visibility: visible;
194-
}
215+
```css
216+
.fancybox-nav span {
217+
visibility: visible;
218+
}
195219

196-
.fancybox-nav {
197-
width: 80px;
198-
}
220+
.fancybox-nav {
221+
width: 80px;
222+
}
199223

200-
.fancybox-prev {
201-
left: -80px;
202-
}
224+
.fancybox-prev {
225+
left: -80px;
226+
}
203227

204-
.fancybox-next {
205-
right: -80px;
206-
}
228+
.fancybox-next {
229+
right: -80px;
230+
}
231+
```
207232

208233
In that case, you might want to increase space around box:
209234

210-
$(".fancybox").fancybox({
211-
margin : [20, 60, 20, 60]
212-
});
213-
235+
```js
236+
$(".fancybox").fancybox({
237+
margin : [20, 60, 20, 60]
238+
});
239+
```
214240

215241
Bug tracker
216242
-----------

0 commit comments

Comments
 (0)