Add HTML pages. Not finished. see #3
This commit is contained in:
Sébastien Lucas
parent
e9a01c57ce
commit
6fa0031b9f
15 changed files with 2579 additions and 0 deletions
BIN
fancybox/helpers/fancybox_buttons.png
Normal file
BIN
fancybox/helpers/fancybox_buttons.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
85
fancybox/helpers/jquery.fancybox-buttons.css
Normal file
85
fancybox/helpers/jquery.fancybox-buttons.css
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
#fancybox-buttons {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 8050;
|
||||
}
|
||||
|
||||
#fancybox-buttons.top {
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
#fancybox-buttons.bottom {
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
#fancybox-buttons ul {
|
||||
display: block;
|
||||
width: 170px;
|
||||
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-radius: 3px;
|
||||
}
|
||||
|
||||
#fancybox-buttons ul li {
|
||||
float: left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#fancybox-buttons a {
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
text-indent: -9999px;
|
||||
background-image: url('fancybox_buttons.png');
|
||||
background-repeat: no-repeat;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#fancybox-buttons a.btnPrev {
|
||||
width: 32px;
|
||||
background-position: 6px 0;
|
||||
}
|
||||
|
||||
#fancybox-buttons a.btnNext {
|
||||
background-position: -33px 0;
|
||||
border-right: 1px solid #3e3e3e;
|
||||
}
|
||||
|
||||
#fancybox-buttons a.btnPlay {
|
||||
background-position: 0 -30px;
|
||||
}
|
||||
|
||||
#fancybox-buttons a.btnPlayOn {
|
||||
background-position: -30px -30px;
|
||||
}
|
||||
|
||||
#fancybox-buttons a.btnToggle {
|
||||
background-position: 3px -60px;
|
||||
border-left: 1px solid #111;
|
||||
border-right: 1px solid #3e3e3e;
|
||||
width: 35px
|
||||
}
|
||||
|
||||
#fancybox-buttons a.btnToggleOn {
|
||||
background-position: -27px -60px;
|
||||
}
|
||||
|
||||
#fancybox-buttons a.btnClose {
|
||||
border-left: 1px solid #111;
|
||||
width: 38px;
|
||||
background-position: -57px 0px;
|
||||
}
|
||||
|
||||
#fancybox-buttons a.btnDisabled {
|
||||
opacity : 0.5;
|
||||
cursor: default;
|
||||
}
|
||||
115
fancybox/helpers/jquery.fancybox-buttons.js
Normal file
115
fancybox/helpers/jquery.fancybox-buttons.js
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
/*!
|
||||
* Buttons helper for fancyBox
|
||||
* version: 1.0.2
|
||||
* @requires fancyBox v2.0 or later
|
||||
*
|
||||
* Usage:
|
||||
* $(".fancybox").fancybox({
|
||||
* buttons: {
|
||||
* position : 'top'
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* Options:
|
||||
* tpl - HTML template
|
||||
* position - 'top' or 'bottom'
|
||||
*
|
||||
*/
|
||||
(function ($) {
|
||||
//Shortcut for fancyBox object
|
||||
var F = $.fancybox;
|
||||
|
||||
//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: {},
|
||||
|
||||
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) {
|
||||
//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;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
//Increase top margin to give space for buttons
|
||||
F.coming.margin[ opts.position === 'bottom' ? 2 : 0 ] += 30;
|
||||
},
|
||||
|
||||
onPlayStart: function () {
|
||||
if (this.list) {
|
||||
this.buttons.play.attr('title', 'Pause slideshow').addClass('btnPlayOn');
|
||||
}
|
||||
},
|
||||
|
||||
onPlayEnd: function () {
|
||||
if (this.list) {
|
||||
this.buttons.play.attr('title', 'Start slideshow').removeClass('btnPlayOn');
|
||||
}
|
||||
},
|
||||
|
||||
afterShow: function (opts) {
|
||||
var buttons;
|
||||
|
||||
if (!this.list) {
|
||||
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 ),
|
||||
toggle : this.list.find('.btnToggle').click( F.toggle )
|
||||
}
|
||||
}
|
||||
|
||||
buttons = this.buttons;
|
||||
|
||||
//Prev
|
||||
if (F.current.index > 0 || F.current.loop) {
|
||||
buttons.prev.removeClass('btnDisabled');
|
||||
} else {
|
||||
buttons.prev.addClass('btnDisabled');
|
||||
}
|
||||
|
||||
//Next / Play
|
||||
if (F.current.loop || F.current.index < F.group.length - 1) {
|
||||
buttons.next.removeClass('btnDisabled');
|
||||
buttons.play.removeClass('btnDisabled');
|
||||
|
||||
} else {
|
||||
buttons.next.addClass('btnDisabled');
|
||||
buttons.play.addClass('btnDisabled');
|
||||
}
|
||||
|
||||
this.update();
|
||||
},
|
||||
|
||||
onUpdate: function () {
|
||||
this.update();
|
||||
},
|
||||
|
||||
beforeClose: function () {
|
||||
if (this.list) {
|
||||
this.list.remove();
|
||||
}
|
||||
|
||||
this.list = null;
|
||||
this.buttons = {};
|
||||
}
|
||||
};
|
||||
|
||||
}(jQuery));
|
||||
85
fancybox/helpers/jquery.fancybox-media.js
Normal file
85
fancybox/helpers/jquery.fancybox-media.js
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
/*!
|
||||
* Media helper for fancyBox
|
||||
* version: 1.0.0
|
||||
* @requires fancyBox v2.0 or later
|
||||
*
|
||||
* Usage:
|
||||
* $(".fancybox").fancybox({
|
||||
* media: {}
|
||||
* });
|
||||
*
|
||||
* Supports:
|
||||
* Youtube
|
||||
* http://www.youtube.com/watch?v=opj24KnzrWo
|
||||
* http://youtu.be/opj24KnzrWo
|
||||
* Vimeo
|
||||
* http://vimeo.com/25634903
|
||||
* Metacafe
|
||||
* http://www.metacafe.com/watch/7635964/dr_seuss_the_lorax_movie_trailer/
|
||||
* http://www.metacafe.com/watch/7635964/
|
||||
* Dailymotion
|
||||
* http://www.dailymotion.com/video/xoytqh_dr-seuss-the-lorax-premiere_people
|
||||
* Twitvid
|
||||
* http://twitvid.com/QY7MD
|
||||
* Twitpic
|
||||
* http://twitpic.com/7p93st
|
||||
* Instagram
|
||||
* http://instagr.am/p/IejkuUGxQn/
|
||||
* http://instagram.com/p/IejkuUGxQn/
|
||||
* Google maps
|
||||
* http://maps.google.com/maps?q=Eiffel+Tower,+Avenue+Gustave+Eiffel,+Paris,+France&t=h&z=17
|
||||
* http://maps.google.com/?ll=48.857995,2.294297&spn=0.007666,0.021136&t=m&z=16
|
||||
* 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 ($) {
|
||||
//Shortcut for fancyBox object
|
||||
var F = $.fancybox;
|
||||
|
||||
//Add helper object
|
||||
F.helpers.media = {
|
||||
beforeLoad : function(opts, obj) {
|
||||
var href = obj.href || '',
|
||||
type = false,
|
||||
rez;
|
||||
|
||||
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';
|
||||
|
||||
} 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';
|
||||
|
||||
} else if ((rez = href.match(/metacafe.com\/watch\/(\d+)\/?(.*)/))) {
|
||||
href = '//www.metacafe.com/fplayer/' + rez[1] + '/.swf?playerVars=autoPlay=yes';
|
||||
type = 'swf';
|
||||
|
||||
} 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';
|
||||
}
|
||||
|
||||
if (type) {
|
||||
obj.href = href;
|
||||
obj.type = type;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}(jQuery));
|
||||
54
fancybox/helpers/jquery.fancybox-thumbs.css
Normal file
54
fancybox/helpers/jquery.fancybox-thumbs.css
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
#fancybox-thumbs {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 8050;
|
||||
}
|
||||
|
||||
#fancybox-thumbs.bottom {
|
||||
bottom: 2px;
|
||||
}
|
||||
|
||||
#fancybox-thumbs.top {
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
#fancybox-thumbs ul {
|
||||
position: relative;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#fancybox-thumbs ul li {
|
||||
float: left;
|
||||
padding: 1px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#fancybox-thumbs ul li.active {
|
||||
opacity: 0.75;
|
||||
padding: 0;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
#fancybox-thumbs ul li:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#fancybox-thumbs ul li a {
|
||||
display: block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid #222;
|
||||
background: #111;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#fancybox-thumbs ul li img {
|
||||
display: block;
|
||||
position: relative;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
157
fancybox/helpers/jquery.fancybox-thumbs.js
Normal file
157
fancybox/helpers/jquery.fancybox-thumbs.js
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
/*!
|
||||
* Thumbnail helper for fancyBox
|
||||
* version: 1.0.4
|
||||
* @requires fancyBox v2.0 or later
|
||||
*
|
||||
* Usage:
|
||||
* $(".fancybox").fancybox({
|
||||
* thumbs: {
|
||||
* width : 50,
|
||||
* height : 50
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* Options:
|
||||
* width - thumbnail width
|
||||
* height - thumbnail height
|
||||
* source - function to obtain the URL of the thumbnail image
|
||||
* position - 'top' or 'bottom'
|
||||
*
|
||||
*/
|
||||
(function ($) {
|
||||
//Shortcut for fancyBox object
|
||||
var F = $.fancybox;
|
||||
|
||||
//Add helper object
|
||||
F.helpers.thumbs = {
|
||||
wrap: null,
|
||||
list: null,
|
||||
width: 0,
|
||||
|
||||
//Default function to obtain the URL of the thumbnail image
|
||||
source: function (el) {
|
||||
var img;
|
||||
|
||||
if ($.type(el) === 'string') {
|
||||
return el;
|
||||
}
|
||||
|
||||
img = $(el).find('img');
|
||||
|
||||
return img.length ? img.attr('src') : el.href;
|
||||
},
|
||||
|
||||
init: function (opts) {
|
||||
var that = this,
|
||||
list,
|
||||
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++) {
|
||||
list += '<li><a style="width:' + thumbWidth + 'px;height:' + thumbHeight + 'px;" href="javascript:jQuery.fancybox.jumpto(' + n + ');"></a></li>';
|
||||
}
|
||||
|
||||
this.wrap = $('<div id="fancybox-thumbs"></div>').addClass(opts.position || 'bottom').appendTo('body');
|
||||
this.list = $('<ul>' + list + '</ul>').appendTo(this.wrap);
|
||||
|
||||
//Load each thumbnail
|
||||
$.each(F.group, function (i) {
|
||||
$("<img />").load(function () {
|
||||
var width = this.width,
|
||||
height = this.height,
|
||||
widthRatio, heightRatio, parent;
|
||||
|
||||
if (!that.list || !width || !height) {
|
||||
return;
|
||||
}
|
||||
|
||||
//Calculate thumbnail width/height and center it
|
||||
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);
|
||||
height = thumbHeight;
|
||||
|
||||
} else {
|
||||
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)
|
||||
});
|
||||
|
||||
parent.width(thumbWidth).height(thumbHeight);
|
||||
|
||||
$(this).hide().appendTo(parent).fadeIn(300);
|
||||
|
||||
}).attr('src', thumbSource( F.group[ i ] ));
|
||||
});
|
||||
|
||||
//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)));
|
||||
},
|
||||
|
||||
//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) {
|
||||
//Remove self if gallery do not have at least two items
|
||||
if (F.group.length < 2) {
|
||||
F.coming.helpers.thumbs = false;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
//Increase bottom margin to give space for thumbs
|
||||
F.coming.margin[ opts.position === 'top' ? 0 : 2 ] = opts.height + 30;
|
||||
},
|
||||
|
||||
afterShow: function (opts) {
|
||||
//Check if exists and create or update list
|
||||
if (this.list) {
|
||||
this.update(opts);
|
||||
|
||||
} else {
|
||||
this.init(opts);
|
||||
}
|
||||
|
||||
//Set active element
|
||||
this.list.children().removeClass('active').eq(F.current.index).addClass('active');
|
||||
},
|
||||
|
||||
onUpdate: function () {
|
||||
this.update();
|
||||
},
|
||||
|
||||
beforeClose: function () {
|
||||
if (this.wrap) {
|
||||
this.wrap.remove();
|
||||
}
|
||||
|
||||
this.wrap = null;
|
||||
this.list = null;
|
||||
this.width = 0;
|
||||
}
|
||||
}
|
||||
|
||||
}(jQuery));
|
||||
Loading…
Add table
Add a link
Reference in a new issue