2000 lines
65 KiB
HTML
2000 lines
65 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
|
||
<title>fancybox3 · Documentation</title>
|
||
|
||
<!-- jQuery -->
|
||
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
|
||
crossorigin="anonymous"></script>
|
||
|
||
<!-- Bootstrap -->
|
||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
|
||
crossorigin="anonymous">
|
||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
|
||
crossorigin="anonymous"></script>
|
||
|
||
<style>
|
||
a,
|
||
a:hover {
|
||
color: #ff5268;
|
||
}
|
||
|
||
h2 {
|
||
border-bottom: 1px solid rgba(0, 0, 0, .1);
|
||
margin-bottom: 2rem;
|
||
padding-bottom: 1rem;
|
||
padding-top: 2rem;
|
||
}
|
||
|
||
h3 {
|
||
font-size: 1.5rem;
|
||
margin-bottom: 1rem;
|
||
padding-top: 1.5rem;
|
||
}
|
||
|
||
h2 + h3 {
|
||
margin-top: -2rem;
|
||
}
|
||
|
||
h3 a,
|
||
h3 a:hover {
|
||
color: currentColor;
|
||
}
|
||
|
||
code {
|
||
background: #f1ecec;
|
||
color: #555;
|
||
padding: 2px 5px;
|
||
}
|
||
|
||
pre {
|
||
background: #f1ecec;
|
||
color: #555;
|
||
max-height: 70vh;
|
||
overflow: auto;
|
||
padding: 1rem 1.5rem;
|
||
-moz-tab-size: 4;
|
||
tab-size: 4;
|
||
}
|
||
|
||
pre code {
|
||
padding: 0;
|
||
}
|
||
|
||
section {
|
||
margin-bottom: 1rem;
|
||
margin-bottom: 5vh;
|
||
}
|
||
|
||
#introduction {
|
||
background: #fbf9f9;
|
||
margin-bottom: 2rem;
|
||
padding-bottom: 1rem;
|
||
padding-top: 1rem;
|
||
}
|
||
|
||
.navbar-brand {
|
||
color: #444;
|
||
font-size: 1.375rem;
|
||
}
|
||
|
||
.navbar-brand svg {
|
||
position: relative;
|
||
top: -1px;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.navbar-brand svg path {
|
||
fill: #fff;
|
||
stroke: #444;
|
||
stroke-width: 2.5;
|
||
}
|
||
|
||
.nav-link {
|
||
color: grey;
|
||
height: 2.5rem;
|
||
}
|
||
|
||
.navbar-brand:hover,
|
||
.nav-link:hover {
|
||
color: #464646;
|
||
}
|
||
|
||
.nav-link.active {
|
||
background: #ff5268;
|
||
border-radius: .25rem;
|
||
color: #fff;
|
||
}
|
||
|
||
.sticky {
|
||
padding-top: 2rem;
|
||
top: 0;
|
||
}
|
||
|
||
.sticky ul {
|
||
line-height: 2;
|
||
list-style: none;
|
||
}
|
||
|
||
.sticky > ul {
|
||
padding-left: 1rem;
|
||
}
|
||
|
||
.sticky a {
|
||
color: grey;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.sticky a:hover {
|
||
color: #464646;
|
||
}
|
||
|
||
.sticky a.active {
|
||
color: #ff5268;
|
||
}
|
||
|
||
.demo {
|
||
font-size: 90%;
|
||
margin-bottom: 2rem;
|
||
text-align: right;
|
||
}
|
||
|
||
pre ~ .demo {
|
||
margin-top: -1rem;
|
||
}
|
||
|
||
.badge-warning {
|
||
font-weight: 600;
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="introduction">
|
||
<div class="container">
|
||
<nav class="navbar navbar-expand">
|
||
<a class="navbar-brand py-0 mr-auto" href="https://fancyapps.com/fancybox/3/">
|
||
fancybox
|
||
</a>
|
||
|
||
<ul class="navbar-nav ml-auto">
|
||
<li class="nav-item px-2 d-none d-md-block">
|
||
<a class="nav-link" href="https://fancyapps.com/fancybox/3/">Home</a>
|
||
</li>
|
||
<li class="nav-item px-2 d-none d-md-block">
|
||
<a class="nav-link active" href="https://fancyapps.com/fancybox/3/docs/">Documentation</a>
|
||
</li>
|
||
<li class="nav-item px-2">
|
||
<a class="nav-link" href="https://fancyapps.com/store/">Store</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="https://github.com/fancyapps/fancybox" target="_blank">
|
||
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" aria-label="Github" role="img" viewBox="0 0 512 512">
|
||
<rect fill="#444" width="512" height="512" rx="50%"></rect>
|
||
<path fill="#fff" d="M335 499c14 0 12 17 12 17H165s-2-17 12-17c13 0 16-6 16-12l-1-50c-71 16-86-28-86-28-12-30-28-37-28-37-24-16 1-16 1-16 26 2 40 26 40 26 22 39 59 28 74 22 2-17 9-28 16-35-57-6-116-28-116-126 0-28 10-51 26-69-3-6-11-32 3-67 0 0 21-7 70 26 42-12 86-12 128 0 49-33 70-26 70-26 14 35 6 61 3 67 16 18 26 41 26 69 0 98-60 120-117 126 10 8 18 24 18 48l-1 70c0 6 3 12 16 12z"></path>
|
||
</svg>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="https://twitter.com/thefancyapps" target="_blank" title="Follow @thefancyapps">
|
||
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" aria-label="Twitter" role="img" viewBox="0 0 512 512">
|
||
<rect fill="#444" width="512" height="512" rx="50%"></rect>
|
||
<path fill="#fff" d="M437 152a72 72 0 0 1-40 12 72 72 0 0 0 32-40 72 72 0 0 1-45 17 72 72 0 0 0-122 65 200 200 0 0 1-145-74 72 72 0 0 0 22 94 72 72 0 0 1-32-7 72 72 0 0 0 56 69 72 72 0 0 1-32 1 72 72 0 0 0 67 50 200 200 0 0 1-105 29 200 200 0 0 0 309-179 200 200 0 0 0 35-37"></path>
|
||
</svg>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-2" id="leftCol">
|
||
<div class="sticky">
|
||
<ul>
|
||
<li>
|
||
<a href="#introduction">Introduction</a>
|
||
</li>
|
||
<li>
|
||
<a href="#setup">Setup</a>
|
||
</li>
|
||
<li>
|
||
<a href="#usage">How to Use</a>
|
||
</li>
|
||
<li>
|
||
<a href="#media_types">Media types</a>
|
||
|
||
<ul>
|
||
<li>
|
||
<a href="#images">Images</a>
|
||
</li>
|
||
<li>
|
||
<a href="#video">Video</a>
|
||
</li>
|
||
<li>
|
||
<a href="#iframe">Iframe</a>
|
||
</li>
|
||
<li>
|
||
<a href="#inline">Inline</a>
|
||
</li>
|
||
<li>
|
||
<a href="#ajax">Ajax</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="#options">Options</a>
|
||
</li>
|
||
<li>
|
||
<a href="#api">Api</a>
|
||
</li>
|
||
<li>
|
||
<a href="#modules">Modules</a>
|
||
</li>
|
||
<li>
|
||
<a href="#faq">FAQ</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-10 px-2 px-md-5" id="mainCol">
|
||
|
||
<section>
|
||
<h2>Introduction</h2>
|
||
|
||
<p>
|
||
Get started with fancybox, probably the world’s most popular lightbox script.
|
||
</p>
|
||
</section>
|
||
<section>
|
||
|
||
<h3>
|
||
Dependencies
|
||
</h3>
|
||
|
||
<p>
|
||
jQuery 3+ is preferred, but fancybox works with jQuery 1.9.1+ and jQuery 2+
|
||
</p>
|
||
|
||
<h3>Compatibility</h3>
|
||
|
||
<p>
|
||
fancybox includes support for touch gestures and even supports pinch gestures for zooming.
|
||
It is perfectly suited for both mobile and desktop browsers.
|
||
</p>
|
||
|
||
<p>
|
||
fancybox has been tested in following browsers/devices:
|
||
</p>
|
||
|
||
<ul>
|
||
<li>Chrome</li>
|
||
<li>Firefox</li>
|
||
<li>IE10/11</li>
|
||
<li>Edge</li>
|
||
<li>iOS Safari</li>
|
||
<li>Android 7.0 Tablet</li>
|
||
</ul>
|
||
|
||
</section>
|
||
|
||
<section id="setup">
|
||
|
||
<h2>Setup</h2>
|
||
|
||
<p>
|
||
You can install fancybox by linking
|
||
<code>.css</code> and
|
||
<code>.js</code> files to your html file. Make sure you also load the jQuery library. Below is a basic HTML
|
||
template to use as an example:
|
||
</p>
|
||
|
||
<pre><!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>My page</title>
|
||
|
||
<!-- CSS -->
|
||
<link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Your HTML content goes here -->
|
||
|
||
<!-- JS -->
|
||
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
|
||
<script src="jquery.fancybox.min.js"></script>
|
||
</body>
|
||
</html>
|
||
</pre>
|
||
<h3>Download fancybox</h3>
|
||
|
||
<p>
|
||
Download the latest version of fancybox on
|
||
<a href="https://github.com/fancyapps/fancybox" target="_blank">GitHub</a>.
|
||
<br /> Or just link directly to fancybox files on cdnjs -
|
||
<a href="https://cdnjs.com/libraries/fancybox" target="_blank">https://cdnjs.com/libraries/fancybox</a>.
|
||
</p>
|
||
|
||
<h3>Package Managers</h3>
|
||
|
||
<p>
|
||
fancybox is also available on npm and Bower.
|
||
</p>
|
||
|
||
<pre><code># NPM
|
||
npm install @fancyapps/fancybox --save
|
||
|
||
# Bower
|
||
bower install fancybox --save
|
||
</code></pre>
|
||
|
||
<h4 class="mt-5">
|
||
<span class="badge badge-warning">Important</span>
|
||
</h4>
|
||
|
||
<ul>
|
||
<li>Make sure you add the jQuery library before the fancybox JS file</li>
|
||
<li>If you already have jQuery on your page, you shouldn't include it second time</li>
|
||
<li>Do not include both fancybox.js and fancybox.min.js files</li>
|
||
<li>
|
||
Some functionality (ajax, iframes, etc) will not work when you're opening local file directly on your
|
||
browser, the code must
|
||
be running on a web server
|
||
</li>
|
||
</ul>
|
||
|
||
</section>
|
||
|
||
<section id="usage">
|
||
<h2>How to Use</h2>
|
||
|
||
<h3>Initialize with data attributes</h3>
|
||
|
||
<p>
|
||
The most basic way to use fancybox is by adding the
|
||
<code>data-fancybox</code> attribute to your element. This will automatically bind click event that will
|
||
start
|
||
fancybox. Use
|
||
<code>href</code> or
|
||
<code>data-src</code> attribute to specify source of your content. Example:
|
||
</p>
|
||
|
||
<pre><a href="image.jpg" data-fancybox data-caption="Caption for single image">
|
||
<img src="thumbnail.jpg" alt="" />
|
||
</a></pre>
|
||
|
||
<p class="demo">
|
||
<a href="https://codepen.io/fancyapps/pen/oPKVea?editors=1000" target="_blank">View demo on CodePen</a>
|
||
</p>
|
||
|
||
<p>
|
||
If you have a group of items, you can use the same attribute
|
||
<code>data-fancybox</code> value for each of them to create a gallery. Each group should have a unique
|
||
value.
|
||
Example:
|
||
</p>
|
||
|
||
<pre><a href="image_1.jpg" data-fancybox="gallery" data-caption="Caption #1">
|
||
<img src="thumbnail_1.jpg" alt="" />
|
||
</a>
|
||
|
||
<a href="image_2.jpg" data-fancybox="gallery" data-caption="Caption #2">
|
||
<img src="thumbnail_2.jpg" alt="" />
|
||
</a>
|
||
</pre>
|
||
<p class="demo">
|
||
<a href="https://codepen.io/fancyapps/pen/wEVOPa?editors=1000" target="_blank">View demo on CodePen</a>
|
||
</p>
|
||
|
||
<p>
|
||
If you choose this method, default settings will be applied. See
|
||
<a href="#options">options</a> section for examples how to customize
|
||
by changing defaults, using
|
||
<code>data-options</code> attribute or by <a href="#initialize-with-javascript">initializing with
|
||
JavaScript</a>.
|
||
</p>
|
||
|
||
<p>
|
||
<span class="badge badge-info">Info</span>
|
||
Sometimes you have multiple links pointing to the same source and that creates duplicates in the gallery.
|
||
To avoid that, simply use
|
||
<code>data-fancybox-trigger</code> attribute with the same value used for
|
||
<code>data-fancybox</code> attribute for your other links. Optionally, use
|
||
<code>data-fancybox-index</code> attribute to specify index of starting element:
|
||
</p>
|
||
|
||
<pre><code><a data-fancybox-trigger="gallery" href="javascript:;">
|
||
<img src="thumbnail_1.jpg" alt="" />
|
||
</a>
|
||
</code></pre>
|
||
<p class="demo">
|
||
<a href="https://codepen.io/fancyapps/pen/VGoRqO?editors=1010" target="_blank">View demo on CodePen</a>
|
||
</p>
|
||
|
||
<h3 id="initialize-with-javascript">Initialize with JavaScript</h3>
|
||
|
||
<p>
|
||
Select your elements with a jQuery selector (you can use any valid selector) and call the
|
||
<code>fancybox</code> method:
|
||
</p>
|
||
|
||
<pre><code>$('[data-fancybox="gallery"]').fancybox({
|
||
// Options will go here
|
||
});
|
||
</code></pre>
|
||
|
||
<p class="demo">
|
||
<a href="https://codepen.io/fancyapps/pen/vzoPMB?editors=1010" target="_blank">View demo on CodePen</a>
|
||
</p>
|
||
|
||
<p>
|
||
<span class="badge badge-info">Info</span>
|
||
Sometimes you might need to bind fancybox to dynamically added elements. Use
|
||
<code>selector</code> option to attach click event listener for elements that exist now or in the future.
|
||
All selected items will be automatically grouped in the gallery. Example:
|
||
</p>
|
||
|
||
<pre><code>$().fancybox({
|
||
selector : '.imglist a:visible'
|
||
});</code></pre>
|
||
|
||
<p class="demo">
|
||
<a href="https://codepen.io/fancyapps/pen/NLQJQp?editors=1010" target="_blank">View demo on CodePen</a>
|
||
</p>
|
||
|
||
<h3>Use with Javascript</h3>
|
||
|
||
<p>
|
||
You can also open and close fancybox programmatically. Here are a couple of examples, visit
|
||
<a href="#api">API</a> section for more information and demos.
|
||
</p>
|
||
<p>
|
||
Display simple message:
|
||
</p>
|
||
|
||
<pre><code>$.fancybox.open('<div class="message"><h2>Hello!</h2><p>You are awesome!</p></div>');</code></pre>
|
||
<p class="demo">
|
||
<a href="https://codepen.io/fancyapps/pen/qMewWv?editors=1010" target="_blank">View demo on CodePen</a>
|
||
</p>
|
||
|
||
<p>
|
||
Display iframed page:
|
||
</p>
|
||
|
||
<pre><code>$.fancybox.open({
|
||
src : 'link-to-your-page.html',
|
||
type : 'iframe',
|
||
opts : {
|
||
afterShow : function( instance, current ) {
|
||
console.info( 'done!' );
|
||
}
|
||
}
|
||
});</code></pre>
|
||
<p class="demo">
|
||
<a href="https://codepen.io/fancyapps/pen/GXVLgo?editors=1010" target="_blank">View demo on CodePen</a>
|
||
</p>
|
||
|
||
<h4 class="mt-4">
|
||
<span class="badge badge-warning">Important</span>
|
||
</h4>
|
||
|
||
<p>
|
||
fancybox attempts to automatically detect the type of content based on the given url. If it cannot be
|
||
detected, the type can also be set manually using
|
||
<code>data-type</code> attribute (or
|
||
<code>type</code> option). Example:
|
||
</p>
|
||
|
||
<pre><a href="images.php?id=123" data-type="image" data-caption="Caption">
|
||
Show image
|
||
</a></pre>
|
||
|
||
</section>
|
||
<section id="media_types">
|
||
|
||
<h2>Media types</h2>
|
||
|
||
<p>
|
||
fancybox is designed to display images, video, iframes and any HTML content. For your convenience, there is
|
||
a built in support for inline content and ajax.
|
||
</p>
|
||
|
||
<h3 id="images">Images</h3>
|
||
|
||
<p>
|
||
The standard way of using fancybox is with a number of thumbnail images that link to larger images:
|
||
</p>
|
||
|
||
<pre><code><a href="image.jpg" data-fancybox="images" data-caption="My caption">
|
||
<img src="thumbnail.jpg" alt="" />
|
||
</a></code></pre>
|
||
|
||
<p class="demo">
|
||
<a href="https://codepen.io/fancyapps/pen/EeqJPG?editors=1000" target="_blank">View demo on CodePen</a>
|
||
</p>
|
||
|
||
<p>
|
||
By default, fancybox fully preloads an image before displaying it. You can choose to display the image
|
||
right away. It will render and show the full size image while the data is being received. To do so, some
|
||
attributes are necessary:
|
||
</p>
|
||
|
||
<ul>
|
||
<li>
|
||
<code>data-width</code> - the real width of the image</li>
|
||
<li>
|
||
<code>data-height</code> - the real height of the image</li>
|
||
</ul>
|
||
|
||
<pre><code><a href="image.jpg" data-fancybox="images" data-width="2048" data-height="1365">
|
||
<img src="thumbnail.jpg" />
|
||
</a></code></pre>
|
||
<p class="demo">
|
||
<a href="https://codepen.io/fancyapps/pen/bxXJRr?editors=1000" target="_blank">View demo on CodePen</a>
|
||
</p>
|
||
|
||
<p>
|
||
You can also use these
|
||
<code>width</code> and
|
||
<code>height</code> properties to control size of the image. This can be used to make images look sharper
|
||
on retina displays. Example:
|
||
</p>
|
||
|
||
<pre><code>$('[data-fancybox="images"]').fancybox({
|
||
afterLoad : function(instance, current) {
|
||
var pixelRatio = window.devicePixelRatio || 1;
|
||
|
||
if ( pixelRatio > 1.5 ) {
|
||
current.width = current.width / pixelRatio;
|
||
current.height = current.height / pixelRatio;
|
||
}
|
||
}
|
||
});</code></pre>
|
||
|
||
<p class="demo">
|
||
<a href="https://codepen.io/fancyapps/pen/gdVyxg?editors=1010" target="_blank">View demo on CodePen</a>
|
||
</p>
|
||
|
||
<p>
|
||
fancybox supports "srcset" so it can display different images based on viewport width. You can use this to
|
||
improve download times for mobile users and over time save bandwidth. Example:
|
||
</p>
|
||
|
||
<pre><code><a href="medium.jpg" data-fancybox="images" data-srcset="large.jpg 1600w, medium.jpg 1200w, small.jpg 640w">
|
||
<img src="thumbnail.jpg" />
|
||
</a></code></pre>
|
||
<p class="demo">
|
||
<a href="https://codepen.io/fancyapps/pen/LJwvzY?editors=1000" target="_blank">View demo on CodePen</a>
|
||
</p>
|
||
|
||
<p>
|
||
It is also possible to protect images from downloading by right-click. While this does not protect from
|
||
truly determined users, it should discourage the vast majority from ripping off your files.
|
||
Optionally, put the watermark over image.
|
||
</p>
|
||
|
||
<pre><code>$('[data-fancybox]').fancybox({
|
||
protect: true
|
||
});</code></pre>
|
||
|
||
<p class="demo">
|
||
<a href="https://codepen.io/fancyapps/pen/QVePOQ" target="_blank">View demo on CodePen</a>
|
||
</p>
|
||
|
||
<h3 id="video">Video</h3>
|
||
|
||
<p>
|
||
YouTube and Vimeo videos can be used with fancybox by just providing the page URL. Link to MP4 video
|
||
directly or use trigger element to display hidden <code><video></code> element.
|
||
</p>
|
||
|
||
<p>
|
||
Use
|
||
<code>data-width</code> and
|
||
<code>data-height</code> attributes to customize video dimensions and
|
||
<code>data-ratio</code> for the aspect ratio.
|
||
</p>
|
||
|
||
<pre><code><a data-fancybox href="https://www.youtube.com/watch?v=_sI_Ps7JSEk">
|
||
YouTube video
|
||
</a>
|
||
|
||
<a data-fancybox href="https://vimeo.com/191947042">
|
||
Vimeo video
|
||
</a>
|
||
|
||
<a data-fancybox data-width="640" data-height="360" href="video.mp4">
|
||
Direct link to MP4 video
|
||
</a>
|
||
|
||
<a data-fancybox href="#myVideo">
|
||
HTML5 video element
|
||
</a>
|
||
|
||
<video width="640" height="320" controls id="myVideo" style="display:none;">
|
||
<source src="https://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.mp4" type="video/mp4">
|
||
<source src="https://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.webm" type="video/webm">
|
||
<source src="https://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.ogv" type="video/ogg">
|
||
Your browser doesn't support HTML5 video tag.
|
||
</video></code></pre>
|
||
<p class="demo">
|
||
<a href="https://codepen.io/fancyapps/pen/GXVLyr?editors=1010" target="_blank">View demo on CodePen</a>
|
||
</p>
|
||
|
||
<p>
|
||
Controlling YouTube & Vimeo video via URL parameters:
|
||
</p>
|
||
|
||
<pre><code><a data-fancybox href="https://www.youtube.com/watch?v=_sI_Ps7JSEk&amp;autoplay=1&amp;rel=0&amp;controls=0&amp;showinfo=0">
|
||
YouTube video - hide controls and info
|
||
</a>
|
||
|
||
<a data-fancybox href="https://vimeo.com/191947042?color=f00">
|
||
Vimeo video - custom color
|
||
</a></code></pre>
|
||
<p class="demo">
|
||
<a href="https://codepen.io/fancyapps/pen/NLQmzy?editors=1000" target="_blank">View demo on CodePen</a>
|
||
</p>
|
||
|
||
<p>
|
||
Via JavaScript:
|
||
</p>
|
||
|
||
<pre><code>$('[data-fancybox]').fancybox({
|
||
youtube : {
|
||
controls : 0,
|
||
showinfo : 0
|
||
},
|
||
vimeo : {
|
||
color : 'f00'
|
||
}
|
||
});</code></pre>
|
||
<p class="demo">
|
||
<a href="https://codepen.io/fancyapps/pen/WgVWKz?editors=1010" target="_blank">View demo on CodePen</a>
|
||
</p>
|
||
|
||
|
||
|
||
<h3 id="iframe">Iframe</h3>
|
||
|
||
<p>
|
||
If you need to display content from another page, add <code>data-fancybox</code> and <code>data-type="iframe"</code>
|
||
attributes to your link. This would create <code><iframe></iframe></code> element that allows to
|
||
embed an entire web document inside the modal.
|
||
</p>
|
||
|
||
<pre><code><a data-fancybox data-type="iframe" data-src="http://codepen.io/fancyapps/full/jyEGGG/" href="javascript:;">
|
||
Webpage
|
||
</a>
|
||
|
||
<a data-fancybox data-type="iframe" data-src="https://mozilla.github.io/pdf.js/web/viewer.html" href="javascript:;">
|
||
Sample PDF file
|
||
</a>
|
||
</code></pre>
|
||
<p class="demo">
|
||
<a href="https://codepen.io/fancyapps/pen/RYXOeK?editors=1000" target="_blank">View demo on CodePen</a>
|
||
</p>
|
||
|
||
<p>
|
||
If you have not disabled iframe preloading (using
|
||
<code>preload</code> option), the script will atempt to calculate content dimensions and will adjust
|
||
width/height of <code><iframe></iframe></code> to fit with content in it. Keep in mind, that due to
|
||
<a href="https://en.wikipedia.org/wiki/Same-origin_policy" target="_blank">same origin policy</a>, there
|
||
are some limitations.
|
||
</p>
|
||
|
||
<p>
|
||
This example will disable iframe preloading and will display small close button next to iframe instead of
|
||
the toolbar:
|
||
</p>
|
||
|
||
<pre><code>$('[data-fancybox]').fancybox({
|
||
toolbar : false,
|
||
smallBtn : true,
|
||
iframe : {
|
||
preload : false
|
||
}
|
||
})
|
||
</code></pre>
|
||
<p class="demo">
|
||
<a href="https://codepen.io/fancyapps/pen/pOMBQx" target="_blank">View demo on CodePen</a>
|
||
</p>
|
||
|
||
|
||
<p>
|
||
Iframe dimensions can be controlled by CSS:
|
||
</p>
|
||
|
||
<pre><code>.fancybox-slide--iframe .fancybox-content {
|
||
width : 800px;
|
||
height : 600px;
|
||
max-width : 80%;
|
||
max-height : 80%;
|
||
margin: 0;
|
||
}</code></pre>
|
||
|
||
<p>
|
||
These CSS rules can be overridden by JS, if needed:
|
||
</p>
|
||
|
||
<pre><code>$("[data-fancybox]").fancybox({
|
||
iframe : {
|
||
css : {
|
||
width : '600px'
|
||
}
|
||
}
|
||
});</code></pre>
|
||
|
||
<p>
|
||
How to access and control fancybox in parent window from inside an iframe:
|
||
</p>
|
||
|
||
<pre><code>// Close current fancybox instance
|
||
parent.jQuery.fancybox.getInstance().close();
|
||
|
||
// Adjust iframe height according to the contents
|
||
parent.jQuery.fancybox.getInstance().update();
|
||
</code></pre>
|
||
|
||
<h3 id="inline">Inline</h3>
|
||
|
||
<p>
|
||
fancybox can be used to display any HTML element on the page.
|
||
First, create a hidden element with unique ID:
|
||
</p>
|
||
|
||
<pre><code><div style="display: none;" id="hidden-content">
|
||
<h2>Hello</h2>
|
||
<p>You are awesome.</p>
|
||
</div></code></pre>
|
||
|
||
<p>
|
||
Then simply create a link having
|
||
<code>data-src</code> attribute that matches ID of the element you want to open (preceded by a hash mark
|
||
(#); in this example - <code>#hidden-content</code>):
|
||
</p>
|
||
|
||
<pre><code><a data-fancybox data-src="#hidden-content" href="javascript:;">
|
||
Trigger the fancybox
|
||
</a></code></pre>
|
||
<p class="demo">
|
||
<a href="https://codepen.io/fancyapps/pen/zJgXyg?editors=1100" target="_blank">View demo on CodePen</a>
|
||
</p>
|
||
|
||
<p>
|
||
The script will append small close button (if you have not disabled by
|
||
<code>smallBtn:false</code>) and will not apply any styles except for centering. Therefore you can easily
|
||
set custom dimensions using CSS.
|
||
</p>
|
||
|
||
<p>
|
||
<span class="badge badge-info">Info</span> If necessary, you can make your element (and similarly any other
|
||
html content) scrollable by adding additional wrapping element and some CSS -
|
||
|
||
<a href="https://codepen.io/fancyapps/pen/yxmrwG?editors=1100" target="_blank">view demo on CodePen</a>.
|
||
</p>
|
||
|
||
|
||
<h3 id="ajax">Ajax</h3>
|
||
|
||
<p>
|
||
To load your content via AJAX, you need to add a
|
||
<code>data-type="ajax"</code> attribute to your link:
|
||
</p>
|
||
|
||
<pre><code><a data-fancybox data-type="ajax" data-src="my_page.com/path/to/ajax/" href="javascript:;">
|
||
AJAX content
|
||
</a></code></pre>
|
||
<p class="demo">
|
||
<a href="https://codepen.io/fancyapps/pen/yxmrWZ?editors=1100" target="_blank">View demo on CodePen</a>
|
||
</p>
|
||
|
||
<p>
|
||
Additionally it is possible to define a selector with the
|
||
<code>data-filter</code> attribute to show only a part of the response. The selector can be any string,
|
||
that is a valid jQuery selector:
|
||
</p>
|
||
|
||
<pre><code><a data-fancybox data-type="ajax" data-src="my_page.com/path/to/ajax/" data-filter="#two" href="javascript:;">
|
||
AJAX content
|
||
</a>
|
||
</code></pre>
|
||
<p class="demo">
|
||
<a href="https://codepen.io/fancyapps/pen/jvgRRe?editors=1100" target="_blank">View demo on CodePen</a>
|
||
</p>
|
||
|
||
</section>
|
||
|
||
|
||
<section id="options">
|
||
<h2>Options</h2>
|
||
|
||
<p>
|
||
Quick reference for all default options as defined in the source:
|
||
</p>
|
||
|
||
<pre>var defaults = {
|
||
// Close existing modals
|
||
// Set this to false if you do not need to stack multiple instances
|
||
closeExisting: false,
|
||
|
||
// Enable infinite gallery navigation
|
||
loop: false,
|
||
|
||
// Horizontal space between slides
|
||
gutter: 50,
|
||
|
||
// Enable keyboard navigation
|
||
keyboard: true,
|
||
|
||
// Should allow caption to overlap the content
|
||
preventCaptionOverlap: true,
|
||
|
||
// Should display navigation arrows at the screen edges
|
||
arrows: true,
|
||
|
||
// Should display counter at the top left corner
|
||
infobar: true,
|
||
|
||
// Should display close button (using `btnTpl.smallBtn` template) over the content
|
||
// Can be true, false, "auto"
|
||
// If "auto" - will be automatically enabled for "html", "inline" or "ajax" items
|
||
smallBtn: "auto",
|
||
|
||
// Should display toolbar (buttons at the top)
|
||
// Can be true, false, "auto"
|
||
// If "auto" - will be automatically hidden if "smallBtn" is enabled
|
||
toolbar: "auto",
|
||
|
||
// What buttons should appear in the top right corner.
|
||
// Buttons will be created using templates from `btnTpl` option
|
||
// and they will be placed into toolbar (class="fancybox-toolbar"` element)
|
||
buttons: [
|
||
"zoom",
|
||
//"share",
|
||
"slideShow",
|
||
//"fullScreen",
|
||
//"download",
|
||
"thumbs",
|
||
"close"
|
||
],
|
||
|
||
// Detect "idle" time in seconds
|
||
idleTime: 3,
|
||
|
||
// Disable right-click and use simple image protection for images
|
||
protect: false,
|
||
|
||
// Shortcut to make content "modal" - disable keyboard navigtion, hide buttons, etc
|
||
modal: false,
|
||
|
||
image: {
|
||
// Wait for images to load before displaying
|
||
// true - wait for image to load and then display;
|
||
// false - display thumbnail and load the full-sized image over top,
|
||
// requires predefined image dimensions (`data-width` and `data-height` attributes)
|
||
preload: false
|
||
},
|
||
|
||
ajax: {
|
||
// Object containing settings for ajax request
|
||
settings: {
|
||
// This helps to indicate that request comes from the modal
|
||
// Feel free to change naming
|
||
data: {
|
||
fancybox: true
|
||
}
|
||
}
|
||
},
|
||
|
||
iframe: {
|
||
// Iframe template
|
||
tpl:
|
||
'<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" allowfullscreen allow="autoplay; fullscreen" src=""></iframe>',
|
||
|
||
// Preload iframe before displaying it
|
||
// This allows to calculate iframe content width and height
|
||
// (note: Due to "Same Origin Policy", you can't get cross domain data).
|
||
preload: true,
|
||
|
||
// Custom CSS styling for iframe wrapping element
|
||
// You can use this to set custom iframe dimensions
|
||
css: {},
|
||
|
||
// Iframe tag attributes
|
||
attr: {
|
||
scrolling: "auto"
|
||
}
|
||
},
|
||
|
||
// For HTML5 video only
|
||
video: {
|
||
tpl:
|
||
'<video class="fancybox-video" controls controlsList="nodownload" poster="{{poster}}">' +
|
||
'<source src="{{src}}" type="{{format}}" />' +
|
||
'Sorry, your browser doesn\'t support embedded videos, <a href="{{src}}">download</a> and watch with your favorite video player!' +
|
||
"</video>",
|
||
format: "", // custom video format
|
||
autoStart: true
|
||
},
|
||
|
||
// Default content type if cannot be detected automatically
|
||
defaultType: "image",
|
||
|
||
// Open/close animation type
|
||
// Possible values:
|
||
// false - disable
|
||
// "zoom" - zoom images from/to thumbnail
|
||
// "fade"
|
||
// "zoom-in-out"
|
||
//
|
||
animationEffect: "zoom",
|
||
|
||
// Duration in ms for open/close animation
|
||
animationDuration: 366,
|
||
|
||
// Should image change opacity while zooming
|
||
// If opacity is "auto", then opacity will be changed if image and thumbnail have different aspect ratios
|
||
zoomOpacity: "auto",
|
||
|
||
// Transition effect between slides
|
||
//
|
||
// Possible values:
|
||
// false - disable
|
||
// "fade'
|
||
// "slide'
|
||
// "circular'
|
||
// "tube'
|
||
// "zoom-in-out'
|
||
// "rotate'
|
||
//
|
||
transitionEffect: "fade",
|
||
|
||
// Duration in ms for transition animation
|
||
transitionDuration: 366,
|
||
|
||
// Custom CSS class for slide element
|
||
slideClass: "",
|
||
|
||
// Custom CSS class for layout
|
||
baseClass: "",
|
||
|
||
// Base template for layout
|
||
baseTpl:
|
||
'<div class="fancybox-container" role="dialog" tabindex="-1">' +
|
||
'<div class="fancybox-bg"></div>' +
|
||
'<div class="fancybox-inner">' +
|
||
'<div class="fancybox-infobar"><span data-fancybox-index></span>&nbsp;/&nbsp;<span data-fancybox-count></span></div>' +
|
||
'<div class="fancybox-toolbar">{{buttons}}</div>' +
|
||
'<div class="fancybox-navigation">{{arrows}}</div>' +
|
||
'<div class="fancybox-stage"></div>' +
|
||
'<div class="fancybox-caption"></div>' +
|
||
"</div>" +
|
||
"</div>",
|
||
|
||
// Loading indicator template
|
||
spinnerTpl: '<div class="fancybox-loading"></div>',
|
||
|
||
// Error message template
|
||
errorTpl: '<div class="fancybox-error"><p>{{ERROR}}</p></div>',
|
||
|
||
btnTpl: {
|
||
download:
|
||
'<a download data-fancybox-download class="fancybox-button fancybox-button--download" title="{{DOWNLOAD}}" href="javascript:;">' +
|
||
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.62 17.09V19H5.38v-1.91zm-2.97-6.96L17 11.45l-5 4.87-5-4.87 1.36-1.32 2.68 2.64V5h1.92v7.77z"/></svg>' +
|
||
"</a>",
|
||
|
||
zoom:
|
||
'<button data-fancybox-zoom class="fancybox-button fancybox-button--zoom" title="{{ZOOM}}">' +
|
||
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.7 17.3l-3-3a5.9 5.9 0 0 0-.6-7.6 5.9 5.9 0 0 0-8.4 0 5.9 5.9 0 0 0 0 8.4 5.9 5.9 0 0 0 7.7.7l3 3a1 1 0 0 0 1.3 0c.4-.5.4-1 0-1.5zM8.1 13.8a4 4 0 0 1 0-5.7 4 4 0 0 1 5.7 0 4 4 0 0 1 0 5.7 4 4 0 0 1-5.7 0z"/></svg>' +
|
||
"</button>",
|
||
|
||
close:
|
||
'<button data-fancybox-close class="fancybox-button fancybox-button--close" title="{{CLOSE}}">' +
|
||
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 10.6L6.6 5.2 5.2 6.6l5.4 5.4-5.4 5.4 1.4 1.4 5.4-5.4 5.4 5.4 1.4-1.4-5.4-5.4 5.4-5.4-1.4-1.4-5.4 5.4z"/></svg>' +
|
||
"</button>",
|
||
|
||
// Arrows
|
||
arrowLeft:
|
||
'<button data-fancybox-prev class="fancybox-button fancybox-button--arrow_left" title="{{PREV}}">' +
|
||
'<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.28 15.7l-1.34 1.37L5 12l4.94-5.07 1.34 1.38-2.68 2.72H19v1.94H8.6z"/></svg></div>' +
|
||
"</button>",
|
||
|
||
arrowRight:
|
||
'<button data-fancybox-next class="fancybox-button fancybox-button--arrow_right" title="{{NEXT}}">' +
|
||
'<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.4 12.97l-2.68 2.72 1.34 1.38L19 12l-4.94-5.07-1.34 1.38 2.68 2.72H5v1.94z"/></svg></div>' +
|
||
"</button>",
|
||
|
||
// This small close button will be appended to your html/inline/ajax content by default,
|
||
// if "smallBtn" option is not set to false
|
||
smallBtn:
|
||
'<button type="button" data-fancybox-close class="fancybox-button fancybox-close-small" title="{{CLOSE}}">' +
|
||
'<svg xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 24 24"><path d="M13 12l5-5-1-1-5 5-5-5-1 1 5 5-5 5 1 1 5-5 5 5 1-1z"/></svg>' +
|
||
"</button>"
|
||
},
|
||
|
||
// Container is injected into this element
|
||
parentEl: "body",
|
||
|
||
// Hide browser vertical scrollbars; use at your own risk
|
||
hideScrollbar: true,
|
||
|
||
// Focus handling
|
||
// ==============
|
||
|
||
// Try to focus on the first focusable element after opening
|
||
autoFocus: true,
|
||
|
||
// Put focus back to active element after closing
|
||
backFocus: true,
|
||
|
||
// Do not let user to focus on element outside modal content
|
||
trapFocus: true,
|
||
|
||
// Module specific options
|
||
// =======================
|
||
|
||
fullScreen: {
|
||
autoStart: false
|
||
},
|
||
|
||
// Set `touch: false` to disable panning/swiping
|
||
touch: {
|
||
vertical: true, // Allow to drag content vertically
|
||
momentum: true // Continue movement after releasing mouse/touch when panning
|
||
},
|
||
|
||
// Hash value when initializing manually,
|
||
// set `false` to disable hash change
|
||
hash: null,
|
||
|
||
// Customize or add new media types
|
||
// Example:
|
||
/*
|
||
media : {
|
||
youtube : {
|
||
params : {
|
||
autoplay : 0
|
||
}
|
||
}
|
||
}
|
||
*/
|
||
media: {},
|
||
|
||
slideShow: {
|
||
autoStart: false,
|
||
speed: 3000
|
||
},
|
||
|
||
thumbs: {
|
||
autoStart: false, // Display thumbnails on opening
|
||
hideOnClose: true, // Hide thumbnail grid when closing animation starts
|
||
parentEl: ".fancybox-container", // Container is injected into this element
|
||
axis: "y" // Vertical (y) or horizontal (x) scrolling
|
||
},
|
||
|
||
// Use mousewheel to navigate gallery
|
||
// If 'auto' - enabled for images only
|
||
wheel: "auto",
|
||
|
||
// Callbacks
|
||
//==========
|
||
|
||
// See Documentation/API/Events for more information
|
||
// Example:
|
||
/*
|
||
afterShow: function( instance, current ) {
|
||
console.info( 'Clicked element:' );
|
||
console.info( current.opts.$orig );
|
||
}
|
||
*/
|
||
|
||
onInit: $.noop, // When instance has been initialized
|
||
|
||
beforeLoad: $.noop, // Before the content of a slide is being loaded
|
||
afterLoad: $.noop, // When the content of a slide is done loading
|
||
|
||
beforeShow: $.noop, // Before open animation starts
|
||
afterShow: $.noop, // When content is done loading and animating
|
||
|
||
beforeClose: $.noop, // Before the instance attempts to close. Return false to cancel the close.
|
||
afterClose: $.noop, // After instance has been closed
|
||
|
||
onActivate: $.noop, // When instance is brought to front
|
||
onDeactivate: $.noop, // When other instance has been activated
|
||
|
||
// Interaction
|
||
// ===========
|
||
|
||
// Use options below to customize taken action when user clicks or double clicks on the fancyBox area,
|
||
// each option can be string or method that returns value.
|
||
//
|
||
// Possible values:
|
||
// "close" - close instance
|
||
// "next" - move to next gallery item
|
||
// "nextOrClose" - move to next gallery item or close if gallery has only one item
|
||
// "toggleControls" - show/hide controls
|
||
// "zoom" - zoom image (if loaded)
|
||
// false - do nothing
|
||
|
||
// Clicked on the content
|
||
clickContent: function(current, event) {
|
||
return current.type === "image" ? "zoom" : false;
|
||
},
|
||
|
||
// Clicked on the slide
|
||
clickSlide: "close",
|
||
|
||
// Clicked on the background (backdrop) element;
|
||
// if you have not changed the layout, then most likely you need to use `clickSlide` option
|
||
clickOutside: "close",
|
||
|
||
// Same as previous two, but for double click
|
||
dblclickContent: false,
|
||
dblclickSlide: false,
|
||
dblclickOutside: false,
|
||
|
||
// Custom options when mobile device is detected
|
||
// =============================================
|
||
|
||
mobile: {
|
||
preventCaptionOverlap: false,
|
||
idleTime: false,
|
||
clickContent: function(current, event) {
|
||
return current.type === "image" ? "toggleControls" : false;
|
||
},
|
||
clickSlide: function(current, event) {
|
||
return current.type === "image" ? "toggleControls" : "close";
|
||
},
|
||
dblclickContent: function(current, event) {
|
||
return current.type === "image" ? "zoom" : false;
|
||
},
|
||
dblclickSlide: function(current, event) {
|
||
return current.type === "image" ? "zoom" : false;
|
||
}
|
||
},
|
||
|
||
// Internationalization
|
||
// ====================
|
||
|
||
lang: "en",
|
||
i18n: {
|
||
en: {
|
||
CLOSE: "Close",
|
||
NEXT: "Next",
|
||
PREV: "Previous",
|
||
ERROR: "The requested content cannot be loaded. <br/> Please try again later.",
|
||
PLAY_START: "Start slideshow",
|
||
PLAY_STOP: "Pause slideshow",
|
||
FULL_SCREEN: "Full screen",
|
||
THUMBS: "Thumbnails",
|
||
DOWNLOAD: "Download",
|
||
SHARE: "Share",
|
||
ZOOM: "Zoom"
|
||
},
|
||
de: {
|
||
CLOSE: "Schliessen",
|
||
NEXT: "Weiter",
|
||
PREV: "Zurück",
|
||
ERROR: "Die angeforderten Daten konnten nicht geladen werden. <br/> Bitte versuchen Sie es später nochmal.",
|
||
PLAY_START: "Diaschau starten",
|
||
PLAY_STOP: "Diaschau beenden",
|
||
FULL_SCREEN: "Vollbild",
|
||
THUMBS: "Vorschaubilder",
|
||
DOWNLOAD: "Herunterladen",
|
||
SHARE: "Teilen",
|
||
ZOOM: "Maßstab"
|
||
}
|
||
}
|
||
};
|
||
</pre>
|
||
|
||
|
||
<p>
|
||
Set instance options by passing a valid object to <code>fancybox()</code> method:
|
||
</p>
|
||
|
||
<pre><code>$('[data-fancybox="gallery"]').fancybox({
|
||
thumbs : {
|
||
autoStart : true
|
||
}
|
||
});</code></pre>
|
||
|
||
|
||
<p>
|
||
Plugin options / defaults are exposed in
|
||
<code>$.fancybox.defaults</code> namespace so you can easily adjust them globally:
|
||
</p>
|
||
|
||
<pre><code>$.fancybox.defaults.animationEffect = "fade";</code></pre>
|
||
|
||
<p>
|
||
Custom options for each element individually can be set by adding a
|
||
<code>data-options</code> attribute to the element.
|
||
This attribute should contain the properly formatted JSON object
|
||
(remember, strings should be wrapped in double quotes).
|
||
</p>
|
||
<p>
|
||
It is also possible to quickly set any option using
|
||
<em>parameterized</em> name of the selected option, for example,
|
||
<code>animationEffect</code> would be <code>data-animation-effect</code>:
|
||
</p>
|
||
|
||
<pre><code><a data-fancybox data-options='{"caption" : "My caption", "src" : "https://codepen.io/about/", "type" : "iframe"}' href="javascript:;" class="btn btn-primary">
|
||
Example #1
|
||
</a>
|
||
|
||
<a data-fancybox data-animation-effect="false" href="https://source.unsplash.com/0JYgd2QuMfw/1500x1000" class="btn btn-primary">
|
||
Example #2
|
||
</a>
|
||
</code></pre>
|
||
<p class="demo">
|
||
<a href="https://codepen.io/fancyapps/pen/PdMgrO?editors=1000" target="_blank">View demo on CodePen</a>
|
||
</p>
|
||
|
||
</section>
|
||
<section id="api">
|
||
|
||
<h2>API</h2>
|
||
|
||
<p>
|
||
The fancybox API offers a couple of methods to control fancybox. This gives you the ability to extend the
|
||
plugin and to integrate it with other web application components.
|
||
</p>
|
||
|
||
<h3 id="core_methods">Core methods</h3>
|
||
|
||
<p>
|
||
Core methods are methods which affect/handle instances:
|
||
</p>
|
||
|
||
|
||
<pre><code>// Start new fancybox instance
|
||
$.fancybox.open( items, opts, index );
|
||
|
||
// Get refrence to currently active fancybox instance
|
||
$.fancybox.getInstance();
|
||
|
||
// Close currently active fancybox instance (pass `true` to close all instances)
|
||
$.fancybox.close();
|
||
|
||
// Close all instances and unbind all events
|
||
$.fancybox.destroy();
|
||
</code></pre>
|
||
|
||
|
||
<h3 id="api_usage">Starting fancybox</h3>
|
||
|
||
<p>
|
||
When creating group objects manually, each item should follow this pattern:
|
||
</p>
|
||
|
||
<pre><code>{
|
||
src : '' // Source of the content
|
||
type : '' // Content type: image|inline|ajax|iframe|html (optional)
|
||
opts : {} // Object containing item options (optional)
|
||
}
|
||
</code></pre>
|
||
|
||
<p>
|
||
Example of opening image gallery programmatically:
|
||
</p>
|
||
|
||
<pre><code>$.fancybox.open([
|
||
{
|
||
src : '1_b.jpg',
|
||
opts : {
|
||
caption : 'First caption',
|
||
thumb : '1_s.jpg'
|
||
}
|
||
},
|
||
{
|
||
src : '2_b.jpg',
|
||
opts : {
|
||
caption : 'Second caption',
|
||
thumb : '2_s.jpg'
|
||
}
|
||
}
|
||
], {
|
||
loop : false
|
||
});</code></pre>
|
||
<p class="demo">
|
||
<a href="https://codepen.io/fancyapps/pen/wEVbdY?editors=1010" target="_blank">View demo on CodePen</a>
|
||
</p>
|
||
|
||
<p>
|
||
It is also possible to pass only one object. Example of opening inline content:
|
||
</p>
|
||
|
||
<pre><code>$.fancybox.open({
|
||
src : '#hidden-content',
|
||
type : 'inline',
|
||
opts : {
|
||
afterShow : function( instance, current ) {
|
||
console.info( 'done!' );
|
||
}
|
||
}
|
||
});
|
||
</code></pre>
|
||
<p class="demo">
|
||
<a href="https://codepen.io/fancyapps/pen/mGNYwX?editors=1010" target="_blank">View demo on CodePen</a>
|
||
</p>
|
||
|
||
<p>
|
||
If you wish to quickly display some html content (for example, a message), then you can use a simpler
|
||
syntax. Do not forget to use a wrapping element around your content.
|
||
</p>
|
||
|
||
<pre><code>$.fancybox.open('<div class="message"><h2>Hello!</h2><p>You are awesome!</p></div>');</code></pre>
|
||
<p class="demo">
|
||
<a href="https://codepen.io/fancyapps/pen/qMeGVr" target="_blank">View demo on CodePen</a>
|
||
</p>
|
||
|
||
<p>
|
||
Group items can be collection of jQuery objects, too.
|
||
This can be used, for example, to display group of inline elements:
|
||
</p>
|
||
|
||
<pre><code>$('#test').on('click', function() {
|
||
$.fancybox.open( $('.inline-gallery'), {
|
||
touch: false
|
||
});
|
||
});</code></pre>
|
||
<p class="demo">
|
||
<a href="https://codepen.io/fancyapps/pen/GXVayG?editors=1010" target="_blank">View demo on CodePen</a>
|
||
</p>
|
||
|
||
|
||
<h3 id="instance_methods">Instance methods</h3>
|
||
|
||
<p>
|
||
In order to use these methods, you need an instance of the plugin's object.
|
||
There are 3 common ways to get the reference.
|
||
</p>
|
||
|
||
<p>
|
||
1) Using API method to get currently active instance:
|
||
</p>
|
||
|
||
<pre><code>var instance = $.fancybox.getInstance();</code></pre>
|
||
|
||
<p>
|
||
2) While starting fancybox programmatically:
|
||
</p>
|
||
<pre><code>var instance = $.fancybox.open(
|
||
// Your content and options
|
||
);</code></pre>
|
||
|
||
<p>
|
||
3) From within the callback - first argument is always a reference to current instance:
|
||
</p>
|
||
|
||
<pre><code>$('[data-fancybox="gallery"]').fancybox({
|
||
afterShow : function( instance, current ) {
|
||
console.info( instance );
|
||
}
|
||
});</code></pre>
|
||
<p>
|
||
Once you have a reference to fancybox instance the following methods are available:
|
||
</p>
|
||
|
||
<pre><code>// Go to next gallery item
|
||
instance.next( duration );
|
||
|
||
// Go to previous gallery item
|
||
instance.previous( duration );
|
||
|
||
// Switch to selected gallery item
|
||
instance.jumpTo( index, duration );
|
||
|
||
// Check if current image dimensions are smaller than actual
|
||
instance.isScaledDown();
|
||
|
||
// Scale image to the actual size of the image
|
||
instance.scaleToActual( x, y, duration );
|
||
|
||
// Check if image dimensions exceed parent element
|
||
instance.canPan();
|
||
|
||
// Scale image to fit inside parent element
|
||
instance.scaleToFit( duration );
|
||
|
||
// Update position and content of all slides
|
||
instance.update();
|
||
|
||
// Update slide position and scale content to fit
|
||
instance.updateSlide( slide );
|
||
|
||
// Update infobar values, navigation button states and reveal caption
|
||
instance.updateControls( force );
|
||
|
||
// Load custom content into the slide
|
||
instance.setContent( slide, content );
|
||
|
||
// Show loading icon inside the slide
|
||
instance.showLoading( slide );
|
||
|
||
// Remove loading icon from the slide
|
||
instance.hideLoading( slide );
|
||
|
||
// Try to find and focus on the first focusable element
|
||
instance.focus();
|
||
|
||
// Activates current instance, brings it to the front
|
||
instance.activate();
|
||
|
||
// Close instance
|
||
instance.close();
|
||
</code></pre>
|
||
|
||
<p>
|
||
You can also do something like this:
|
||
</p>
|
||
|
||
<pre><code>$.fancybox.getInstance().jumpTo(1);</code></pre>
|
||
|
||
<p>
|
||
or simply:
|
||
</p>
|
||
|
||
<pre><code>$.fancybox.getInstance('jumpTo', 1);</code></pre>
|
||
|
||
<h3 id="events">Events</h3>
|
||
|
||
<p>
|
||
fancybox fires several events:
|
||
</p>
|
||
|
||
<pre><code>beforeLoad : Before the content of a slide is being loaded
|
||
afterLoad : When the content of a slide is done loading
|
||
|
||
beforeShow : Before open animation starts
|
||
afterShow : When content is done loading and animating
|
||
|
||
beforeClose : Before the instance attempts to close. Return false to cancel the close.
|
||
afterClose : After instance has been closed
|
||
|
||
onInit : When instance has been initialized
|
||
onActivate : When instance is brought to front
|
||
onDeactivate : When other instance has been activated</code></pre>
|
||
|
||
<p>
|
||
Event callbacks can be set as function properties of the options object passed to fancybox initialization
|
||
function:
|
||
</p>
|
||
|
||
<pre><code><script type="text/javascript">
|
||
$("[data-fancybox]").fancybox({
|
||
afterShow: function( instance, slide ) {
|
||
|
||
// Tip: Each event passes useful information within the event object:
|
||
|
||
// Object containing references to interface elements
|
||
// (background, buttons, caption, etc)
|
||
// console.info( instance.$refs );
|
||
|
||
// Current slide options
|
||
// console.info( slide.opts );
|
||
|
||
// Clicked element
|
||
// console.info( slide.opts.$orig );
|
||
|
||
// Reference to DOM element of the slide
|
||
// console.info( slide.$slide );
|
||
|
||
}
|
||
});
|
||
</script></code></pre>
|
||
|
||
<p>
|
||
Each callback receives two parameters - current fancybox instance and current gallery object, if exists.
|
||
</p>
|
||
|
||
<p>
|
||
It is also possible to attach event handler for all instances. To prevent interfering with other scripts,
|
||
these events have been namespaced to <code>.fb</code>.
|
||
These handlers receive 3 parameters - event, current fancybox instance and current gallery object.
|
||
</p>
|
||
<p>
|
||
Here is an example of binding to the
|
||
<code>afterShow</code> event:
|
||
</p>
|
||
|
||
<pre><code>$(document).on('afterShow.fb', function( e, instance, slide ) {
|
||
// Your code goes here
|
||
});</code></pre>
|
||
|
||
|
||
<p>
|
||
If you wish to prevent closing of the modal (for example, after form submit), you can use
|
||
<code>beforeClose</code> callback. Simply return
|
||
<code>false</code>:
|
||
</p>
|
||
|
||
<pre><code>beforeClose : function( instance, current, e ) {
|
||
if ( $('#my-field').val() == '' ) {
|
||
return false;
|
||
}
|
||
}
|
||
</code></pre>
|
||
|
||
</section>
|
||
<section id="modules">
|
||
<h2>Modules</h2>
|
||
|
||
<p>
|
||
fancybox code is split into several files (modules) that extend core functionality. You can build your own
|
||
fancybox version by excluding unnecessary modules, if needed.
|
||
Each one has their own <code>js</code> and/or <code>css</code> files.
|
||
</p>
|
||
|
||
<p>
|
||
Some modules can be customized and controlled programmatically. List of all possible options:
|
||
</p>
|
||
|
||
<pre><code>fullScreen: {
|
||
autoStart: false
|
||
},
|
||
|
||
touch : {
|
||
vertical : true, // Allow to drag content vertically
|
||
momentum : true // Continuous movement when panning
|
||
},
|
||
|
||
// Hash value when initializing manually,
|
||
// set `false` to disable hash change
|
||
hash : null,
|
||
|
||
// Customize or add new media types
|
||
// Example:
|
||
/*
|
||
media : {
|
||
youtube : {
|
||
params : {
|
||
autoplay : 0
|
||
}
|
||
}
|
||
}
|
||
*/
|
||
media : {},
|
||
|
||
slideShow : {
|
||
autoStart : false,
|
||
speed : 4000
|
||
},
|
||
|
||
thumbs : {
|
||
autoStart : false, // Display thumbnails on opening
|
||
hideOnClose : true, // Hide thumbnail grid when closing animation starts
|
||
parentEl : '.fancybox-container', // Container is injected into this element
|
||
axis : 'y' // Vertical (y) or horizontal (x) scrolling
|
||
},
|
||
|
||
share: {
|
||
url: function(instance, item) {
|
||
return (
|
||
(!instance.currentHash && !(item.type === "inline" || item.type === "html") ? item.origSrc || item.src : false) || window.location
|
||
);
|
||
},
|
||
tpl:
|
||
'<div class="fancybox-share">' +
|
||
"<h1>{{SHARE}}</h1>" +
|
||
"<p>" +
|
||
'<a class="fancybox-share__button fancybox-share__button--fb" href="https://www.facebook.com/sharer/sharer.php?u={{url}}">' +
|
||
'<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m287 456v-299c0-21 6-35 35-35h38v-63c-7-1-29-3-55-3-54 0-91 33-91 94v306m143-254h-205v72h196" /></svg>' +
|
||
"<span>Facebook</span>" +
|
||
"</a>" +
|
||
'<a class="fancybox-share__button fancybox-share__button--tw" href="https://twitter.com/intent/tweet?url={{url}}&text={{descr}}">' +
|
||
'<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m456 133c-14 7-31 11-47 13 17-10 30-27 37-46-15 10-34 16-52 20-61-62-157-7-141 75-68-3-129-35-169-85-22 37-11 86 26 109-13 0-26-4-37-9 0 39 28 72 65 80-12 3-25 4-37 2 10 33 41 57 77 57-42 30-77 38-122 34 170 111 378-32 359-208 16-11 30-25 41-42z" /></svg>' +
|
||
"<span>Twitter</span>" +
|
||
"</a>" +
|
||
'<a class="fancybox-share__button fancybox-share__button--pt" href="https://www.pinterest.com/pin/create/button/?url={{url}}&description={{descr}}&media={{media}}">' +
|
||
'<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m265 56c-109 0-164 78-164 144 0 39 15 74 47 87 5 2 10 0 12-5l4-19c2-6 1-8-3-13-9-11-15-25-15-45 0-58 43-110 113-110 62 0 96 38 96 88 0 67-30 122-73 122-24 0-42-19-36-44 6-29 20-60 20-81 0-19-10-35-31-35-25 0-44 26-44 60 0 21 7 36 7 36l-30 125c-8 37-1 83 0 87 0 3 4 4 5 2 2-3 32-39 42-75l16-64c8 16 31 29 56 29 74 0 124-67 124-157 0-69-58-132-146-132z" fill="#fff"/></svg>' +
|
||
"<span>Pinterest</span>" +
|
||
"</a>" +
|
||
"</p>" +
|
||
'<p><input class="fancybox-share__input" type="text" value="{{url_raw}}" /></p>' +
|
||
"</div>"
|
||
}
|
||
|
||
</code></pre>
|
||
|
||
<h5 class="mt-5">Couple of examples</h5>
|
||
|
||
<p>
|
||
Show thumbnails on start:
|
||
</p>
|
||
|
||
<pre><code>$('[data-fancybox="images"]').fancybox({
|
||
thumbs : {
|
||
autoStart : true
|
||
}
|
||
});</code></pre>
|
||
<p class="demo">
|
||
<a href="https://codepen.io/fancyapps/pen/xavNjq?editors=1010" target="_blank">View demo on CodePen</a>
|
||
</p>
|
||
|
||
<p>
|
||
Customize share url if displaying hidden video element:
|
||
</p>
|
||
|
||
<pre><code>$('[data-fancybox="test-share-url"]').fancybox({
|
||
buttons : ['share', 'close'],
|
||
hash : false,
|
||
share : {
|
||
url : function( instance, item ) {
|
||
if (item.type === 'inline' && item.contentType === 'video') {
|
||
return item.$content.find('source:first').attr('src');
|
||
}
|
||
|
||
return item.src;
|
||
}
|
||
}
|
||
});</code></pre>
|
||
<p class="demo">
|
||
<a href="https://codepen.io/fancyapps/pen/MqNdqw?editors=1010" target="_blank">View demo on CodePen</a>
|
||
</p>
|
||
|
||
<p>
|
||
If you would inspect fancybox instance object, you would find that same keys ar captialized - these are
|
||
references for each module object.
|
||
Also, you would notice that fancybox uses common naming convention to prefix jQuery objects with <code>$</code>.
|
||
</p>
|
||
|
||
<p>
|
||
This is how you, for example, can access thumbnail grid element:
|
||
</p>
|
||
|
||
<pre><code>$.fancybox.getInstance().Thumbs.$grid</code></pre>
|
||
|
||
<p>
|
||
This example shows how to call method that toggles thumbnails:
|
||
</p>
|
||
|
||
<pre><code>$.fancybox.getInstance().Thumbs.toggle();</code></pre>
|
||
|
||
<p>
|
||
List of available methods:
|
||
</p>
|
||
|
||
<pre><code>Thumbs.focus()
|
||
Thumbs.update();
|
||
Thumbs.hide();
|
||
Thumbs.show();
|
||
Thumbs.toggle();
|
||
|
||
FullScreen.request( elem );
|
||
FullScreen.exit();
|
||
FullScreen.toggle( elem );
|
||
FullScreen.isFullscreen();
|
||
FullScreen.enabled();
|
||
|
||
SlideShow.start();
|
||
SlideShow.stop();
|
||
SlideShow.toggle();
|
||
</code></pre>
|
||
|
||
<p>
|
||
If you wish to disable hash module, use this snippet (after including JS file):
|
||
</p>
|
||
|
||
<pre><code>$.fancybox.defaults.hash = false;</code></pre>
|
||
|
||
</section>
|
||
|
||
<section id="faq">
|
||
|
||
<h2>FAQ</h2>
|
||
|
||
<h3 id="faq-1">
|
||
<a href="#faq-1">#1</a> Opening/closing causes fixed element to jump</h3>
|
||
|
||
<p>
|
||
Simply add <code>compensate-for-scrollbar</code> CSS class to your fixed positioned elements.
|
||
Example of using Bootstrap navbar component:
|
||
</p>
|
||
|
||
<pre><code><nav class="navbar navbar-inverse navbar-fixed-top compensate-for-scrollbar">
|
||
<div class="container">
|
||
..
|
||
</div>
|
||
</nav></code></pre>
|
||
|
||
<p class="demo">
|
||
<a href="https://codepen.io/fancyapps/pen/MqNdPa?editors=1000" target="_blank">View demo on CodePen</a>
|
||
</p>
|
||
|
||
<p>
|
||
The script measures width of the scrollbar and creates
|
||
<code>compensate-for-scrollbar</code> CSS class that uses this value for
|
||
<code>margin-right</code> property. Therefore, if your element has
|
||
<code>width:100%</code>, you should positon it using
|
||
<code>left</code> and
|
||
<code>right</code> properties instead. Example:
|
||
</p>
|
||
|
||
<pre><code>.navbar {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
}</code></pre>
|
||
|
||
<h3 id="faq-2">
|
||
<a href="#faq-2">#2</a> How to customize caption</h3>
|
||
|
||
<p>
|
||
You can use
|
||
<code>caption</code> option that accepts a function and is called for each group element.
|
||
Example of appending image download link:
|
||
</p>
|
||
|
||
<pre><code>$( '[data-fancybox="images"]' ).fancybox({
|
||
caption : function( instance, item ) {
|
||
var caption = $(this).data('caption') || '';
|
||
|
||
if ( item.type === 'image' ) {
|
||
caption = (caption.length ? caption + '<br />' : '') + '<a href="' + item.src + '">Download image</a>' ;
|
||
}
|
||
|
||
return caption;
|
||
}
|
||
});</code></pre>
|
||
<p class="demo">
|
||
<a href="https://codepen.io/fancyapps/pen/OoKYrd?editors=1010" target="_blank">View demo on CodePen</a>
|
||
</p>
|
||
|
||
<p>
|
||
Add current image index and image count (the total number of images in the gallery) right in the caption:
|
||
</p>
|
||
|
||
<pre><code>$( '[data-fancybox="images"]' ).fancybox({
|
||
infobar : false,
|
||
caption : function( instance, item ) {
|
||
var caption = $(this).data('caption') || '';
|
||
|
||
return ( caption.length ? caption + '<br />' : '' ) + 'Image <span data-fancybox-index></span> of <span data-fancybox-count></span>';
|
||
}
|
||
});</code></pre>
|
||
<p class="demo">
|
||
<a href="https://codepen.io/fancyapps/pen/EeqzMW?editors=1010" target="_blank">View demo on CodePen</a>
|
||
</p>
|
||
|
||
<p>
|
||
Inside
|
||
<code>caption</code> method,
|
||
<code>this</code> refers to the clicked element. Example of using different source for caption:
|
||
</p>
|
||
|
||
<pre><code>$( '[data-fancybox]' ).fancybox({
|
||
caption : function( instance, item ) {
|
||
return $(this).find('figcaption').html();
|
||
}
|
||
});</code></pre>
|
||
<p class="demo">
|
||
<a href="https://codepen.io/fancyapps/pen/aaerxw" target="_blank">View demo on CodePen</a>
|
||
</p>
|
||
|
||
<h3 id="faq-3">
|
||
<a href="#faq-3">#3</a> How to create custom button in the toolbar</h3>
|
||
|
||
<p>
|
||
Example of creating reusable button:
|
||
</p>
|
||
|
||
<pre><code>// Create template for the button
|
||
$.fancybox.defaults.btnTpl.fb = '<button data-fancybox-fb class="fancybox-button fancybox-button--fb" title="Facebook">' +
|
||
'<svg viewBox="0 0 24 24">' +
|
||
'<path d="M22.676 0H1.324C.594 0 0 .593 0 1.324v21.352C0 23.408.593 24 1.324 24h11.494v-9.294h-3.13v-3.62h3.13V8.41c0-3.1 1.894-4.785 4.66-4.785 1.324 0 2.463.097 2.795.14v3.24h-1.92c-1.5 0-1.793.722-1.793 1.772v2.31h3.584l-.465 3.63h-3.12V24h6.115c.733 0 1.325-.592 1.325-1.324V1.324C24 .594 23.408 0 22.676 0"/>' +
|
||
'</svg>' +
|
||
'</button>';
|
||
|
||
// Make button clickable using event delegation
|
||
$('body').on('click', '[data-fancybox-fb]', function() {
|
||
window.open("https://www.facebook.com/sharer/sharer.php?u="+encodeURIComponent(window.location.href)+"&t="+encodeURIComponent(document.title), '','left=0,top=0,width=600,height=300,menubar=no,toolbar=no,resizable=yes,scrollbars=yes');
|
||
});
|
||
|
||
// Customize buttons
|
||
$( '[data-fancybox="images"]' ).fancybox({
|
||
buttons : [
|
||
'fb',
|
||
'close'
|
||
]
|
||
});</code></pre>
|
||
<p class="demo">
|
||
<a href="https://codepen.io/fancyapps/pen/NLQVZQ" target="_blank">View demo on CodePen</a>
|
||
</p>
|
||
|
||
<h3 id="faq-4">
|
||
<a href="#faq-4">#4</a> How to reposition thumbnail grid
|
||
</h3>
|
||
|
||
<p>
|
||
There is currenty no JS option to change thumbnail grid position. But fancybox is designed so that you can
|
||
use CSS to change position or dimension for each block (e.g., content area, caption or thumbnail grid).
|
||
This gives you freedom to completely change the look and feel of the modal window, if needed.
|
||
|
||
<a href="https://codepen.io/fancyapps/pen/PdMvML" target="_blank">View demo on CodePen</a>
|
||
</p>
|
||
|
||
<h3 id="faq-5">
|
||
<a href="#faq-5">#5</a> How to disable touch gestures/swiping
|
||
</h3>
|
||
|
||
<p>
|
||
When you want to make your content selectable or clickable, you have two options:
|
||
</p>
|
||
|
||
<ul>
|
||
<li>
|
||
disable touch gestures completely by setting
|
||
<code>touch:false</code>
|
||
</li>
|
||
<li>
|
||
add
|
||
<code>data-selectable="true"</code> attribute to your html element
|
||
</li>
|
||
</ul>
|
||
|
||
<p>
|
||
<a href="https://codepen.io/fancyapps/pen/NLQZWK?editors=1000" target="_blank">View demo on CodePen</a>
|
||
</p>
|
||
|
||
<h3 id="faq-6">
|
||
<a href="#faq-6">#6</a> Slider/carousel add's cloned duplicate items
|
||
</h3>
|
||
|
||
<p>
|
||
If you are combining fancybox with slider/carousel script and that script clones items to enable infinite
|
||
navigation, then duplicated items will appear in the gallery.
|
||
To avoid that -
|
||
1) initialise fancybox on all items except cloned;
|
||
2) add custom click event on cloned items and trigger click event on corresponding "real" item. Here is an
|
||
example using Slick slider:
|
||
</p>
|
||
<pre><code>// Init fancybox
|
||
// =============
|
||
var selector = '.slick-slide:not(.slick-cloned)';
|
||
|
||
// Skip cloned elements
|
||
$().fancybox({
|
||
selector : selector,
|
||
backFocus : false
|
||
});
|
||
|
||
// Attach custom click event on cloned elements,
|
||
// trigger click event on corresponding link
|
||
$(document).on('click', '.slick-cloned', function(e) {
|
||
$(selector)
|
||
.eq( ( $(e.currentTarget).attr("data-slick-index") || 0) % $(selector).length )
|
||
.trigger("click.fb-start", {
|
||
$trigger: $(this)
|
||
});
|
||
|
||
return false;
|
||
});
|
||
|
||
// Init Slick
|
||
// ==========
|
||
$(".main-slider").slick({
|
||
slidesToShow : 3,
|
||
infinite : true,
|
||
dots : false,
|
||
arrows : false
|
||
});</code></pre>
|
||
<p class="demo">
|
||
<a href="https://codepen.io/fancyapps/pen/NLQZBr?editors=1010" target="_blank">View demo on CodePen</a>
|
||
</p>
|
||
|
||
|
||
</section>
|
||
|
||
<section>
|
||
<p class="text-right mt-5">
|
||
<a href="#introduction">Back to Top</a>
|
||
</p>
|
||
</section>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
|
||
$(document).ready(function () {
|
||
|
||
/* Sticky nvigation */
|
||
|
||
var sticky = {
|
||
$sticky: $('.sticky'),
|
||
offsets: [],
|
||
targets: [],
|
||
stickyTop: null,
|
||
|
||
set: function () {
|
||
var self = this;
|
||
|
||
var windowTop = Math.floor($(window).scrollTop());
|
||
|
||
self.offsets = [];
|
||
self.targets = [];
|
||
|
||
// Get current top position of sticky element
|
||
self.stickyTop = self.$sticky.css('position', 'relative').offset().top;
|
||
|
||
// Cache all targets and their top positions
|
||
self.$sticky.find('a').map(function () {
|
||
var $el = $(this),
|
||
href = $el.data('target') || $el.attr('href'),
|
||
$href = /^#./.test(href) && $(href);
|
||
|
||
return $href && $href.length && $href.is(':visible') ? [[$href[0].getBoundingClientRect().top + windowTop, href]] : null;
|
||
})
|
||
.sort(function (a, b) { return a[0] - b[0] })
|
||
.each(function () {
|
||
self.offsets.push(this[0]);
|
||
self.targets.push(this[1]);
|
||
});
|
||
},
|
||
|
||
update: function () {
|
||
var self = this;
|
||
|
||
var windowTop = Math.floor($(window).scrollTop());
|
||
var $stickyLinks = self.$sticky.find('a').removeClass('active');
|
||
var stickyPosition = 'fixed';
|
||
var currentIndex = 0;
|
||
|
||
// Toggle fixed position depending on visibility
|
||
if ($(window).width() < 800 || $(window).height() < 500 || self.stickyTop > windowTop) {
|
||
stickyPosition = 'relative';
|
||
|
||
} else {
|
||
|
||
for (var i = self.offsets.length; i--;) {
|
||
if (windowTop >= self.offsets[i] - 2 && (self.offsets[i + 1] === undefined || windowTop <= self.offsets[i + 1] + 2)) {
|
||
currentIndex = i;
|
||
|
||
break;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
self.$sticky.css('position', stickyPosition).width($('#leftCol').width());
|
||
|
||
$stickyLinks.eq(currentIndex).addClass('active');
|
||
},
|
||
|
||
init: function () {
|
||
var self = this;
|
||
|
||
$(window).on('resize', function () {
|
||
self.set();
|
||
|
||
self.update();
|
||
});
|
||
|
||
$(window).on('scroll', function () {
|
||
self.update();
|
||
});
|
||
|
||
$(window).trigger('resize');
|
||
}
|
||
}
|
||
|
||
sticky.init();
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html> |