Commit 3956fd4a authored by christian's avatar christian
Browse files

init commit

parents
.imageBox {
/*-moz-box-shadow: 0px 0px 10px #000000;
-webkit-box-shadow: 0px 0px 10px #000000;
box-shadow: 0px 0px 10px #000000;*/
position: absolute;
}
/*.imageBox a {
display: block;
outline: 0 none;
}*/
/*.imageBox:hover {
box-shadow: 0px 0px 20px lime;
}*/
/*[id^='imageBox-'] > img:hover {
-webkit-transform: scale(1.15) rotate(0);
-moz-transform: scale(1.15) rotate(0);
-ms-transform: scale(1.15) rotate(0);
-o-transform: scale(1.15) rotate(0);
transform: scale(1.15) rotate(0);
}*/
.scale{
-webkit-transform: scale(1.15) rotate(0);
-moz-transform: scale(1.15) rotate(0);
-ms-transform: scale(1.15) rotate(0);
-o-transform: scale(1.15) rotate(0);
transform: scale(1.15) rotate(0);
}
/*#boxen img {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
-moz-transform: translateZ(0) scale(1.0, 1.0);
-ms-transform: translateZ(0) scale(1.0, 1.0);
-o-transform: translateZ(0) scale(1.0, 1.0);
transform: translateZ(0) scale(1.0, 1.0);
max-width: 100%;
}*/
/*#imageBox-1 {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
left: 10px;
top: 0;
}
#imageBox-2 {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
left: 100px;
z-index: 98;
top: 0;
}
#imageBox-3 {
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
left: 200px;
top: 10px;
z-index: 90;
}
#imageBox-4 {
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
left: 300px;
top: 0px;
z-index: 91;
}
#imageBox-5 {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
left: 400px;
top: 5px;
z-index: 90;
}
#imageBox-6 {
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
left: 500px;
top: 10px;
z-index: 89;
}
#imageBox-7 {
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
left: 20px;
top: 150px;
z-index: 90;
}
#imageBox-8 {
-webkit-transform: rotate(-6deg);
-moz-transform: rotate(-6deg);
-o-transform: rotate(-6deg);
left: 120px;
top: 160px;
z-index: 90;
}
#imageBox-9 {
-webkit-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
left: 220px;
top: 150px;
z-index: 89;
}
#imageBox-10 {
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
left: 350px;
top: 140px;
z-index: 90;
}
#imageBox-11 {
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
left: 450px;
top: 150px;
z-index: 90;
}
#imageBox-12 {
-webkit-transform: rotate(-13deg);
-moz-transform: rotate(-13deg);
-o-transform: rotate(-13deg);
left: 30px;
top: 300px;
z-index: 90;
}
#imageBox-13 {
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-o-transform: rotate(8deg);
left: 150px;
top: 310px;
z-index: 89;
}
#imageBox-14 {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
left: 250px;
top: 300px;
z-index: 91;
}
#imageBox-15 {
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
left: 350px;
top: 290px;
z-index: 89;
}
#imageBox-16 {
-webkit-transform: rotate(-13deg);
-moz-transform: rotate(-13deg);
-o-transform: rotate(-13deg);
left: 450px;
top: 300px;
z-index: 89;
}
#imageBox-17 {
-webkit-transform: rotate(14deg);
-moz-transform: rotate(14deg);
-o-transform: rotate(14deg);
left: 10px;
top: 450px;
z-index: 90;
}
#imageBox-18 {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
left: 130px;
top: 460px;
z-index: 89;
}
#imageBox-19 {
-webkit-transform: rotate(-13deg);
-moz-transform: rotate(-13deg);
-o-transform: rotate(-13deg);
left: 250px;
top: 440px;
z-index: 89;
}
#imageBox-20 {
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-o-transform: rotate(8deg);
left: 350px;
top: 450px;
z-index: 89;
}
#imageBox-21 {
-webkit-transform: rotate(16deg);
-moz-transform: rotate(16deg);
-o-transform: rotate(16deg);
left: 450px;
top: 440px;
z-index: 90;
}
#imageBox-22 {
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
left: 15px;
top: 600px;
z-index: 150;
}
#imageBox-23 {
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-o-transform: rotate(8deg);
left: 120px;
top: 610px;
z-index: 60;
}
#imageBox-24 {
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
left: 230px;
top: 600px;
z-index: 150;
}
#imageBox-25 {
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
-o-transform: rotate(4deg);
left: 335px;
top: 600px;
z-index: 160;
}
#imageBox-26 {
-webkit-transform: rotate(-9deg);
-moz-transform: rotate(-9deg);
-o-transform: rotate(-9deg);
left: 445px;
top: 605px;
z-index: 150;
}
#imageBox-27 {
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
left: 20px;
top: 760px;
z-index: 90;
}
#imageBox-28 {
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
left: 125px;
top: 755px;
z-index: 150;
}
#imageBox-29 {
-webkit-transform: rotate(-11deg);
-moz-transform: rotate(-11deg);
-o-transform: rotate(-11deg);
left: 235px;
top: 755px;
z-index: 140;
}
#imageBox-30 {
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
left: 345px;
top: 750px;
z-index: 150;
}
#imageBox-31 {
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
left: 463px;
top: 754px;
z-index: 150;
}*/
/*#imageBox-32 {
-webkit-transform: rotate(-5deg) ;
-moz-transform: rotate(-5deg) ;
-o-transform: rotate(-5deg) ;
left:15px;
top:750px;
z-index:150;
}
#imageBox-33 {
-webkit-transform: rotate(-5deg) ;
-moz-transform: rotate(-5deg) ;
-o-transform: rotate(-5deg) ;
left:15px;
top:750px;
z-index:150;
}*/
#wrapper {
width: 960px;
margin: 150px auto 0;
background: #ccc;
}
.inhalt {
width: 750px;
margin: 0 auto;
}
File added
#lbOverlay {
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
cursor: pointer;
}
#lbCenter, #lbBottomContainer {
position: absolute;
z-index: 9999;
overflow: hidden;
background-color: #fff;
}
.lbLoading {
background: #fff url(../img/loading.gif) no-repeat center;
}
#lbImage {
position: absolute;
left: 0;
top: 0;
border: 10px solid #fff;
background-repeat: no-repeat;
}
#lbPrevLink, #lbNextLink {
display: block;
position: absolute;
top: 0;
width: 50%;
outline: none;
}
#lbPrevLink {
left: 0;
}
#lbPrevLink:hover {
background: transparent url(../img/prevlabel.gif) no-repeat 0 15%;
}
#lbNextLink {
right: 0;
}
#lbNextLink:hover {
background: transparent url(../img/nextlabel.gif) no-repeat 100% 15%;
}
#lbBottom {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666;
line-height: 1.4em;
text-align: left;
border: 10px solid #fff;
border-top-style: none;
letter-spacing: 1px;
}
#lbCloseLink {
display: block;
float: right;
width: 66px;
height: 22px;
background: transparent url(../img/closelabel.gif) no-repeat center;
margin: 5px 0;
outline: none;
}
#lbCaption, #lbNumber {
margin-right: 71px;
}
#lbCaption {
font-weight: bold;
}
/*
jQuery imageBox - Crazy image gallery with included Slimbox, the ultimate Lightbox clone
Version: 0.1.4
(c) 2014 Christian Weiss <http://www.monkeybiz.at>
MIT-style license.
*/
(function ($, window, document, Math, undefined) {
"use strict";
var ver = '0.1.4';
$('head').append(' <link rel="stylesheet" href="imageBox/css/slimbox.css" type="text/css" media="all">');
//Feature tests
if (!$.cssHooks)
throw (new Error('jQuery 1.4.3+ is needed for this plugin to work'));
function doStyle(prop) {
var vP, sP, cP = prop.charAt(0).toUpperCase() + prop.slice(1),
prefix = ['Moz', 'Webkit', 'O', 'ms'], div = document.createElement('div');
if (prop in div.style)
sP = prop;
else {
for (var i = 0; i < prefix.length; i++) {
vP = prefix[i] + cP;
if (vP in div.style) {
sP = vP;
break;
}
}
}
div = null;
$.support[prop] = sP;
return sP;
}
var transform = doStyle("transform");
if (transform && transform !== "transform") {
$.cssHooks.transform = {
get: function (elem, computed, extra) {
return $.css(elem, transform);
},
set: function (elem, value) {
elem.style[transform] = value;
}
};
}
var backfaceVisibility = doStyle("backfaceVisibility");
if (backfaceVisibility && backfaceVisibility !== "backfaceVisibility") {
$.cssHooks.backfaceVisibility = {
get: function (elem, computed, extra) {
return $.css(elem, backfaceVisibility);
},
set: function (elem, value) {
elem.style[backfaceVisibility] = value;
}
};
}
$.fn.imageBox = function (options) {
return this.each(function () {
options = options || {};
var $cont = $(this);
var $el = $cont.children();
var elArr = $el.get();
if ($cont.css('position') == 'static')
$cont.css('position', 'relative');
//extend config
var opts = $.extend({}, $.fn.imageBox.defaults, options || {});
//create imageBox wrapper
var $imageBox = $('<div />');
var $imageBoxContainer = $('<div id="imageBox-container" />');
$imageBox.css({
position: 'absolute',
border: opts.border,
width: opts.width,
height: opts.height,
boxShadow: opts.boxShadow
});
var maxRowLen = Math.floor(parseInt($cont.width() / $imageBox.width()));
var maxColLen = Math.ceil(elArr.length / maxRowLen);
var n, nLeft, nTop, rPM, mRot, nRpm = 0, bC = opts.boxChaos, mR = opts.maxRotate, nX = 0, nY = 0, elId, s, iBgallery = opts.iBgallery;
$.each($el, function (i) {
rPM = Math.cos(Math.PI * Math.round(Math.random()));
nRpm = Math.floor(Math.random() * (bC)) * rPM;
mRot = Math.floor(Math.random() * (mR)) * rPM;
nLeft = parseInt(opts.width) * nX;
nTop = parseInt(opts.height) * nY;
n = nY % 2 != 1 ? 1 : 1;
if (nX < maxRowLen - n)
nX++
else
nX = 0, nY += 1;
$(elArr[i]).css('display', 'block');
elId = 'imageBox-' + (i);
$(this).wrap($imageBox.attr('id', elId));
$(elArr[i]).attr('data-rot', mRot);
$(this).parent().css({
left: nLeft + nRpm,
top: nTop + nRpm,
zIndex: 90 + nRpm,
transform: 'scale(1.0,1.0) rotate(' + mRot + 'deg)'
});
$(this).find('img').css({
backfaceVisibility: 'hidden',
transformOriginX: '0',
transformOriginY: '0',
perspective: 1000,
transform: 'translateZ(0) scale(1.0, 1.0)',
position: 'relative',
maxWidth: '100%',
display: 'block'
});
$(this).css({
width: opts.width,
height: opts.height
});
if (opts.slimbox)
$(this).attr('rel', 'imageBox-' + iBgallery + '');
});
$imageBoxContainer.css({
background: '#efefef',
paddingTop: parseInt($imageBox.height() / 2),
paddingBottom: parseInt($imageBox.height() / 2)
})
$cont.css({
background: '#ddd',
width: parseInt($imageBox.width() * maxRowLen),
height: parseInt($imageBox.height() * maxColLen)
}).wrap($imageBoxContainer);
$el.hover(function () {
s = opts.scale;
$(this).parent().css({
boxShadow: opts.boxShadowHover,
zIndex: parseInt($(this)[0].parentNode.style.zIndex) + 1000,
transition: 'all, .2s',
transform: 'scale(' + s[0] + ',' + s[1] + ') rotate(0deg)'
});
}, function () {
$(this).parent().css({
boxShadow: opts.boxShadow,
zIndex: parseInt($(this)[0].parentNode.style.zIndex) - 1000,
transition: 'all, .1s',
transform: 'scale(1,1) rotate(' + $(this).attr('data-rot') + 'deg)'
});
});
if (jQuery().slimbox) {
console.log("M'KAY")
if (opts.slimbox)
$.fn.imageBox.slimbox(opts.slimOptions);
}
else
console.log('TROUBLE!!!');
if (opts.destroy) {
$.fn.imageBox.destroy($el)
}
}); //end return
}
$.fn.imageBox.ver = function () { return ver; };
$.fn.imageBox.defaults = {
destroy: false,
width: "50px",
height: "75px",
boxShadow: "0 0 10px rgba(0,0,0,.5)",
boxShadowHover: "0 0 10px rgba(0,0,0,1)",
border: 0,
maxRotate: 10,
scale: [1.1, 1.1],
boxChaos: 20,
slimbox: false,
slimOptions: {
loop: false,
overlayOpacity: 0.8,
overlayFadeDuration: 400,