Update to Fancybox 2.1.0. Changed the way the max-width is handled. Should be better this way.
This commit is contained in:
Sébastien Lucas
parent
e1972e64bd
commit
a19b59eb1e
12 changed files with 1550 additions and 946 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 1.1 KiB |
|
|
@ -15,17 +15,24 @@
|
|||
|
||||
#fancybox-buttons ul {
|
||||
display: block;
|
||||
width: 170px;
|
||||
width: 166px;
|
||||
height: 30px;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
background: #111;
|
||||
-webkit-box-shadow: 0 1px 3px #000,0 0 0 1px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.05);
|
||||
-moz-box-shadow: 0 1px 3px #000,0 0 0 1px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.05);
|
||||
background: #111 -webkit-gradient(linear,0% 0%,0% 100%,from(rgba(255,255,255,.2)),color-stop(.5,rgba(255,255,255,.15)),color-stop(.5,rgba(255,255,255,.1)),to(rgba(255,255,255,.15)));
|
||||
background: #111 -moz-linear-gradient(top,rgba(255,255,255,.2) 0%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.15) 100%);
|
||||
border: 1px solid #111;
|
||||
border-radius: 3px;
|
||||
-webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
|
||||
-moz-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
|
||||
box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
|
||||
background: rgb(50,50,50);
|
||||
background: -moz-linear-gradient(top, rgb(68,68,68) 0%, rgb(52,52,52) 50%, rgb(41,41,41) 50%, rgb(51,51,51) 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(68,68,68)), color-stop(50%,rgb(52,52,52)), color-stop(50%,rgb(41,41,41)), color-stop(100%,rgb(51,51,51)));
|
||||
background: -webkit-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
|
||||
background: -o-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
|
||||
background: -ms-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
|
||||
background: linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#222222',GradientType=0 );
|
||||
}
|
||||
|
||||
#fancybox-buttons ul li {
|
||||
|
|
@ -42,11 +49,15 @@
|
|||
background-image: url('fancybox_buttons.png');
|
||||
background-repeat: no-repeat;
|
||||
outline: none;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
#fancybox-buttons a:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#fancybox-buttons a.btnPrev {
|
||||
width: 32px;
|
||||
background-position: 6px 0;
|
||||
background-position: 5px 0;
|
||||
}
|
||||
|
||||
#fancybox-buttons a.btnNext {
|
||||
|
|
@ -75,11 +86,11 @@
|
|||
|
||||
#fancybox-buttons a.btnClose {
|
||||
border-left: 1px solid #111;
|
||||
width: 38px;
|
||||
background-position: -57px 0px;
|
||||
width: 35px;
|
||||
background-position: -56px 0px;
|
||||
}
|
||||
|
||||
#fancybox-buttons a.btnDisabled {
|
||||
opacity : 0.5;
|
||||
opacity : 0.4;
|
||||
cursor: default;
|
||||
}
|
||||
|
|
@ -1,19 +1,21 @@
|
|||
/*!
|
||||
* Buttons helper for fancyBox
|
||||
* version: 1.0.2
|
||||
* version: 1.0.3
|
||||
* @requires fancyBox v2.0 or later
|
||||
*
|
||||
* Usage:
|
||||
* Usage:
|
||||
* $(".fancybox").fancybox({
|
||||
* buttons: {
|
||||
* position : 'top'
|
||||
* helpers : {
|
||||
* buttons: {
|
||||
* position : 'top'
|
||||
* }
|
||||
* }
|
||||
* });
|
||||
*
|
||||
*
|
||||
* Options:
|
||||
* tpl - HTML template
|
||||
* position - 'top' or 'bottom'
|
||||
*
|
||||
*
|
||||
*/
|
||||
(function ($) {
|
||||
//Shortcut for fancyBox object
|
||||
|
|
@ -21,72 +23,59 @@
|
|||
|
||||
//Add helper object
|
||||
F.helpers.buttons = {
|
||||
tpl: '<div id="fancybox-buttons"><ul><li><a class="btnPrev" title="Previous" href="javascript:;"></a></li><li><a class="btnPlay" title="Start slideshow" href="javascript:;"></a></li><li><a class="btnNext" title="Next" href="javascript:;"></a></li><li><a class="btnToggle" title="Toggle size" href="javascript:;"></a></li><li><a class="btnClose" title="Close" href="javascript:jQuery.fancybox.close();"></a></li></ul></div>',
|
||||
list: null,
|
||||
buttons: {},
|
||||
tpl : '<div id="fancybox-buttons"><ul><li><a class="btnPrev" title="Previous" href="javascript:;"></a></li><li><a class="btnPlay" title="Start slideshow" href="javascript:;"></a></li><li><a class="btnNext" title="Next" href="javascript:;"></a></li><li><a class="btnToggle" title="Toggle size" href="javascript:;"></a></li><li><a class="btnClose" title="Close" href="javascript:jQuery.fancybox.close();"></a></li></ul></div>',
|
||||
list : null,
|
||||
buttons: null,
|
||||
|
||||
update: function () {
|
||||
var toggle = this.buttons.toggle.removeClass('btnDisabled btnToggleOn');
|
||||
|
||||
//Size toggle button
|
||||
if (F.current.canShrink) {
|
||||
toggle.addClass('btnToggleOn');
|
||||
|
||||
} else if (!F.current.canExpand) {
|
||||
toggle.addClass('btnDisabled');
|
||||
}
|
||||
},
|
||||
|
||||
beforeLoad: function (opts) {
|
||||
beforeLoad: function (opts, obj) {
|
||||
//Remove self if gallery do not have at least two items
|
||||
if (F.group.length < 2) {
|
||||
F.coming.helpers.buttons = false;
|
||||
F.coming.closeBtn = true;
|
||||
|
||||
if (opts.skipSingle && obj.group.length < 2) {
|
||||
obj.helpers.buttons = false;
|
||||
obj.closeBtn = true;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
//Increase top margin to give space for buttons
|
||||
F.coming.margin[ opts.position === 'bottom' ? 2 : 0 ] += 30;
|
||||
obj.margin[ opts.position === 'bottom' ? 2 : 0 ] += 30;
|
||||
},
|
||||
|
||||
onPlayStart: function () {
|
||||
if (this.list) {
|
||||
if (this.buttons) {
|
||||
this.buttons.play.attr('title', 'Pause slideshow').addClass('btnPlayOn');
|
||||
}
|
||||
},
|
||||
|
||||
onPlayEnd: function () {
|
||||
if (this.list) {
|
||||
if (this.buttons) {
|
||||
this.buttons.play.attr('title', 'Start slideshow').removeClass('btnPlayOn');
|
||||
}
|
||||
},
|
||||
|
||||
afterShow: function (opts) {
|
||||
var buttons;
|
||||
afterShow: function (opts, obj) {
|
||||
var buttons = this.buttons;
|
||||
|
||||
if (!this.list) {
|
||||
if (!buttons) {
|
||||
this.list = $(opts.tpl || this.tpl).addClass(opts.position || 'top').appendTo('body');
|
||||
|
||||
this.buttons = {
|
||||
prev : this.list.find('.btnPrev').click( F.prev ),
|
||||
next : this.list.find('.btnNext').click( F.next ),
|
||||
play : this.list.find('.btnPlay').click( F.play ),
|
||||
buttons = {
|
||||
prev : this.list.find('.btnPrev').click( F.prev ),
|
||||
next : this.list.find('.btnNext').click( F.next ),
|
||||
play : this.list.find('.btnPlay').click( F.play ),
|
||||
toggle : this.list.find('.btnToggle').click( F.toggle )
|
||||
}
|
||||
}
|
||||
|
||||
buttons = this.buttons;
|
||||
|
||||
//Prev
|
||||
if (F.current.index > 0 || F.current.loop) {
|
||||
if (obj.index > 0 || obj.loop) {
|
||||
buttons.prev.removeClass('btnDisabled');
|
||||
} else {
|
||||
buttons.prev.addClass('btnDisabled');
|
||||
}
|
||||
|
||||
//Next / Play
|
||||
if (F.current.loop || F.current.index < F.group.length - 1) {
|
||||
if (obj.loop || obj.index < obj.group.length - 1) {
|
||||
buttons.next.removeClass('btnDisabled');
|
||||
buttons.play.removeClass('btnDisabled');
|
||||
|
||||
|
|
@ -95,11 +84,27 @@
|
|||
buttons.play.addClass('btnDisabled');
|
||||
}
|
||||
|
||||
this.update();
|
||||
this.buttons = buttons;
|
||||
|
||||
this.onUpdate(opts, obj);
|
||||
},
|
||||
|
||||
onUpdate: function () {
|
||||
this.update();
|
||||
onUpdate: function (opts, obj) {
|
||||
var toggle;
|
||||
|
||||
if (!this.buttons) {
|
||||
return;
|
||||
}
|
||||
|
||||
toggle = this.buttons.toggle.removeClass('btnDisabled btnToggleOn');
|
||||
|
||||
//Size toggle button
|
||||
if (obj.canShrink) {
|
||||
toggle.addClass('btnToggleOn');
|
||||
|
||||
} else if (!obj.canExpand) {
|
||||
toggle.addClass('btnDisabled');
|
||||
}
|
||||
},
|
||||
|
||||
beforeClose: function () {
|
||||
|
|
@ -107,8 +112,8 @@
|
|||
this.list.remove();
|
||||
}
|
||||
|
||||
this.list = null;
|
||||
this.buttons = {};
|
||||
this.list = null;
|
||||
this.buttons = null;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,19 +1,48 @@
|
|||
/*!
|
||||
/*!
|
||||
* Media helper for fancyBox
|
||||
* version: 1.0.0
|
||||
* version: 1.0.3 (Mon, 13 Aug 2012)
|
||||
* @requires fancyBox v2.0 or later
|
||||
*
|
||||
* Usage:
|
||||
* $(".fancybox").fancybox({
|
||||
* media: {}
|
||||
* helpers : {
|
||||
* media: true
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* Set custom URL parameters:
|
||||
* $(".fancybox").fancybox({
|
||||
* helpers : {
|
||||
* media: {
|
||||
* youtube : {
|
||||
* params : {
|
||||
* autoplay : 0
|
||||
* }
|
||||
* }
|
||||
* }
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* Or:
|
||||
* $(".fancybox").fancybox({,
|
||||
* helpers : {
|
||||
* media: true
|
||||
* },
|
||||
* youtube : {
|
||||
* autoplay: 0
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* Supports:
|
||||
*
|
||||
* Youtube
|
||||
* http://www.youtube.com/watch?v=opj24KnzrWo
|
||||
* http://youtu.be/opj24KnzrWo
|
||||
* Vimeo
|
||||
* http://vimeo.com/25634903
|
||||
* http://vimeo.com/40648169
|
||||
* http://vimeo.com/channels/staffpicks/38843628
|
||||
* http://vimeo.com/groups/surrealism/videos/36516384
|
||||
* http://player.vimeo.com/video/45074303
|
||||
* Metacafe
|
||||
* http://www.metacafe.com/watch/7635964/dr_seuss_the_lorax_movie_trailer/
|
||||
* http://www.metacafe.com/watch/7635964/
|
||||
|
|
@ -32,54 +61,136 @@
|
|||
* http://maps.google.com/?ll=48.859463,2.292626&spn=0.000965,0.002642&t=m&z=19&layer=c&cbll=48.859524,2.292532&panoid=YJ0lq28OOy3VT2IqIuVY0g&cbp=12,151.58,,0,-15.56
|
||||
*/
|
||||
(function ($) {
|
||||
"use strict";
|
||||
|
||||
//Shortcut for fancyBox object
|
||||
var F = $.fancybox;
|
||||
var F = $.fancybox,
|
||||
format = function( url, rez, params ) {
|
||||
params = params || '';
|
||||
|
||||
if ( $.type( params ) === "object" ) {
|
||||
params = $.param(params, true);
|
||||
}
|
||||
|
||||
$.each(rez, function(key, value) {
|
||||
url = url.replace( '$' + key, value || '' );
|
||||
});
|
||||
|
||||
if (params.length) {
|
||||
url += ( url.indexOf('?') > 0 ? '&' : '?' ) + params;
|
||||
}
|
||||
|
||||
return url;
|
||||
};
|
||||
|
||||
//Add helper object
|
||||
F.helpers.media = {
|
||||
types : {
|
||||
youtube : {
|
||||
matcher : /(youtube\.com|youtu\.be)\/(watch\?v=|v\/|u\/|embed)?([\w-]{11}|\?listType=(.*)&list=(.*)).*/i,
|
||||
params : {
|
||||
autoplay : 1,
|
||||
autohide : 1,
|
||||
fs : 1,
|
||||
rel : 0,
|
||||
hd : 1,
|
||||
wmode : 'opaque',
|
||||
enablejsapi : 1
|
||||
},
|
||||
type : 'iframe',
|
||||
url : '//www.youtube.com/embed/$3'
|
||||
},
|
||||
vimeo : {
|
||||
matcher : /(?:vimeo(?:pro)?.com)\/(?:[^\d]+)?(\d+)(?:.*)/,
|
||||
params : {
|
||||
autoplay : 1,
|
||||
hd : 1,
|
||||
show_title : 1,
|
||||
show_byline : 1,
|
||||
show_portrait : 0,
|
||||
color : '',
|
||||
fullscreen : 1
|
||||
},
|
||||
type : 'iframe',
|
||||
url : '//player.vimeo.com/video/$1'
|
||||
},
|
||||
metacafe : {
|
||||
matcher : /metacafe.com\/(?:watch|fplayer)\/([\w\-]{1,10})/,
|
||||
params : {
|
||||
autoPlay : 'yes'
|
||||
},
|
||||
type : 'swf',
|
||||
url : function( rez, params, obj ) {
|
||||
obj.swf.flashVars = 'playerVars=' + $.param( params, true );
|
||||
|
||||
return '//www.metacafe.com/fplayer/' + rez[1] + '/.swf';
|
||||
}
|
||||
},
|
||||
dailymotion : {
|
||||
matcher : /dailymotion.com\/video\/(.*)\/?(.*)/,
|
||||
params : {
|
||||
additionalInfos : 0,
|
||||
autoStart : 1
|
||||
},
|
||||
type : 'swf',
|
||||
url : '//www.dailymotion.com/swf/video/$1'
|
||||
},
|
||||
twitvid : {
|
||||
matcher : /twitvid\.com\/([a-zA-Z0-9_\-\?\=]+)/i,
|
||||
params : {
|
||||
autoplay : 0
|
||||
},
|
||||
type : 'iframe',
|
||||
url : '//www.twitvid.com/embed.php?guid=$1'
|
||||
},
|
||||
twitpic : {
|
||||
matcher : /twitpic\.com\/(?!(?:place|photos|events)\/)([a-zA-Z0-9\?\=\-]+)/i,
|
||||
type : 'image',
|
||||
url : '//twitpic.com/show/full/$1/'
|
||||
},
|
||||
instagram : {
|
||||
matcher : /(instagr\.am|instagram\.com)\/p\/([a-zA-Z0-9_\-]+)\/?/i,
|
||||
type : 'image',
|
||||
url : '//$1/p/$2/media/'
|
||||
},
|
||||
google_maps : {
|
||||
matcher : /maps\.google\.([a-z]{2,3}(\.[a-z]{2})?)\/(\?ll=|maps\?)(.*)/i,
|
||||
type : 'iframe',
|
||||
url : function( rez ) {
|
||||
return '//maps.google.' + rez[1] + '/' + rez[3] + '' + rez[4] + '&output=' + (rez[4].indexOf('layer=c') > 0 ? 'svembed' : 'embed');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
beforeLoad : function(opts, obj) {
|
||||
var href = obj.href || '',
|
||||
type = false,
|
||||
rez;
|
||||
var url = obj.href || '',
|
||||
type = false,
|
||||
what,
|
||||
item,
|
||||
rez,
|
||||
params;
|
||||
|
||||
if ((rez = href.match(/(youtube\.com|youtu\.be)\/(v\/|u\/|embed\/|watch\?v=)?([^#\&\?]*).*/i))) {
|
||||
href = '//www.youtube.com/embed/' + rez[3] + '?autoplay=1&autohide=1&fs=1&rel=0&enablejsapi=1';
|
||||
type = 'iframe';
|
||||
for (what in this.types) {
|
||||
item = this.types[ what ];
|
||||
rez = url.match( item.matcher );
|
||||
|
||||
} else if ((rez = href.match(/vimeo.com\/(\d+)\/?(.*)/))) {
|
||||
href = '//player.vimeo.com/video/' + rez[1] + '?hd=1&autoplay=1&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1';
|
||||
type = 'iframe';
|
||||
if (rez) {
|
||||
type = item.type;
|
||||
params = $.extend(true, {}, item.params, obj[ what ] || ($.isPlainObject(opts[ what ]) ? opts[ what ].params : null));
|
||||
|
||||
} else if ((rez = href.match(/metacafe.com\/watch\/(\d+)\/?(.*)/))) {
|
||||
href = '//www.metacafe.com/fplayer/' + rez[1] + '/.swf?playerVars=autoPlay=yes';
|
||||
type = 'swf';
|
||||
url = $.type( item.url ) === "function" ? item.url.call( this, rez, params, obj ) : format( item.url, rez, params );
|
||||
|
||||
} else if ((rez = href.match(/dailymotion.com\/video\/(.*)\/?(.*)/))) {
|
||||
href = '//www.dailymotion.com/swf/video/' + rez[1] + '?additionalInfos=0&autoStart=1';
|
||||
type = 'swf';
|
||||
|
||||
} else if ((rez = href.match(/twitvid\.com\/([a-zA-Z0-9_\-\?\=]+)/i))) {
|
||||
href = '//www.twitvid.com/embed.php?autoplay=0&guid=' + rez[1];
|
||||
type = 'iframe';
|
||||
|
||||
} else if ((rez = href.match(/twitpic\.com\/(?!(?:place|photos|events)\/)([a-zA-Z0-9\?\=\-]+)/i))) {
|
||||
href = '//twitpic.com/show/full/' + rez[1];
|
||||
type = 'image';
|
||||
|
||||
} else if ((rez = href.match(/(instagr\.am|instagram\.com)\/p\/([a-zA-Z0-9_\-]+)\/?/i))) {
|
||||
href = '//' + rez[1] + '/p/' + rez[2] + '/media/?size=l';
|
||||
type = 'image';
|
||||
|
||||
} else if ((rez = href.match(/maps\.google\.com\/(\?ll=|maps\/?\?q=)(.*)/i))) {
|
||||
href = '//maps.google.com/' + rez[1] + '' + rez[2] + '&output=' + (rez[2].indexOf('layer=c') ? 'svembed' : 'embed');
|
||||
type = 'iframe';
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (type) {
|
||||
obj.href = href;
|
||||
obj.href = url;
|
||||
obj.type = type;
|
||||
|
||||
obj.autoHeight = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
}(jQuery));
|
||||
|
|
@ -1,13 +1,15 @@
|
|||
/*!
|
||||
* Thumbnail helper for fancyBox
|
||||
* version: 1.0.4
|
||||
* version: 1.0.6
|
||||
* @requires fancyBox v2.0 or later
|
||||
*
|
||||
* Usage:
|
||||
* $(".fancybox").fancybox({
|
||||
* thumbs: {
|
||||
* width : 50,
|
||||
* height : 50
|
||||
* helpers : {
|
||||
* thumbs: {
|
||||
* width : 50,
|
||||
* height : 50
|
||||
* }
|
||||
* }
|
||||
* });
|
||||
*
|
||||
|
|
@ -24,34 +26,36 @@
|
|||
|
||||
//Add helper object
|
||||
F.helpers.thumbs = {
|
||||
wrap: null,
|
||||
list: null,
|
||||
width: 0,
|
||||
wrap : null,
|
||||
list : null,
|
||||
width : 0,
|
||||
|
||||
//Default function to obtain the URL of the thumbnail image
|
||||
source: function (el) {
|
||||
var img;
|
||||
source: function ( item ) {
|
||||
var href;
|
||||
|
||||
if ($.type(el) === 'string') {
|
||||
return el;
|
||||
if (item.element) {
|
||||
href = $(item.element).find('img').attr('src');
|
||||
}
|
||||
|
||||
img = $(el).find('img');
|
||||
if (!href && item.type === 'image' && item.href) {
|
||||
href = item.href;
|
||||
}
|
||||
|
||||
return img.length ? img.attr('src') : el.href;
|
||||
return href;
|
||||
},
|
||||
|
||||
init: function (opts) {
|
||||
init: function (opts, obj) {
|
||||
var that = this,
|
||||
list,
|
||||
thumbWidth = opts.width || 50,
|
||||
thumbWidth = opts.width || 50,
|
||||
thumbHeight = opts.height || 50,
|
||||
thumbSource = opts.source || this.source;
|
||||
|
||||
//Build list structure
|
||||
list = '';
|
||||
|
||||
for (var n = 0; n < F.group.length; n++) {
|
||||
for (var n = 0; n < obj.group.length; n++) {
|
||||
list += '<li><a style="width:' + thumbWidth + 'px;height:' + thumbHeight + 'px;" href="javascript:jQuery.fancybox.jumpto(' + n + ');"></a></li>';
|
||||
}
|
||||
|
||||
|
|
@ -59,9 +63,15 @@
|
|||
this.list = $('<ul>' + list + '</ul>').appendTo(this.wrap);
|
||||
|
||||
//Load each thumbnail
|
||||
$.each(F.group, function (i) {
|
||||
$.each(obj.group, function (i) {
|
||||
var href = thumbSource( obj.group[ i ] );
|
||||
|
||||
if (!href) {
|
||||
return;
|
||||
}
|
||||
|
||||
$("<img />").load(function () {
|
||||
var width = this.width,
|
||||
var width = this.width,
|
||||
height = this.height,
|
||||
widthRatio, heightRatio, parent;
|
||||
|
||||
|
|
@ -70,77 +80,74 @@
|
|||
}
|
||||
|
||||
//Calculate thumbnail width/height and center it
|
||||
widthRatio = width / thumbWidth;
|
||||
widthRatio = width / thumbWidth;
|
||||
heightRatio = height / thumbHeight;
|
||||
|
||||
parent = that.list.children().eq(i).find('a');
|
||||
|
||||
if (widthRatio >= 1 && heightRatio >= 1) {
|
||||
if (widthRatio > heightRatio) {
|
||||
width = Math.floor(width / heightRatio);
|
||||
width = Math.floor(width / heightRatio);
|
||||
height = thumbHeight;
|
||||
|
||||
} else {
|
||||
width = thumbWidth;
|
||||
width = thumbWidth;
|
||||
height = Math.floor(height / widthRatio);
|
||||
}
|
||||
}
|
||||
|
||||
$(this).css({
|
||||
width: width,
|
||||
height: height,
|
||||
top: Math.floor(thumbHeight / 2 - height / 2),
|
||||
left: Math.floor(thumbWidth / 2 - width / 2)
|
||||
width : width,
|
||||
height : height,
|
||||
top : Math.floor(thumbHeight / 2 - height / 2),
|
||||
left : Math.floor(thumbWidth / 2 - width / 2)
|
||||
});
|
||||
|
||||
parent.width(thumbWidth).height(thumbHeight);
|
||||
|
||||
$(this).hide().appendTo(parent).fadeIn(300);
|
||||
|
||||
}).attr('src', thumbSource( F.group[ i ] ));
|
||||
}).attr('src', href);
|
||||
});
|
||||
|
||||
//Set initial width
|
||||
this.width = this.list.children().eq(0).outerWidth(true);
|
||||
|
||||
this.list.width(this.width * (F.group.length + 1)).css('left', Math.floor($(window).width() * 0.5 - (F.current.index * this.width + this.width * 0.5)));
|
||||
this.list.width(this.width * (obj.group.length + 1)).css('left', Math.floor($(window).width() * 0.5 - (obj.index * this.width + this.width * 0.5)));
|
||||
},
|
||||
|
||||
//Center list
|
||||
update: function (opts) {
|
||||
if (this.list) {
|
||||
this.list.stop(true).animate({
|
||||
'left': Math.floor($(window).width() * 0.5 - (F.current.index * this.width + this.width * 0.5))
|
||||
}, 150);
|
||||
}
|
||||
},
|
||||
|
||||
beforeLoad: function (opts) {
|
||||
beforeLoad: function (opts, obj) {
|
||||
//Remove self if gallery do not have at least two items
|
||||
if (F.group.length < 2) {
|
||||
F.coming.helpers.thumbs = false;
|
||||
if (obj.group.length < 2) {
|
||||
obj.helpers.thumbs = false;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
//Increase bottom margin to give space for thumbs
|
||||
F.coming.margin[ opts.position === 'top' ? 0 : 2 ] = opts.height + 30;
|
||||
obj.margin[ opts.position === 'top' ? 0 : 2 ] += ((opts.height || 50) + 15);
|
||||
},
|
||||
|
||||
afterShow: function (opts) {
|
||||
afterShow: function (opts, obj) {
|
||||
//Check if exists and create or update list
|
||||
if (this.list) {
|
||||
this.update(opts);
|
||||
this.onUpdate(opts, obj);
|
||||
|
||||
} else {
|
||||
this.init(opts);
|
||||
this.init(opts, obj);
|
||||
}
|
||||
|
||||
//Set active element
|
||||
this.list.children().removeClass('active').eq(F.current.index).addClass('active');
|
||||
this.list.children().removeClass('active').eq(obj.index).addClass('active');
|
||||
},
|
||||
|
||||
onUpdate: function () {
|
||||
this.update();
|
||||
//Center list
|
||||
onUpdate: function (opts, obj) {
|
||||
if (this.list) {
|
||||
this.list.stop(true).animate({
|
||||
'left': Math.floor($(window).width() * 0.5 - (obj.index * this.width + this.width * 0.5))
|
||||
}, 150);
|
||||
}
|
||||
},
|
||||
|
||||
beforeClose: function () {
|
||||
|
|
@ -148,8 +155,8 @@
|
|||
this.wrap.remove();
|
||||
}
|
||||
|
||||
this.wrap = null;
|
||||
this.list = null;
|
||||
this.wrap = null;
|
||||
this.list = null;
|
||||
this.width = 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue