https://mumbaiclinic.com/lib/fancybox.js

1
2		$(document).ready(function() {
3			/*
4			 *  Simple image gallery. Uses default settings
5			 */
6
7			$('.fancybox').fancybox();
8
9			/*
10			 *  Different effects
11			 */
12
13			// Change title type, overlay closing speed
14			$(".fancybox-effects-a").fancybox({
15				helpers: {
16					title : {
17						type : 'outside'
18					},
19					overlay : {
20						speedOut : 0
21					}
22				}
23			});
24
25			// Disable opening and closing animations, change title type
26			$(".fancybox-effects-b").fancybox({
27				openEffect  : 'none',
28				closeEffect	: 'none',
29
30				helpers : {
31					title : {
32						type : 'over'
33					}
34				}
35			});
36
37			// Set custom style, close if clicked, change title type and overlay color
38			$(".fancybox-effects-c").fancybox({
39				wrapCSS    : 'fancybox-custom',
40				closeClick : true,
41
42				openEffect : 'none',
43
44				helpers : {
45					title : {
46						type : 'inside'
47					},
48					overlay : {
49						css : {
50							'background' : 'rgba(238,238,238,0.85)'
51						}
52					}
53				}
54			});
55
56			// Remove padding, set opening and closing animations, close if clicked and disable overlay
57			$(".fancybox-effects-d").fancybox({
58				padding: 0,
59
60				openEffect : 'elastic',
61				openSpeed  : 150,
62
63				closeEffect : 'elastic',
64				closeSpeed  : 150,
65
66				closeClick : true,
67
68				helpers : {
69					overlay : null
70				}
71			});
72
73			/*
74			 *  Button helper. Disable animations, hide close button, change title type and content
75			 */
76
77			$('.fancybox-buttons').fancybox({
78				openEffect  : 'none',
79				closeEffect : 'none',
80
81				prevEffect : 'none',
82				nextEffect : 'none',
83
84				closeBtn  : false,
85
86				helpers : {
87					title : {
88						type : 'inside'
89					},
90					buttons	: {}
91				},
92
93				afterLoad : function() {
94					this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
95				}
96			});
97
98
99			/*
100			 *  Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
101			 */
102
103			$('.fancybox-thumbs').fancybox({
104				prevEffect : 'none',
105				nextEffect : 'none',
106
107				closeBtn  : false,
108				arrows    : false,
109				nextClick : true,
110
111				helpers : {
112					thumbs : {
113						width  : 50,
114						height : 50
115					}
116				}
117			});
118
119			/*
120			 *  Media helper. Group items, disable animations, hide arrows, enable media and button helpers.
121			*/
122			$('.fancybox-media')
123				.attr('rel', 'media-gallery')
124				.fancybox({
125					openEffect : 'none',
126					closeEffect : 'none',
127					prevEffect : 'none',
128					nextEffect : 'none',
129
130					arrows : false,
131					helpers : {
132						media : {},
133						buttons : {}
134					}
135				});
136
137			/*
138			 *  Open manually
139			 */
140
141			$("#fancybox-manual-a").click(function() {
142				$.fancybox.open('1_b.jpg');
143			});
144
145			$("#fancybox-manual-b").click(function() {
146				$.fancybox.open({
147					href : 'iframe.html',
148					type : 'iframe',
149					padding : 5
150				});
151			});
152
153			$("#fancybox-manual-c").click(function() {
154				$.fancybox.open([
155					{
156						href : '1_b.jpg',
157						title : 'My title'
158					}, {
159						href : '2_b.jpg',
160						title : '2nd title'
161					}, {
162						href : '3_b.jpg'
163					}
164				], {
165					helpers : {
166						thumbs : {
167							width: 75,
168							height: 50
169						}
170					}
171				});
172			});
173
174
175		});
176