Files
zurawik.pl/Static/script/jQuery/bjqs-1.3.js
2026-05-15 18:33:51 +02:00

752 lines
27 KiB
JavaScript

/*
* Basic jQuery Slider plug-in v.1.3
*
* http://www.basic-slider.com
*
* Authored by John Cobb
* http://www.johncobb.name
* @john0514
*
* Copyright 2011, John Cobb
* License: GNU General Public License, version 3 (GPL-3.0)
* http://www.opensource.org/licenses/gpl-3.0.html
*
*/
;(function($) {
"use strict";
$.fn.bjqs = function(o) {
// slider default settings
var defaults = {
// w + h to enforce consistency
width : 700,
height : 300,
// transition valuess
animtype : 'slide',
animduration : 450, // length of transition
animspeed : 4000, // delay between transitions
automatic : true, // enable/disable automatic slide rotation
// control and marker configuration
showcontrols : true, // enable/disable next + previous UI elements
centercontrols : true, // vertically center controls
nexttext : 'Next', // text/html inside next UI element
prevtext : 'Prev', // text/html inside previous UI element
showmarkers : true, // enable/disable individual slide UI markers
centermarkers : true, // horizontally center markers
// interaction values
keyboardnav : true, // enable/disable keyboard navigation
hoverpause : true, // enable/disable pause slides on hover
// presentational options
usecaptions : true, // enable/disable captions using img title attribute
randomstart : false, // start from a random slide
responsive : false // enable responsive behaviour
};
// create settings from defauls and user options
var settings = $.extend({}, defaults, o);
// slider elements
var $wrapper = this,
$slider = $wrapper.find('ul.bjqs'),
$slides = $slider.children('li'),
$sliderBox = $('.slider'),
// control elements
$c_wrapper = null,
$c_fwd = null,
$c_prev = null,
// marker elements
$m_wrapper = null,
$m_markers = null,
// elements for slide animation
$canvas = null,
$clone_first = null,
$clone_last = null;
// state management object
var state = {
slidecount : $slides.length, // total number of slides
animating : false, // bool: is transition is progress
paused : false, // bool: is the slider paused
currentslide : 1, // current slide being viewed (not 0 based)
nextslide : 0, // slide to view next (not 0 based)
currentindex : 0, // current slide being viewed (0 based)
nextindex : 0, // slide to view next (0 based)
interval : null // interval for automatic rotation
};
var responsive = {
width : null,
height : null,
ratio : null
};
// helpful variables
var vars = {
fwd : 'forward',
prev : 'previous'
};
// run through options and initialise settings
var init = function() {
// differentiate slider li from content li
$slides.addClass('bjqs-slide');
// conf dimensions, responsive or static
if( settings.responsive ){
conf_responsive();
}
else{
conf_static();
}
// configurations only avaliable if more than 1 slide
if( state.slidecount > 1 ){
// enable random start
if (settings.randomstart){
conf_random();
}
// create and show controls
if( settings.showcontrols ){
conf_controls();
}
// create and show markers
if( settings.showmarkers ){
conf_markers();
}
// enable slidenumboard navigation
if( settings.keyboardnav ){
conf_keynav();
}
// enable pause on hover
if (settings.hoverpause && settings.automatic){
conf_hoverpause();
}
// conf slide animation
if (settings.animtype === 'slide'){
conf_slide();
}
} else {
// Stop automatic animation, because we only have one slide!
settings.automatic = false;
}
if(settings.usecaptions){
conf_captions();
}
// TODO: need to accomodate random start for slide transition setting
if(settings.animtype === 'slide' && !settings.randomstart){
state.currentindex = 1;
state.currentslide = 2;
}
// slide components are hidden by default, show them now
$slider.show();
$slides.eq(state.currentindex).show();
// Finally, if automatic is set to true, kick off the interval
if(settings.automatic){
state.interval = setInterval(function () {
go(vars.fwd, false);
}, settings.animspeed);
}
};
var conf_responsive = function() {
responsive.width = $wrapper.outerWidth();
responsive.ratio = responsive.width/settings.width,
responsive.height = settings.height * responsive.ratio;
if(settings.animtype === 'fade'){
// initial setup
$slides.css({
'height' : settings.height,
'width' : '100%'
});
$slides.children('img').css({
'height' : settings.height,
'width' : '100%'
});
$slider.css({
'height' : settings.height,
'width' : '100%'
});
$wrapper.css({
'height' : settings.height,
'max-width' : settings.width,
'position' : 'relative'
});
if(responsive.width < settings.width){
$slides.css({
'height' : responsive.height
});
$slides.children('img').css({
'height' : responsive.height
});
$slider.css({
'height' : responsive.height
});
$wrapper.css({
'height' : responsive.height
});
}
$(window).resize(function() {
// calculate and update dimensions
responsive.width = $wrapper.outerWidth();
responsive.ratio = responsive.width/settings.width,
responsive.height = settings.height * responsive.ratio;
$slides.css({
'height' : responsive.height
});
$slides.children('img').css({
'height' : responsive.height
});
$slider.css({
'height' : responsive.height
});
$wrapper.css({
'height' : responsive.height
});
});
}
if(settings.animtype === 'slide'){
// initial setup
$slides.css({
'height' : settings.height,
'width' : settings.width
});
$slides.children('img').css({
'height' : settings.height,
'width' : settings.width
});
$slider.css({
'height' : settings.height,
'width' : settings.width * settings.slidecount
});
$wrapper.css({
'height' : settings.height,
'max-width' : settings.width,
'position' : 'relative'
});
if(responsive.width < settings.width){
$slides.css({
'height' : responsive.height
});
$slides.children('img').css({
'height' : responsive.height
});
$slider.css({
'height' : responsive.height
});
$wrapper.css({
'height' : responsive.height
});
}
$(window).resize(function() {
// calculate and update dimensions
responsive.width = $wrapper.outerWidth(),
responsive.ratio = responsive.width/settings.width,
responsive.height = settings.height * responsive.ratio;
$slides.css({
'height' : responsive.height,
'width' : responsive.width
});
$slides.children('img').css({
'height' : responsive.height,
'width' : responsive.width
});
$slider.css({
'height' : responsive.height,
'width' : responsive.width * settings.slidecount
});
$wrapper.css({
'height' : responsive.height
});
$canvas.css({
'height' : responsive.height,
'width' : responsive.width
});
resize_complete(function(){
go(false,state.currentslide);
}, 200, "some unique string");
});
}
};
var resize_complete = (function () {
var timers = {};
return function (callback, ms, uniqueId) {
if (!uniqueId) {
uniqueId = "Don't call this twice without a uniqueId";
}
if (timers[uniqueId]) {
clearTimeout (timers[uniqueId]);
}
timers[uniqueId] = setTimeout(callback, ms);
};
})();
// enforce fixed sizing on slides, slider and wrapper
var conf_static = function() {
$slides.css({
'height' : settings.height,
'width' : settings.width
});
$slider.css({
'height' : settings.height,
'width' : settings.width
});
$wrapper.css({
'height' : settings.height,
'width' : settings.width,
'position' : 'relative'
});
};
var conf_slide = function() {
// create two extra elements which are clones of the first and last slides
$clone_first = $slides.eq(0).clone();
$clone_last = $slides.eq(state.slidecount-1).clone();
// add them to the DOM where we need them
$clone_first.attr({'data-clone' : 'last', 'data-slide' : 0}).appendTo($slider).show();
$clone_last.attr({'data-clone' : 'first', 'data-slide' : 0}).prependTo($slider).show();
// update the elements object
$slides = $slider.children('li');
state.slidecount = $slides.length;
// create a 'canvas' element which is neccessary for the slide animation to work
$canvas = $('<div class="bjqs-wrapper"></div>');
// if the slider is responsive && the calculated width is less than the max width
if(settings.responsive && (responsive.width < settings.width)){
$canvas.css({
'width' : responsive.width,
'height' : responsive.height,
'overflow' : 'hidden',
'position' : 'relative'
});
// update the dimensions to the slider to accomodate all the slides side by side
$slider.css({
'width' : responsive.width * (state.slidecount + 2),
'left' : -responsive.width * state.currentslide
});
}
else {
$canvas.css({
'width' : settings.width,
'height' : settings.height,
'overflow' : 'hidden',
'position' : 'relative'
});
// update the dimensions to the slider to accomodate all the slides side by side
$slider.css({
'width' : settings.width * (state.slidecount + 2),
'left' : -settings.width * state.currentslide
});
}
// add some inline styles which will align our slides for left-right sliding
$slides.css({
'float' : 'left',
'position' : 'relative',
'display' : 'list-item'
});
// 'everything.. in it's right place'
$canvas.prependTo($wrapper);
$slider.appendTo($canvas);
};
var conf_controls = function() {
// create the elements for the controls
$c_wrapper = $('<ul class="bjqs-controls"></ul>');
$c_fwd = $('<li class="bjqs-next"><a href="#" data-direction="'+ vars.fwd +'">' + settings.nexttext + '</a></li>');
$c_prev = $('<li class="bjqs-prev"><a href="#" data-direction="'+ vars.prev +'">' + settings.prevtext + '</a></li>');
// bind click events
$c_wrapper.on('click','a',function(e){
e.preventDefault();
var direction = $(this).attr('data-direction');
if(!state.animating){
if(direction === vars.fwd){
go(vars.fwd,false);
}
if(direction === vars.prev){
go(vars.prev,false);
}
}
});
// put 'em all together
$c_prev.appendTo($c_wrapper);
$c_fwd.appendTo($c_wrapper);
$c_wrapper.appendTo($wrapper);
// vertically center the controls
if (settings.centercontrols) {
$c_wrapper.addClass('v-centered');
// calculate offset % for vertical positioning
var offset_px = ($wrapper.height() - $c_fwd.children('a').outerHeight()) / 2,
ratio = (offset_px / settings.height) * 100,
offset = ratio + '%';
$c_fwd.find('a').css('top', offset);
$c_prev.find('a').css('top', offset);
}
};
var conf_markers = function() {
// create a wrapper for our markers
$m_wrapper = $('<ol class="bjqs-markers"></ol>');
// for every slide, create a marker
$.each($slides, function(key, slide){
var slidenum = key + 1,
gotoslide = key + 1;
if(settings.animtype === 'slide'){
// + 2 to account for clones
gotoslide = key + 2;
}
var marker = $('<li><a href="#">&nbsp;</a></li>');
// set the first marker to be active
if(slidenum === state.currentslide){ marker.addClass('active-marker'); }
// bind the click event
marker.on('click','a',function(e){
e.preventDefault();
if(!state.animating && state.currentslide !== gotoslide){
go(false,gotoslide);
}
});
// add the marker to the wrapper
marker.appendTo($m_wrapper);
});
$m_wrapper.appendTo($wrapper);
$m_markers = $m_wrapper.find('li');
// center the markers
if (settings.centermarkers) {
$m_wrapper.addClass('h-centered');
var offset = (settings.width - $m_wrapper.width()) / 2;
//$m_wrapper.css('left', offset);
}
};
var conf_keynav = function() {
$(document).keyup(function (event) {
if (!state.paused) {
clearInterval(state.interval);
state.paused = true;
}
if (!state.animating) {
if (event.keyCode === 39) {
event.preventDefault();
go(vars.fwd, false);
} else if (event.keyCode === 37) {
event.preventDefault();
go(vars.prev, false);
}
}
if (state.paused && settings.automatic) {
state.interval = setInterval(function () {
go(vars.fwd);
}, settings.animspeed);
state.paused = false;
}
});
};
var conf_hoverpause = function() {
$wrapper.hover(function () {
if (!state.paused) {
clearInterval(state.interval);
state.paused = true;
}
}, function () {
if (state.paused) {
state.interval = setInterval(function () {
go(vars.fwd, false);
}, settings.animspeed);
state.paused = false;
}
});
};
var conf_captions = function() {
$.each($slides, function (key, slide) {
var caption = $(slide).children('img:first-child').attr('title');
// Account for images wrapped in links
if(!caption){
caption = $(slide).children('a').find('img:first-child').attr('title');
}
if (caption) {
caption = $('<p class="bjqs-caption">' + caption + '</p>');
caption.appendTo($(slide));
}
});
};
var conf_random = function() {
var rand = Math.floor(Math.random() * state.slidecount) + 1;
state.currentslide = rand;
state.currentindex = rand-1;
};
var set_next = function(direction) {
if(direction === vars.fwd){
if($slides.eq(state.currentindex).next().length){
state.nextindex = state.currentindex + 1;
state.nextslide = state.currentslide + 1;
}
else{
state.nextindex = 0;
state.nextslide = 1;
}
}
else{
if($slides.eq(state.currentindex).prev().length){
state.nextindex = state.currentindex - 1;
state.nextslide = state.currentslide - 1;
}
else{
state.nextindex = state.slidecount - 1;
state.nextslide = state.slidecount;
}
}
};
var go = function(direction, position) {
// only if we're not already doing things
if(!state.animating){
// doing things
state.animating = true;
if(position){
state.nextslide = position;
state.nextindex = position-1;
}
else{
set_next(direction);
}
// fade animation
if(settings.animtype === 'fade'){
if(settings.showmarkers){
$m_markers.removeClass('active-marker');
$m_markers.eq(state.nextindex).addClass('active-marker');
}
// fade out current
$slides.eq(state.currentindex).fadeOut(settings.animduration);
//makl zmiany tła
$( "#slider" ).animate({
backgroundColor: $slides.eq(state.nextindex).attr('id')
//color: "#fff",
//width: 1300
}, settings.animduration-500 );
// alert(state.nextindex);
// alert($slides.eq(state.nextindex).attr('id'));
// $( "#slider" ).animate({
// backgroundColor: '#fffffff'
// }, 1000 );
//makl koniec zmian
// fade in next
$slides.eq(state.nextindex).fadeIn(settings.animduration, function(){
// update state variables
state.animating = false;
state.currentslide = state.nextslide;
state.currentindex = state.nextindex;
});
}
// slide animation
if(settings.animtype === 'slide'){
if(settings.showmarkers){
var markerindex = state.nextindex-1;
if(markerindex === state.slidecount-2){
markerindex = 0;
}
else if(markerindex === -1){
markerindex = state.slidecount-3;
}
$m_markers.removeClass('active-marker');
$m_markers.eq(markerindex).addClass('active-marker');
}
// if the slider is responsive && the calculated width is less than the max width
if(settings.responsive && ( responsive.width < settings.width ) ){
state.slidewidth = responsive.width;
}
else{
state.slidewidth = settings.width;
}
$slider.animate({'left': -state.nextindex * state.slidewidth }, settings.animduration, function(){
state.currentslide = state.nextslide;
state.currentindex = state.nextindex;
// is the current slide a clone?
if($slides.eq(state.currentindex).attr('data-clone') === 'last'){
// affirmative, at the last slide (clone of first)
$slider.css({'left': -state.slidewidth });
state.currentslide = 2;
state.currentindex = 1;
}
else if($slides.eq(state.currentindex).attr('data-clone') === 'first'){
// affirmative, at the fist slide (clone of last)
$slider.css({'left': -state.slidewidth *(state.slidecount - 2)});
state.currentslide = state.slidecount - 1;
state.currentindex = state.slidecount - 2;
}
state.animating = false;
});
}
}
};
// lets get the party started :)
init();
};
})(jQuery);
/*
Color animation 1.6.0
http://www.bitstorm.org/jquery/color-animation/
Copyright 2011, 2013 Edwin Martin <edwin@bitstorm.org>
Released under the MIT and GPL licenses.
*/
'use strict';(function(d){function h(a,b,e){var c="rgb"+(d.support.rgba?"a":"")+"("+parseInt(a[0]+e*(b[0]-a[0]),10)+","+parseInt(a[1]+e*(b[1]-a[1]),10)+","+parseInt(a[2]+e*(b[2]-a[2]),10);d.support.rgba&&(c+=","+(a&&b?parseFloat(a[3]+e*(b[3]-a[3])):1));return c+")"}function f(a){var b;return(b=/#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})/.exec(a))?[parseInt(b[1],16),parseInt(b[2],16),parseInt(b[3],16),1]:(b=/#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])/.exec(a))?[17*parseInt(b[1],16),17*parseInt(b[2],
16),17*parseInt(b[3],16),1]:(b=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(a))?[parseInt(b[1]),parseInt(b[2]),parseInt(b[3]),1]:(b=/rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9\.]*)\s*\)/.exec(a))?[parseInt(b[1],10),parseInt(b[2],10),parseInt(b[3],10),parseFloat(b[4])]:l[a]}d.extend(!0,d,{support:{rgba:function(){var a=d("script:first"),b=a.css("color"),e=!1;if(/^rgba/.test(b))e=!0;else try{e=b!=a.css("color","rgba(0, 0, 0, 0.5)").css("color"),
a.css("color",b)}catch(c){}return e}()}});var k="color backgroundColor borderBottomColor borderLeftColor borderRightColor borderTopColor outlineColor".split(" ");d.each(k,function(a,b){d.Tween.propHooks[b]={get:function(a){return d(a.elem).css(b)},set:function(a){var c=a.elem.style,g=f(d(a.elem).css(b)),m=f(a.end);a.run=function(a){c[b]=h(g,m,a)}}}});d.Tween.propHooks.borderColor={set:function(a){var b=a.elem.style,e=[],c=k.slice(2,6);d.each(c,function(b,c){e[c]=f(d(a.elem).css(c))});var g=f(a.end);
a.run=function(a){d.each(c,function(d,c){b[c]=h(e[c],g,a)})}}};var l={aqua:[0,255,255,1],azure:[240,255,255,1],beige:[245,245,220,1],black:[0,0,0,1],blue:[0,0,255,1],brown:[165,42,42,1],cyan:[0,255,255,1],darkblue:[0,0,139,1],darkcyan:[0,139,139,1],darkgrey:[169,169,169,1],darkgreen:[0,100,0,1],darkkhaki:[189,183,107,1],darkmagenta:[139,0,139,1],darkolivegreen:[85,107,47,1],darkorange:[255,140,0,1],darkorchid:[153,50,204,1],darkred:[139,0,0,1],darksalmon:[233,150,122,1],darkviolet:[148,0,211,1],fuchsia:[255,
0,255,1],gold:[255,215,0,1],green:[0,128,0,1],indigo:[75,0,130,1],khaki:[240,230,140,1],lightblue:[173,216,230,1],lightcyan:[224,255,255,1],lightgreen:[144,238,144,1],lightgrey:[211,211,211,1],lightpink:[255,182,193,1],lightyellow:[255,255,224,1],lime:[0,255,0,1],magenta:[255,0,255,1],maroon:[128,0,0,1],navy:[0,0,128,1],olive:[128,128,0,1],orange:[255,165,0,1],pink:[255,192,203,1],purple:[128,0,128,1],violet:[128,0,128,1],red:[255,0,0,1],silver:[192,192,192,1],white:[255,255,255,1],yellow:[255,255,
0,1],transparent:[255,255,255,0]}})(jQuery);