1/* 2 * Baner slideshow with caption 3 * 4 * http://sam3.pl 5 * 6 * Copyright (c) CONCEPT Intermedia 2015-2016 7 * Napisane przez 8 * Maciej Dejewski 9 * 10 * Version: 1.1.0 Last revised: 09/05/2018 11 * 12 */ 13 14if (typeof globalpause == 'undefined') { 15 globalPause=false; 16} 17 18var hsOptions = {}; 19 20((function(hs){ 21 hs(document).ready(function(){ 22 23 /* NEW OPTIONS */ 24 25 /* END NEW OPTIONS */ 26 27 28 29 hsOptions.container = '#naglowek_homepage'; 30 hsOptions.coverWindow = false; //fill full viewport window (true) or put it in container (false) 31 hsOptions.siteDomain = hyperssDomain; 32 hsOptions.timthumbPath = timthumbPath; 33 hsOptions.tabWorksOnAllSlides = true; 34 hsOptions.titleFadeInFrom = {top:0,right:0,bottom:0,left:-30,z:5,scale:1,duration:0.5,delay:1}; 35 hsOptions.descriptionFadeInFrom = {top:0,right:0,bottom:0,left:-30,z:5,scale:1,duration:0.5,delay:1.2}; 36 hsOptions.forceImageWidth = 1200; // force cropping size of slide image 37 hsOptions.forceImageHeight = hyperssHeight; 38 hsOptions.showNavigationArrows = true; 39 hsOptions.showPager = true; 40 41 if (typeof hsOptions.coverWindow == 'undefined') 42 hsOptions.coverWindow = false; 43 if (typeof hsOptions.container == 'undefined') 44 hsOptions.container = '#naglowek_homepage'; 45 if (typeof hsOptions.siteDomain == 'undefined') 46 hsOptions.siteDomain = '/'; 47 if (typeof hsOptions.timthumbPath == 'undefined') 48 hsOptions.timthumbPath = 'timthumb.php'; 49 if (typeof hsOptions.tabWorksOnAllSlides == 'undefined') 50 hsOptions.tabWorksOnAllSlides = false; 51 if (typeof hsOptions.titleFadeInFrom == 'undefined') 52 hsOptions.titleFadeInFrom = {top:0,right:0,bottom:0,left:0,z:0,scale:1,duration:0.3,delay:0}; 53 if (typeof hsOptions.descriptionFadeInFrom == 'undefined') 54 hsOptions.descriptionFadeInFrom = {top:0,right:0,bottom:0,left:0,z:0,scale:1,duration:0.3,delay:0.3}; 55 if (typeof hsOptions.forceImageWidth == 'undefined') 56 hsOptions.forceImageWidth = 0; 57 if (typeof hsOptions.forceImageHeight == 'undefined') 58 hsOptions.forceImageHeight = 0; 59 if (typeof hsOptions.showNavigationArrows == 'undefined') 60 hsOptions.showNavigationArrows = false; 61 if (typeof hsOptions.showPager == 'undefined') 62 hsOptions.showPager = false; 63 64 var $container = hs(hsOptions.container); 65 66 // get viewport sizes (x = width, y = height) 67 var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0]; 68 //var layoutElementsHeight = 166 + 113; // height of elements like header and footer that limit viewport size 69 var getViewPortSize = function() { 70 if(hsOptions.coverWindow){ 71 x=w.innerWidth||e.clientWidth||g.clientWidth,y=w.innerHeight||e.clientHeight||g.clientHeight; 72 } 73 else{ 74 x=$container.innerWidth(), 75 y=$container.innerHeight() 76 } 77 78 // check document size to make corrections if browser zoom is used 79 var aspectRatio = x/y; 80 var docW = hs(document).width(); 81 if (hsOptions.coverWindow){ 82 if (docW > x) { 83 x = docW; 84 y = x / aspectRatio; 85 } 86 } 87 } 88 getViewPortSize(); 89 //if(hsOptions.coverWindow) 90 // y = y - layoutElementsHeight; 91 92 var hasFocus = false; 93 var isPaused = false; 94 95 var lastSlide = 0; 96 var currentSlide = 0; // currently displayed full size slide 97 var nextSlide = 1; // slide that is to be loaded 98 var slidesLoaded = 0; 99 var totalSlides = slides.length; // total number of slides 100 var slideTweenDuration = 2; // duration of slide fade in 101 var slideDelay = slidesDelay; // delay between slide changes in seconds 102 var titleTweeDuration = 2; // duration of title slide 103 var margin1 = 10; // margin from top to first title 104 var margin2 = 4; // margin from first to second title 105 var margin3 = 15; // margin from description to end 106 107 var titleMargins = margin1 + margin2 + margin3; // margins in text containers 108 var allSlidesLoaded = false; // if set to true images won't no longer be loaded from web 109 110 var images = new Array(); // array with Image objects 111 112 var loaderFadeTime = 1; // time (in seconds) of lader image fade in / fade out transitions 113 114 var mySiteUrl = hsOptions.siteDomain; // url of website 115 116 var concepthypertitlesliderImagePath = '/images-flash/'; // this is the path to images for slideshow interface (like loader image) 117 var loaderImage = concepthypertitlesliderImagePath + 'hyperssSlidePreloader.gif'; // the slideshow loader image 118 119 preloadImage = function(i) { 120 //cc('preloadImage('+i+')',333); 121 122 // show loader image 123 TweenLite.to(hs('#hyperss-loader'),loaderFadeTime,{opacity: 1}); 124 125 var imageObj = new Image(); 126 images[i] = imageObj; 127 imageObj.onload = function(){ 128 imageLoaded(i); 129 }; 130
131 var cropX = x; 132 var cropY = y; 133 if (hsOptions.forceImageWidth != 0) cropX = hsOptions.forceImageWidth; 134 if (hsOptions.forceImageHeight != 0) cropY = hsOptions.forceImageHeight; 135 136 getViewPortSize(); 137 138 var css_active = jQuery("#css-active").height() > 0; 139 if(css_active){ 140 imageObj.src = timthumbPath + '?src=' + slides[i] + '&q=85&w='+hyperssWidth + '&h='+hyperssHeight; 141 imageObj.alt = 'baner'; 142 143 } 144 } 145 146 // function that runs after each one of slides is loaded 147 imageLoaded = function(i){ 148 //cc('imageLoaded('+i+')'); 149 150 slidesLoaded ++; 151 if (slidesLoaded >= totalSlides){ 152 allSlidesLoaded = true; 153 } 154 155 // update viewport size information 156 getViewPortSize(); 157 158 // hide loader image 159 TweenLite.to(hs('#hyperss-loader'),loaderFadeTime, {opacity: 0}); 160 161 // insert slide image 162 hs('#hyperss .slide:nth-child('+i+') .slide-image').append(images[i]); 163 164 165 var css_active = jQuery("#css-active").height() > 0; 166 if(css_active){ 167 // style slide container 168 //hs('#hyperss .slide, #hyperss .slide .slide-image').css({width: x,height: y,position: 'absolute'}); 169 hs('#hyperss .slide, #hyperss .slide .slide-image').css({width: x,height: y}).addClass("js-position-absolute"); 170 } 171 172 // remove width and height attributes in case they were set before 173 hs('#hyperss .slide:nth-child(' + i + ') .slide-image img').removeAttr('width'); 174 hs('#hyperss .slide:nth-child(' + i + ') .slide-image img').removeAttr('height'); 175 176 // check if slide is wider then viewport 177 //hs('#hyperss .slide:nth-child(' + i + ') .slide-image img').css({position:'absolute', visibility:'hidden'}); 178 var css_active = jQuery("#css-active").height() > 0; 179 if(css_active){ 180 var imageWidth = hs('#hyperss .slide:nth-child(' + i + ') .slide-image img').innerWidth(); 181 var imageHeight = hs('#hyperss .slide:nth-child(' + i + ') .slide-image img').innerHeight(); 182 if ( ( imageWidth / imageHeight) < (x / y) ) { 183 hs('#hyperss .slide:nth-child(' + i + ') img').css({width: x}); 184 } 185 else { 186 hs('#hyperss .slide:nth-child(' + i + ') img').css({height: y}); 187 } 188 if ( imageHeight === 0 ) { 189 hs('#hyperss .slide:nth-child(' + i + ') img').css({width: x,marginTop:0}); 190 } 191 192 //hs('#hyperss .slide:nth-child(' + i + ') .slide-image img').css({position:'', visibility:''}); 193 hs('#hyperss .slide:nth-child(' + i + ') img').css({ 194 marginTop: (y - hs('#hyperss .slide:nth-child(' + i + ') img').innerHeight()) / 2, 195 marginLeft: (x - hs('#hyperss .slide:nth-child(' + i + ') img').innerWidth()) / 2 196 }); 197 fadeIn(i); 198 } 199 } 200 201 202 hyperSlideshowSetup = function() { 203 //console.info('hyperSlideshowSetup'); 204 var css_active = jQuery('#css-active').height() > 0; 205 //if(!css_active) return; 206 207 // add slideshow container 208 hs(".naglowek_homepage").prepend('<div id="hyperss"></div>'); 209 if(css_active) 210 { 211 hs("#hyperss").css({width: hyperssWidth, height: hyperssHeight}); 212 } 213 214 if (totalSlides > 2) hs("#hyperss").addClass('has-many-pages'); 215 216 217 // insert slide containers 218 for (var i = 1; i < slides.length; i++){ 219 hs('#hyperss').append('<div aria-hidden="true" class="slide"><div class="slide-image"></div></div>'); 220 } 221 // insert title containers 222 for (var i = 1; i < slides.length; i++){ 223 myHref = '#'; 224 myTitle = null; 225 myClass = ' disabled'; 226 myTabindex = ' tabindex="-1"'; 227 if (hyperssLinks[i] != '') { 228 myHref = hyperssLinks[i]; 229 myClass = ''; 230 myTabindex = ''; 231 } 232 if (hsOptions.tabWorksOnAllSlides) 233 myTabindex = ''; 234 if (hyperssTitles[i] != '') { 235 myTitle = 'title="'+hyperssTitles[i]+'"'; 236 } 237 else { 238 myClass += ' no-title'; 239 } 240 if (hyperssDescriptions[i] == '') { 241 myClass += ' no-description'; 242 } 243 244 var $a = hs('<a class="title-container'+myClass+'" href="'+myHref+'" '+myTitle+''+myTabindex+ ' data-id="'+i+'"><div class="title-wrapper"><div class="hyperss-text"><div class="hyperss-title"><span>'+hyperssTitles[i]+'</span></div><span class="cl"></span><div class="hyperss-description"><span>'+hyperssDescriptions[i]+'</span></div></div></div><span aria-hidden="true" class="text-faker" style="font-size:0;">.</span></a>'); 245 if (myClass === ' disabled'){ 246 $a.click(function(e){e.preventDefault();}); 247 } 248 249 hs('#hyperss').append($a); 250 } 251 252 // add title 253 hs('#hyperss-text-container').css({ 254 bottom: 50, 255 width: '100%', 256 //position: 'absolute', 257 'z-index': 10 258 }).addClass("js-position-absolute"); 259 hs('#hyperss-text-bgd').css({ 260 width: '100%',
261 backgroundColor: hyperssBgColor, 262 opacity: hyperssOpacity, 263 //position: 'absolute' 264 }).addClass("js-position-absolute"); 265 266 // insert titles 267 hs('.hyperss-text').css({ 268 width: '100%', 269 //position: 'absolute', 270 opacity: 0 271 }).addClass("js-position-absolute"); 272 273 // add loader 274 hs("#hyperss").append('<div id="hyperss-loader"></div>'); 275 276 // loader image 277 hs('#hyperss-loader').append('<img aria-hidden="true" src="'+loaderImage+'" title="loader" alt="loader" />'); 278 hs('#hyperss-loader').css('opacity', '0'); 279 280 //hs('#page_footer_js').css({bottom: 0, position: 'fixed', width: '100%', marginBottom: 0}); 281 hs('#page_footer_js').css({bottom: 0, width: '100%', marginBottom: 0}).addClass("js-position-fixed"); 282 283 // add pager 284 hs("#hyperss").append('<div class="pager_container"><div aria-hidden="true" class="pager"></div></div>'); 285 if (!hsOptions.showPager) { 286 //hs("#hyperss .pager_container").css({display:'none'}); 287 hs("#hyperss .pager_container").addClass("js-display-none"); 288 } 289 for (var i = 1; i < slides.length; i++) { 290 hs("#hyperss .pager").append('<div aria-hidden="true" class="pager-button but but-'+i+'" data-id="'+i+'"></div>'); 291 } 292 293 hs("#hyperss .pager div").click(function(){ 294 var myId = parseInt(hs(this).attr('data-id')); 295 changeSlide(myId,true); 296 }); 297 298 //add arrows 299 hs("#hyperss").append('<div class="arrows_container"><div class="arrows" aria-hidden="true"><div aria-hidden="true" class="nav-arrow arrow-left"></div><div aria-hidden="true" class="nav-arrow arrow-right"></div></div></div>'); 300 hs("#hyperss .nav-arrow").click(function(){ 301 var targetSlide = currentSlide; 302 if (hs(this).hasClass('arrow-left')) { 303 targetSlide --; 304 } 305 else { 306 targetSlide ++; 307 } 308 if (targetSlide < 1) targetSlide = (totalSlides-1); 309 if (targetSlide >= totalSlides) targetSlide = 1; 310 311 var myId = parseInt(hs(this).attr('data-id')); 312 changeSlide(targetSlide,true); 313 }); 314 315 } 316 317 var insertSlide = function(){ 318 } 319 320 showSlide = function(i){ 321 //cc('showSlide()',i); 322 var css_active = jQuery('#css-active').height() > 0; 323 if(!css_active) return; 324 325 var css_active = jQuery('#css-active').height() > 0; 326 327 // stop currently running timer 328 //stopTimer(); 329 330 // update viewport size information 331 getViewPortSize(); 332 333 // hide loader image 334 //if(css_active) 335 TweenLite.to(hs('#hyperss-loader'), loaderFadeTime, {opacity: 0}); 336 337 lastSlide = currentSlide; 338 currentSlide = i; 339 fadeIn(i); 340 }; 341 342 fadeIn = function(i) { 343 //stopTimer(); 344 hs('#hyperss .pager .but').removeClass('current'); 345 hs('#hyperss .pager .but-'+i).addClass('current'); 346 347 fadeInPrepare(); 348 switch (transitionType) { 349 case 1: 350 fadeIn1(i); 351 break; 352 353 case 2: 354 fadeIn2(i,10,1,true); 355 break; 356 357 case 3: 358 fadeIn2(i,10,1,false); 359 break; 360 361 case 4: 362 fadeIn2(i,1,6,true); 363 break; 364 365 case 5: 366 fadeIn2(i,1,12,false); 367 break; 368 369 case 6: 370 fadeIn2(i,6,4,false); 371 break; 372 } 373 374 // titles 375 function fadeInTitle(i) { 376 hs('#hyperss .title-container').removeClass('current'); 377 hs('#hyperss .title-container[data-id="'+i+'"]').addClass('current'); 378 379 TweenLite.to(hs('#hyperss .title-container[data-id="'+i+'"] .hyperss-text'), hsOptions.titleFadeInFrom.duration / 2, {opacity: 1}); 380 TweenLite.to(hs('#hyperss .title-container[data-id="'+i+'"] .hyperss-title'), 0, {x:hsOptions.titleFadeInFrom.left,y:hsOptions.titleFadeInFrom.top,z:hsOptions.titleFadeInFrom.z,scale:hsOptions.titleFadeInFrom.scale,opacity:0}); 381 TweenLite.to(hs('#hyperss .title-container[data-id="'+i+'"] .hyperss-title'), hsOptions.titleFadeInFrom.duration, {x:0,y:0,z:0.01,scale:1,opacity:1,delay:hsOptions.titleFadeInFrom.delay}); 382 TweenLite.to(hs('#hyperss .title-container[data-id="'+i+'"] .hyperss-description'), 0, {x:hsOptions.descriptionFadeInFrom.left,y:hsOptions.descriptionFadeInFrom.top,z:hsOptions.descriptionFadeInFrom.z,scale:hsOptions.descriptionFadeInFrom.scale,opacity:0}); 383 TweenLite.to(hs('#hyperss .title-container[data-id="'+i+'"] .hyperss-description'), hsOptions.descriptionFadeInFrom.duration, {x:0,y:0,z:0.01,scale:1,op
383acity:1,delay:hsOptions.descriptionFadeInFrom.delay}); 384 TweenLite.to(hs('#hyperss-text-bgd'), titleTweeDuration, { height: hs('#hyperss .title-container[data-id="'+i+'"] .hyperss-title').innerHeight() + hs('.title-container[data-id="'+i+'"] .hyperss-description').innerHeight() + titleMargins }); 385 TweenLite.to(hs('#hyperss-text-container'), titleTweeDuration/5*4, { bottom: hs('#hyperss .title-container[data-id="'+i+'"] .hyperss-title').innerHeight() + hs('#hyperss .title-container[data-id="'+i+'"] .hyperss-description').innerHeight() + titleMargins }); 386 } 387 function fadeOutTitle(i) { 388 TweenLite.to(hs('#hyperss .title-container.current .hyperss-text'), titleTweeDuration / 2, { 389 opacity: 0, 390 onComplete: fadeInTitle(i) 391 }); 392 fadeInTitle(i); 393 } 394 fadeOutTitle(parseInt(i)); 395 } 396 397 var slideTimer; 398 399 // the Timer for loading next slide 400 startTimer = function(){ 401 //cc('startTimer()',222); 402 nextSlide = currentSlide + 1; 403 if (nextSlide >= totalSlides){ 404 nextSlide = 1; 405 } 406 407 slideTimer = setTimeout(function() { 408 changeSlide(nextSlide,false) 409 }, slideDelay * 1000); 410 } 411 stopTimer = function(){ 412 //cc('stopTimer()',222); 413 clearTimeout(slideTimer); 414 } 415 416 // prepare container for fadeIn 417 fadeInPrepare = function(){ 418 // set z-indexes for slides 419 hs('#hyperss .slide').not(hs('#hyperss .slide:nth-child('+currentSlide+'), #hyperss .slide:nth-child('+nextSlide+')')).css({ 420 zIndex: 0 421 }); 422 hs('#hyperss .slide:nth-child('+lastSlide+')').css({ 423 zIndex: 1 424 }); 425 hs('#hyperss .slide:nth-child('+currentSlide+')').css({ 426 zIndex: 2 427 }); 428 } 429 430 // basic roll down from top 431 fadeIn1 = function(i){ 432 var css_active = jQuery('#css-active').height() > 0; 433 if(!css_active) return; 434 435 hs('#hyperss .slide:nth-child(' + i + ') .slide-image').css({marginTop: -100,opacity: 0}); 436 437 hs('#hyperss .slide:nth-child(' + i + ') .slide-image').css({clip:'rect(0px,'+x+'px, 0px,0px)'}); 438 TweenLite.to(hs('#hyperss .slide:nth-child(' + i + ') .slide-image'), slideTweenDuration, {clip:'rect(0px,'+x+'px,'+y+'px,0px)'}); 439 TweenLite.to(hs('#hyperss .slide:nth-child(' + i + ') .slide-image'), slideTweenDuration, {marginTop: 0,opacity: 1, onComplete: removeClippingRectangle}); 440 } 441 442 // tiled fade in 443 fadeIn2 = function(i,xTiles,yTiles,clip){ 444 var css_active = jQuery('#css-active').height() > 0; 445 if(!css_active) return; 446 447 var tileWidth=parseInt(x/xTiles); 448 var tileHeight=parseInt(y/yTiles); 449 var tileSpeed=1; 450 var tileDelay=0.075; 451 452 // remove old elements 453 var slide=hs('#hyperss .slide:nth-child(' + i + ')'); 454 var tiles=hs('.slide-image',slide); 455 if (tiles.length==1){ 456 for (var i=1;i<(xTiles*yTiles);i++){ 457 hs(tiles[0]).clone().appendTo(slide); 458 } 459 } 460 461 tiles=hs('.slide-image',slide); 462 463 // reset slides 464 var it=0; 465 for (var i=0;i<xTiles;i++){ 466 for (var iy=0;iy<yTiles;iy++){ 467 clipTop=(iy*tileHeight); 468 clipRight=(i*tileWidth)+tileWidth+1; 469 clipBottom=(iy*tileHeight)+tileHeight+1; 470 clipLeft=(i*tileWidth); 471 hs(tiles[it]).css({opacity:0,top:0,left:0}).addClass("js-position-absolute"); 472 if (clip){ 473 if (xTiles>1) 474 hs(tiles[it]).css({clip:'rect('+clipTop+'px, '+clipLeft+'px, '+clipBottom+'px, '+clipLeft+'px)'}); 475 else 476 hs(tiles[it]).css({marginLeft:-300}); 477 } 478 else { 479 if (xTiles>1) 480 hs(tiles[it]).css({clip:'rect('+clipTop+'px, '+clipRight+'px, '+clipBottom+'px, '+clipLeft+'px)'}); 481 else{ 482 hs(tiles[it]).css({clip:'rect('+clipTop+'px, '+clipRight+'px, '+clipBottom+'px, '+clipLeft+'px)'}); 483 } 484 } 485 TweenLite.to(hs(tiles[it]),tileSpeed,{opacity:1,marginLeft:0,clip:'rect('+clipTop+'px, '+clipRight+'px, '+clipBottom+'px, '+clipLeft+'px)',delay:(it)*tileDelay}); 486 it++; 487 } 488 } 489 } 490 491 // remove clipping rectangle after slide fade in (so da boss can du -1000% zoom Åepsajta .. wow .. full HD to za maÅo) 492 removeClippingRectangle = function(){ 493 hs('#hyperss .slide .slide-image').css('clip',''); 494 } 495 496 497 // setup and configure basic slideshow parameters depending on users viewport and system 498 hyperSlideshowSetup(); 499 500 501 // manage changing slides (timer clicked or focus) 502 var changeSlide = function(id,manual){ 503 //cc('changeSlide()',id,111); 504 505 if (id != currentSlide) { 506 stopTimer(); 507 508 if (((!globalPause) && (!isPaused)) || manual){ 509 510 hs('#hyperss .pager .but').removeClass('current'); 511 hs('#hyperss .pager .but-'+id).addClass('current'); 512 513 //currentSlide = nextSlide; 514 nextSlide = id; 515 516 lastSlide=currentSlide; 517 if (allSlidesLoaded != true) { 518 preloadImage(nextSlide); 519 } 520 else { 521 showSlide(nextSlide); 522 } 523 currentSlide = id; 524 } 525 526 startTimer(); 527 } 528 } 529 530 function resetSlideSizes(){ 531 //cc('resetSlideSizes()'); 532 hs('#hyperss .slide, #hyperss .slide-image').css({width:x,height:y}); 533 } 534 535 // focus handler 536 hs('#hyperss a.title-container').focusin(function(){ 537 var myId = parseInt(hs(this).attr('data-id')); 538 changeSlide(myId,true); 539 pauseSlider(); 540 }); 541 hs('#hyperss a.title-container').focusout(function(){ 542 resumeSlider(); 543 }); 544 545 function pauseSlider(){ 546 //cc('pauseSlider()'); 547 hasFocus = true; 548 isPaused = true; 549 stopTimer(); 550 } 551 function resumeSlider(){ 552 //cc('resumeSlider()'); 553 hasFocus = false;
554 isPaused = false; 555 stopTimer(); 556 startTimer(); 557 } 558 559 //traceFocusInside(hs, $container, 'has-focus', 100, pauseSlider, resumeSlider); 560 561 // load first slide 562 changeSlide(1,false); 563 564 hs(window).resize(function(){ 565 getViewPortSize(); 566 resetSlideSizes(); 567 removeClippingRectangle(); 568 }); 569 570 }); 571 572 573}))(jQuery);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.