/*##################################################################################################################### PPPPPPPPPPPPPPPPP P::::::::::::::::P P::::::PPPPPP:::::P PP:::::P P:::::P xxxxxxx xxxxxxx P::::P P:::::Paaaaaaaaaaaaa ggggggggg ggggg eeeeeeeeeeee rrrrr rrrrrrrrr x:::::x x:::::x P::::P P:::::Pa::::::::::::a g:::::::::ggg::::g ee::::::::::::ee r::::rrr:::::::::r x:::::x x:::::x P::::PPPPPP:::::P aaaaaaaaa:::::a g:::::::::::::::::g e::::::eeeee:::::eer:::::::::::::::::r x:::::xx:::::x P:::::::::::::PP a::::ag::::::ggggg::::::gge::::::e e:::::err::::::rrrrr::::::r x::::::::::x P::::PPPPPPPPP aaaaaaa:::::ag:::::g g:::::g e:::::::eeeee::::::e r:::::r r:::::r x::::::::x P::::P aa::::::::::::ag:::::g g:::::g e:::::::::::::::::e r:::::r rrrrrrr x::::::::x P::::P a::::aaaa::::::ag:::::g g:::::g e::::::eeeeeeeeeee r:::::r x::::::::::x P::::P a::::a a:::::ag::::::g g:::::g e:::::::e r:::::r x:::::xx:::::x PP::::::PP a::::a a:::::ag:::::::ggggg:::::g e::::::::e r:::::r x:::::x x:::::x P::::::::P a:::::aaaa::::::a g::::::::::::::::g e::::::::eeeeeeee r:::::r x:::::x x:::::x P::::::::P a::::::::::aa:::a gg::::::::::::::g ee:::::::::::::e r:::::r xxxxxxx xxxxxxxPPPPPPPPPP aaaaaaaaaa aaaa gggggggg::::::g eeeeeeeeeeeeee rrrrrrr g:::::g gggggg g:::::g g:::::gg gg:::::g g::::::ggg:::::::g gg:::::::::::::g ggg::::::ggg gggggg © xPager - xSlider - Manuel Kleinert - www.xpager.ch - info(at)xpager.ch - v 0.0.1 - 05.01.2015 #####################################################################################################################*/ .xpager-slider{height:600px; width:100%; position:relative; min-height:150px;} .xpager-slider.fullSize{position:fixed; top:0px; left:0px; width:100%; height:100%;} .xpager-slider img{opacity:0; filter:alpha(opacity=0);} .xpager-slider .overflow{height:100%; width:100%; overflow:hidden; position:relative; opacity:0; filter:alpha(opacity=0);} .xpager-slider .overflow .inner-content{width:100000px; position:absolute;top:0px;left:0px;} .xpager-slider .overflow .inner-content .data-content{position: relative;} .xpager-slider .overflow .inner-content .data-content .data{-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover; background-position:center;z-index:0;background-repeat:no-repeat;} .xpager-slider .overflow .inner-content .data-content .data video{ background-color:#000;} .xpager-slider .loader{height:50px; width:50px; background-image:url(img/loader.gif); background-position:center; position:absolute; top:50%; left:50%; margin-left:-25px; margin-top:-25px; background-size:50px;} .xpager-slider .navigation{position:absolute; bottom:0px; left:0px; z-index:11;} .xpager-slider .navigation div{float:left; width:20px; height:20px; line-height:20px; text-align:center; cursor:pointer;-webkit-background-size:contain;-moz-background-size:contain;-o-background-size:contain;background-size:contain;} .xpager-slider .navigation div.next{background-image:url(img/nav_next.png); background-repeat:no-repeat; background-position:center;} .xpager-slider .navigation div.prev{background-image:url(img/nav_prev.png); background-repeat:no-repeat; background-position:center;} .xpager-slider .top-navigation div{position:absolute; width:10%; height:40%; top:30%; z-index:5; opacity:0; filter:alpha(opacity=0); -webkit-transition:all 0.5s linear; -moz-transition:all 0.5s linear;-o-transition:all 0.5s linear;-ms-transform:all 0.5s linear;transition:all 0.5s linear;} .xpager-slider .top-navigation div.next{background-image:url(img/nav_next.png);right:0px; background-position: 100% center; background-size: 30px;background-repeat: no-repeat; cursor:pointer; text-align:right;} .xpager-slider .top-navigation div.prev{background-image:url(img/nav_prev.png);left:0px; background-position: 0% center; background-size: 30px;background-repeat: no-repeat; cursor:pointer; text-align:left;} .xpager-slider:hover .top-navigation div{opacity:1; filter:alpha(opacity=1);} .xpager-slider .thumbnail-navigation{width:100%; height:80px; position:absolute; bottom:0px; left:0px; z-index:10; overflow:hidden; background-color:rgba(255,255,255, .5);} .xpager-slider .thumbnail-navigation .thumbnail-content{ width:10000px; height:70px;position:absolute; left:0px; top:5px; z-index:1;} .xpager-slider .thumbnail-navigation .thumbnail-content:after{content:''; clear:both; display:block; height:0px;} .xpager-slider .thumbnail-navigation .thumbnail-content .data{width:120px; height:70px; float:left; margin-right:10px; -webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-position:center;-webkit-transition:all 1s linear; -moz-transition:all 1s linear;-o-transition:all 1s linear;-ms-transform:all 1s linear;transition:all 1s linear; cursor:pointer; background-repeat:no-repeat; border:solid 1px #CCC;} .xpager-slider .thumbnail-navigation .thumbnail-content .data.verticalFormat{-webkit-background-size:contain;-moz-background-size:contain;-o-background-size:contain;background-size:contain;} .xpager-slider .thumbnail-navigation .thumbnail-content .data.aktiv{border-color:#666;} .xpager-slider .thumbnail-navigation .thumbnail-prev{height:20px; width:20px; position:absolute; top:50%; left:10px; margin-top:-10px; z-index:2; text-align:center; cursor:pointer; background-image:url(img/nav_prev.png); background-repeat:no-repeat; background-position:center; background-size:20px;} .xpager-slider .thumbnail-navigation .thumbnail-next{height:20px; width:20px; position:absolute; top:50%; right:10px; margin-top:-10px; z-index:2; text-align:center; cursor:pointer; background-image:url(img/nav_next.png); background-repeat:no-repeat; background-position:center; background-size:20px; } .xpager-slider .nav-points{width: 100%; height:25px; text-align:center; z-index:6;} .xpager-slider .nav-points .points-content{ display:inline-block;} .xpager-slider .nav-points .points-content .point{float:left; display:block; width:13px; height:13px; text-align:center; background-color:#fff; margin:5px;border:solid 2px #999999; -webkit-transition:all 1s linear; -moz-transition:all 1s linear;-o-transition:all 1s linear;-ms-transform:all 1s linear;transition:all 1s linear; cursor:pointer; } .xpager-slider .nav-points .points-content .aktiv{background-color:#F00; border-color:#000;} .xpager-slider .nav-points .points-content:after{content:''; clear:both; display:block; height:0px;} .xpager-slider .nav-points .points-content .point span{font-size: 10px;display: block;color:#000; font-family: verdana; -webkit-transition:all 1s linear; -moz-transition:all 1s linear;-o-transition:all 1s linear;-ms-transform:all 1s linear;transition:all 1s linear;} .xpager-slider .nav-points .points-content .aktiv span{color:#FFF;} .xpager-slider .pagenum{position:absolute; bottom:0px; right:0px; z-index:11; background-color:#fff;} .xpager-slider .pagenum div{float:left; width:20px; height:20px; line-height:20px; text-align:center;} .xpager-slider .pagenum div.max{float:left; border-left:solid 1px #000;} /* Format */ .xpager-slider .overflow .inner-content .data-content .data.verticalFormat{-webkit-background-size:contain;-moz-background-size:contain;-o-background-size:contain;background-size:contain;background-color:#000;} .xpager-slider .overflow .inner-content .data-content .data.shadowBox{cursor:pointer;} .xpager-slider .overflow .inner-content .data-content .data.noScaleFormat{-webkit-background-size:contain;-moz-background-size:contain;-o-background-size:contain;background-size:contain;} /* Kommentare */ .xpager-slider .overflow .inner-content .data-content .comments{background-color: rgba(0,0,0,0.3);height: 80px;width: 100%;z-index: 10000;position: absolute;bottom: 0;color: #fff;} .xpager-slider .overflow .inner-content .data-content .comments .comments-content{ font-family:Verdana, Geneva, sans-serif; margin:10px;} /* Animate slide */ .xpager-slider[data-type='slide'] .overflow .inner-content .data-content{float:left;} /* Animate slide-vertical */ .xpager-slider[data-type='slide-vertical'] .overflow .inner-content{position:absolute; height:10000px; width:100%!important; top:0px; left:0px;} .xpager-slider[data-type='slide-vertical'] .overflow .inner-content .data-content .data{position:relative;} /* Animate fade */ .xpager-slider[data-type='fade'] .overflow .inner-content .data-content{z-index:0;} .xpager-slider[data-type='fade'] .overflow .inner-content{position:relative; height:100%; width:100%;} .xpager-slider[data-type='fade'] .overflow .inner-content .data-content{float:none; position:absolute; top:0px; left:0px; z-index:0; display:none;} .xpager-slider[data-type='fade'] .overflow .inner-content .start{z-index:2!important; display:block;} /* Animate karussell */ .xpager-slider[data-type='karussell'] .overflow .inner-content .data-content{position:absolute; top:0px; float:left;} .xpager-slider[data-type='karussell'] .overflow .inner-content .data-content.start{z-index:2;} .xpager-slider[data-type='karussell'] .overflow .inner-content .data-content .comments{z-index:1;} /* Animate karussell-vertical */ .xpager-slider[data-type='karussell-vertical'] .overflow .inner-content .data-content .data{position:absolute;} .xpager-slider[data-type='karussell-vertical'] .overflow .inner-content .data-content.start{z-index:2;} .xpager-slider[data-type='karussell-vertical'] .overflow .inner-content .data-content .comments{z-index:1;} /* Animate Ken-Burns */ .xpager-slider[data-type='ken-burns'] .overflow .inner-content{position:relative; height:100%; width:100%;} .xpager-slider[data-type='ken-burns'] .overflow .inner-content .data-content{display:block; position:absolute; height:100%; width:100%;} .xpager-slider[data-type='ken-burns'] .overflow .inner-content .data-content .data{float:none; position:absolute; top:0px; left:0px; display:block; height:100%; width:100%; -webkit-transform: scale(1,1);-moz-transform: scale(1,1);-ms-transform:scale(1,1);-o-transform: scale(1,1);transform: scale(1,1);} .xpager-slider[data-type='ken-burns'] .overflow .inner-content .start{opacity:1; filter:alpha(opacity=1); z-index:2;} .xpager-slider[data-type='ken-burns'] .overflow .inner-content .start .data{-webkit-transition:all 30s linear; -moz-transition:all 30s linear;-o-transition:all 30s linear;-ms-transform:all 30s linear;transition:all 30s linear;-webkit-transform: scale(2,2);-moz-transform: scale(2,2);-ms-transform:scale(2,2);-o-transform: scale(2,2);transform: scale(2,2);} /* ken-burns */ .xpager-slider[data-type='ken-burns'] .overflow .inner-content .play .data{-webkit-transition:all 30s linear; -moz-transition:all 30s linear;-o-transition:all 30s linear;-ms-transform:all 30s linear;transition:all 30s linear;} .xpager-slider[data-type='ken-burns'] .overflow .inner-content .start .data{-webkit-transform: scale(2,2);-moz-transform: scale(2,2);-ms-transform:scale(2,2);-o-transform: scale(2,2);transform: scale(2,2);} /*.xpager-slider[data-type='ken-burns'] .overflow .inner-content .play[data-x='0'][data-y='0'] .data{background-position:center;} .xpager-slider[data-type='ken-burns'] .overflow .inner-content .play[data-x='1'][data-y='0'] .data{background-position:left;} .xpager-slider[data-type='ken-burns'] .overflow .inner-content .play[data-x='2'][data-y='0'] .data{background-position:right;} .xpager-slider[data-type='ken-burns'] .overflow .inner-content .play[data-x='0'][data-y='1'] .data{background-position:top;} .xpager-slider[data-type='ken-burns'] .overflow .inner-content .play[data-x='0'][data-y='2'] .data{background-position:bottom;} .xpager-slider[data-type='ken-burns'] .overflow .inner-content .play[data-x='1'][data-y='1'] .data{background-position:left top;} .xpager-slider[data-type='ken-burns'] .overflow .inner-content .play[data-x='1'][data-y='2'] .data{background-position:left bottom;} .xpager-slider[data-type='ken-burns'] .overflow .inner-content .play[data-x='2'][data-y='1'] .data{background-position:right top;} .xpager-slider[data-type='ken-burns'] .overflow .inner-content .play[data-x='2'][data-y='2'] .data{background-position:right bottom;}*/ .xpager-slider[data-type='ken-burns'] .overflow .inner-content .play .data{-webkit-transform: scale(2,2);-moz-transform: scale(2,2);-ms-transform:scale(2,2);-o-transform: scale(2,2);transform: scale(2,2);} .xpager-slider[data-type='ken-burns'] .overflow .inner-content .reset .xpager-slider[data-type='ken-burns'] .overflow .inner-content .reset .data{-webkit-transition:none; -moz-transition:none; -o-transition:none;-ms-transform:none;transition:none;-webkit-transform: none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none; -webkit-transform: scale(1,1);-moz-transform: scale(1,1);-ms-transform:scale(1,1);-o-transform: scale(1,1);transform: scale(1,1);} .xpager-slider[data-type='ken-burns'] .overflow .inner-content .reset .xpager-slider[data-type='ken-burns'] .overflow .inner-content .reset{z-index:0;} /* Animate Gallery */ .xpager-slider[data-type='gallery'] .overflow{overflow:auto; position:relative;} .xpager-slider[data-type='gallery'] .overflow .inner-content{position:relative; width:100%; height:100%;} .xpager-slider[data-type='gallery'] .overflow .inner-content .data-content{ height:150px; width:150px; float:left; margin:20px;} .xpager-slider[data-type='gallery'] .overflow .inner-content .data-content .data{ height:150px!important; width:150px!important; float:left;} .xpager-slider[data-type='gallery'] .top-navigation{display:none; height:0px; width:0px;}