6
6
< meta name ="viewport " content ="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0 ">
7
7
< meta content ="text/html;charset=utf-8 " http-equiv ="Content-Type ">
8
8
9
- < link href ="https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:400,700 " rel ="stylesheet ">
9
+ < link href ="https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:400,700 " rel ="stylesheet " / >
10
10
11
11
< script src ="//code.jquery.com/jquery-3.1.1.min.js "> </ script >
12
12
@@ -263,7 +263,9 @@ <h1><a href="http://fancyapps.com/fancybox/3/">fancyBox3</a> Documentation</h1>
263
263
264
264
< ul >
265
265
< li > < a href ="http://fancyapps.com/fancybox/3/ "> Homepage</ a > </ li >
266
- < li > < a href ="https://github.com/fancyapps/fancyBox "> Github</ a > </ li >
266
+ < li > < a href ="http://fancyapps.com/fancybox/3/docs/ "> Documentation</ a > </ li >
267
+ < li > < a href ="http://fancyapps.com/store/ "> Store</ a > </ li >
268
+ < li > < a href ="https://github.com/fancyapps/fancybox "> Github</ a > </ li >
267
269
</ ul >
268
270
</ div >
269
271
</ header >
@@ -806,7 +808,8 @@ <h2 id="options">Options</h2>
806
808
// Error message template
807
809
errorTpl : '<div class="fancybox-error"><p>The requested content cannot be loaded. <br /> Please try again later.<p></div>',
808
810
809
- closeTpl : '<button data-fancybox-close class="fancybox-close-small">×</button>',
811
+ // This will be appended to html content, if "smallBtn" option is not set to false
812
+ closeTpl : '<button data-fancybox-close class="fancybox-close-small"></button>',
810
813
811
814
// Container is injected into this element
812
815
parentEl : 'body',
@@ -823,7 +826,7 @@ <h2 id="options">Options</h2>
823
826
// Close when clicked outside of the content
824
827
closeClickOutside : true,
825
828
826
- // Callbacks
829
+ // Callbacks; See Documentation/API/Events for description and samples
827
830
beforeLoad : $.noop,
828
831
afterLoad : $.noop,
829
832
beforeMove : $.noop,
@@ -835,7 +838,6 @@ <h2 id="options">Options</h2>
835
838
afterClose : $.noop,
836
839
onActivate : $.noop,
837
840
onDeactivate : $.noop
838
-
839
841
}
840
842
</ pre >
841
843
@@ -1049,7 +1051,6 @@ <h3 id="events">Events</h3>
1049
1051
1050
1052
< p >
1051
1053
fancyBox fires several events.
1052
-
1053
1054
</ p >
1054
1055
1055
1056
< pre > < code > beforeLoad : Before the content of a slide is being loaded
@@ -1094,8 +1095,13 @@ <h3 id="events">Events</h3>
1094
1095
</script></ code > </ pre >
1095
1096
1096
1097
< p >
1097
- It is also possible to attach an event handler for all instances.
1098
+ Each callback receives two parameters - current fancyBox instance and current gallery object, if exists.
1099
+ </ p >
1100
+
1101
+ < p >
1102
+ It is also possible to attach event handler for all instances.
1098
1103
To prevent interfering with other scripts, these events have been namespaced to < code > .fb</ code > .
1104
+ These handlers receive 3 parameters - event, current fancyBox instance and current gallery object.
1099
1105
</ p >
1100
1106
< p >
1101
1107
Here is an example of binding to the < code > onComplete</ code > event:
@@ -1106,6 +1112,17 @@ <h3 id="events">Events</h3>
1106
1112
});</ code > </ pre >
1107
1113
1108
1114
1115
+ < p >
1116
+ If you wish to prevent closing of the modal, for example, if form is not validating, you can use < code > beforeClose</ code >
1117
+ callback. Simply return < code > false</ code > :
1118
+ </ p >
1119
+
1120
+ < pre > < code > beforeClose : function( instance, current, e ) {
1121
+ if ( $('#my-field').val() == '' ) {
1122
+ return false;
1123
+ }
1124
+ }
1125
+ </ code > </ pre >
1109
1126
1110
1127
< h2 id ="modules "> Modules</ h2 >
1111
1128
@@ -1129,7 +1146,11 @@ <h2 id="modules">Modules</h2>
1129
1146
thumbs : {
1130
1147
showOnStart : false, // Display thumbnails on opening
1131
1148
hideOnClosing : true // Hide thumbnail grid when closing animation starts
1132
- }</ code > </ pre >
1149
+ },
1150
+ fullScreen : {
1151
+ requestOnStart : false // Request fullscreen mode on opening
1152
+ },
1153
+ hash : false // Hash value</ code > </ pre >
1133
1154
1134
1155
< p >
1135
1156
Example (show thumbnails on start):
@@ -1172,16 +1193,23 @@ <h2 id="modules">Modules</h2>
1172
1193
Thumbs.show();
1173
1194
Thumbs.toggle();
1174
1195
1175
- FullScreen.isAvailable();
1176
- FullScreen.isActivated();
1177
- FullScreen.launch();
1196
+ FullScreen.request( elem );
1178
1197
FullScreen.exit();
1179
- FullScreen.toggle();
1198
+ FullScreen.toggle( elem );
1199
+ FullScreen.isFullscreen();
1200
+ FullScreen.enabled();
1180
1201
1181
1202
SlideShow.start();
1182
1203
SlideShow.stop();
1183
1204
SlideShow.toggle();
1184
1205
</ code > </ pre >
1206
+
1207
+ < p >
1208
+ If you wish to disable hash module, use this snippet (after including JS file):
1209
+ </ p >
1210
+
1211
+ < pre > < code > $.fancybox.defaults.hash = false;</ code > </ pre >
1212
+
1185
1213
<!--
1186
1214
1187
1215
FAQ
@@ -1298,7 +1326,6 @@ <h3>How to reposition thumbnail grid</h3>
1298
1326
</ p >
1299
1327
</ div >
1300
1328
</ footer >
1301
-
1302
1329
< script >
1303
1330
1304
1331
/* Sticky nvigation */
0 commit comments