1/* 2 * Basic jQuery Slider plug-in v.1.3 3 * 4 * http://www.basic-slider.com 5 * 6 * Authored by John Cobb 7 * http://www.johncobb.name 8 * @john0514 9 * 10 * Copyright 2011, John Cobb 11 * License: GNU General Public License, version 3 (GPL-3.0) 12 * http://www.opensource.org/licenses/gpl-3.0.html 13 * 14 ****** Edited ****** 15 */ 16 17;(function($) { 18 19 "use strict"; 20 21 $.fn.bjqs = function(o) { 22 23 // slider default settings 24 var defaults = { 25 26 // w + h 27 width : 700, 28 height : 300, 29 30 // transition valuess 31 animtype : 'fade', 32 animduration : 1000, // length of transition 33 animspeed : 4000, // delay between transitions 34 automatic : true, // enable/disable automatic slide rotation 35 36 // control and marker configuration 37 showcontrols : true, // enable/disable next + previous UI elements 38 centercontrols : true, // vertically center controls 39 nexttext : 'Next slide', // screen reader text 40 prevtext : 'Previous slide', // screen reader text 41 pausetext : 'Pause slides', 42 playtext : 'Play slides', 43 showmarkers : false, // enable/disable individual slide UI markers 44 centermarkers : true, // horizontally center markers 45 46 // interaction values 47 keyboardnav : true, // enable/disable keyboard navigation 48 hoverpause : true, // enable/disable pause slides on hover 49 50 // presentational options 51 usecaptions : true, // enable/disable captions using img title attribute 52 randomstart : false, // start from a random slide 53 54 }; 55 56 // create settings from defauls and user options 57 var settings = $.extend({}, defaults, o); 58 59 // slider elements 60 var $wrapper = this, 61 $slider = $wrapper.find('ul.bjqs'), 62 $slides = $slider.children('li'), 63 64 // control elements 65 $c_wrapper = null, 66 $c_fwd = null, 67 $c_prev = null, 68 $c_pause = null, 69 70 // marker elements 71 $m_wrapper = null, 72 $m_markers = null, 73 74 // elements for slide animation 75 $canvas = null, 76 $clone_first = null, 77 $clone_last = null; 78 79 // state management object 80 var state = { 81 slidecount : $slides.length, // total number of slides 82 animating : false, // bool: is transition is progress 83 paused : false, // bool: is the slider paused 84 currentslide : o.currentSlide || 1, // current slide being viewed (not 0 based) 85 nextslide : 0, // slide to view next (not 0 based) 86 currentindex : o.currentSlide || 0, // current slide being viewed (0 based) 87 nextindex : 0, // slide to view next (0 based) 88 interval : null // interval for automatic rotation 89 }; 90 91 // helpful variables 92 var vars = { 93 fwd : 'forward', 94 prev : 'previous' 95 }; 96 97 // run through options and initialise settings 98 var init = function() { 99 if(!$wrapper.data('bjqs-initialized')){ 100 // differentiate slider li from content li 101 $slides.addClass('bjqs-slide'); 102 conf_static(); 103 104 // configurations only avaliable if more than 1 slide 105 if( state.slidecount > 1 ){ 106 107 // enable random start 108 if (settings.randomstart){ 109 conf_random(); 110 } 111 112 // create and show markers 113 if( settings.showmarkers ){ 114 conf_markers(); 115 } 116 117 // enable slidenumboard navigation 118 if( settings.keyboardnav ){ 119 conf_keynav(); 120 } 121 122 // enable pause on hover 123 if (settings.hoverpause && settings.automatic && !$('body').hasClass('accessible_c
123arousel')){ 124 conf_hoverpause(); 125 } 126 127 } else { 128 // Stop automatic animation, because we only have one slide! 129 settings.automatic = false; 130 } 131 132 if (settings.usecaptions){ 133 conf_captions(); 134 } 135 136 // TODO: need to accomodate random start for slide transition setting 137 if (settings.animtype === 'slide' && !settings.randomstart){ 138 state.currentindex = 1; 139 state.currentslide = 2; 140 } 141 142 // slide components are hidden by default, show them now 143 $slider.show(); 144 $slides.eq(state.currentindex).show(); 145 146 // Finally, if automatic is set to true, kick off the interval 147 if (settings.automatic){ 148 state.interval = setInterval(function () { 149 go(vars.fwd, false); 150 }, settings.animspeed); 151 } 152 153 // added - image size recalculation 154 new_carousel_height_resize(); 155 156 // create and show controls 157 if (settings.showcontrols && state.slidecount > 1){ 158 conf_controls(); 159 } 160 $wrapper.data('bjqs-initialized', true); 161 } 162 }; 163 164 // added - new function added to carousel script 165 var new_carousel_height_resize = function() { 166 var new_carousel_height = $(window).height() - $('header').outerHeight() - $('footer').outerHeight(), 167 img_width = $(window).width() > 1805 ? 1805 : $(window).width(), 168 scaled_img_height = Math.round( (900 / 1805) * img_width), 169 min_img_height = 570, 170 max_img_height 171 172 if ($('body').hasClass('updated-carousel')) { 173 max_img_height = 900; 174 175 if ($(window).width() < 1024) { 176 min_img_height = 260; 177 settings.height = scaled_img_height; 178 } 179 180 if ($(window).width() < 640) { 181 settings.height = $(window).height() - $('header').height() - $('.mobileLogo').height() + parseInt($('.mobileLogo h1').css("padding-top")); 182 } 183 184 // reduce carousel height if it's larger than the max img height 185 if (new_carousel_height > max_img_height) 186 new_carousel_height = max_img_height; 187 188 // increase carousel height if it's smaller than the max img height / preset carousel height 189 if (new_carousel_height < min_img_height) 190 new_carousel_height = min_img_height; 191 192 if (new_carousel_height < settings.height) 193 new_carousel_height = settings.height; 194 195 } else { 196 if ($(window).width() >= 980) { 197 max_img_height = 900; // height of the image used for this size screen 198 settings.height = 560; 199 } else if ($(window).width() >= 480) { 200 max_img_height = 499; 201 settings.height = scaled_img_height; 202 } else if ($(window).width() >= 320) { 203 max_img_height = 279; 204 settings.height = scaled_img_height + 124; 205 var half_img_width = img_width/2; 206 var half_link_width = $slider.find('li:first-child .bjqs-caption a').outerWidth() / 2; 207 $slider.find('li:first-child .bjqs-caption a').css('left', (half_img_width - half_link_width) + 'px'); 208 } 209 210 // reduce carousel height if it's larger than: the scaled img / maximum image height 211 if (new_carousel_height > scaled_img_height) 212 new_carousel_height = scaled_img_height; 213 214 if (new_carousel_height > max_img_height) 215 new_carousel_height = max_img_height; 216 217 // increase carousel height if it's smaller than the preset carousel height 218 if (new_carousel_height < settings.height) 219 new_carousel_height = settings.height; 220 221 } 222 223 $slides.css({'height' : new_carousel_height}); 224 $slider.css({'height' : new_carousel_height}); 225 $wrapper.css({'height' : new_carousel_height}); 226 $('.carOverlay').css({'height' : new_carousel_height}); 227 228 // reposition prev next arrows 229 if ($('.bjqs-next').length >
229 0 && !$('body').hasClass('accessible_carousel')) { 230 position_controls($('.bjqs-next'), $('.bjqs-prev'), new_carousel_height); 231 } 232 } 233 234 var resize_complete = (function () { 235 var timers = {}; 236 237 return function (callback, ms, uniqueId) { 238 if (!uniqueId) { 239 uniqueId = "Don't call this twice without a uniqueId"; 240 } 241 if (timers[uniqueId]) { 242 clearTimeout (timers[uniqueId]); 243 } 244 timers[uniqueId] = setTimeout(callback, ms); 245 }; 246 })(); 247 248 // enforce fixed sizing on slides, slider and wrapper 249 var conf_static = function() { 250 $slides.css({ 251 'height' : settings.height, 252 'width' : settings.width 253 }); 254 $slider.css({ 255 'height' : settings.height, 256 'width' : settings.width 257 }); 258 $wrapper.css({ 259 'height' : settings.height 260 // 'width' : settings.width 261 }); 262 263 // added - window resize img height recalculation 264 $(window).resize(function() { 265 new_carousel_height_resize(); 266 }); 267 }; 268 269 var conf_controls = function() { 270 // create the elements for the controls 271 $c_wrapper = $('<ul class="bjqs-controls"></ul>'); 272 $c_fwd = $('<li class="bjqs-next"><a href="#" data-direction="'+ vars.fwd +'"><span class="textOffScreen">'+ settings.nexttext +'</span></a></li>'); 273 $c_prev = $('<li class="bjqs-prev"><a href="#" data-direction="'+ vars.prev +'"><span class="textOffScreen">'+ settings.prevtext +'</span></a></li>'); 274 $c_pause = $('<li class="bjqs-pause"><a href="#"><span class="textOffScreen">'+ settings.pausetext +'</span></a></li>'); 275 276 // bind click events 277 $c_wrapper.on('click','a',function(e, param1) { 278 e.preventDefault(); 279 var direction = $(this).attr('data-direction'); 280 if (param1 == 'intial_pause') direction = undefined; 281 if(!state.animating){ 282 if(direction === vars.fwd){ 283 go(vars.fwd,false); 284 } 285 if(direction === vars.prev){ 286 go(vars.prev,false); 287 } 288 if (direction == undefined && $('body').hasClass('accessible_carousel') && !$('body').hasClass('in_iframe')) { 289 if (!state.paused) { 290 clearInterval(state.interval); 291 state.paused = true; 292 $c_pause.addClass('play'); 293 $c_pause.find('.textOffScreen').html(settings.playtext); 294 } else { 295 state.interval = setInterval(function () { 296 go(vars.fwd); 297 }, settings.animspeed); 298 state.paused = false; 299 $c_pause.removeClass('play'); 300 $c_pause.find('.textOffScreen').html(settings.pausetext); 301 } 302 } else if (direction == undefined && $('body').hasClass('in_iframe')) { 303 clearInterval(state.interval); 304 state.paused = true; 305 $c_pause.addClass('play'); 306 $c_pause.find('.textOffScreen').html(settings.playtext); 307 } 308 } 309 }); 310 311 // put 'em all together 312 $c_prev.appendTo($c_wrapper); 313 if ($('body').hasClass('accessible_carousel')) { 314 $c_pause.insertAfter($c_prev); 315 } 316 $c_fwd.appendTo($c_wrapper); 317 $c_wrapper.appendTo($wrapper); 318 $c_wrapper.addClass('v-centered'); 319
320 if (!$('body').hasClass('accessible_carousel')) { 321 position_controls($c_fwd, $c_prev, $wrapper.height()); 322 } 323 }; 324 325 326 if (!$('body').hasClass('accessible_carousel')) { 327 var position_controls = function($c_fwd, $c_prev, wrapper_height) { 328 var offset_top, 329 offset_left = '8px'; 330 331 if ($(window).width() < 480) { 332 // position vertically center in the img 333 if ($('body').hasClass('updated-carousel')) { 334 offset_top = "10px"; 335 } else { 336 var img_middle = (wrapper_height - 124) / 2; 337 offset_top = img_middle - $c_fwd.find('a').height()/2 + "px"; 338 } 339 } else if ($(window).width() >= 480 && $(window).width() <= 980) { 340 // position bottom right 341 var offset_left = $wrapper.width() - ($c_fwd.find('a').width() * 2) - 40; 342 offset_top = wrapper_height - $c_fwd.find('a').height() - 10 + 'px'; 343 344 $c_fwd.find('a').css({'top': offset_top + 'px'}); 345 $c_prev.find('a').css({'top': offset_top + 'px', 'left': offset_left + 'px'}); 346 } else { 347 // position vertically center in the carousel 348 var wrapper_middle = wrapper_height / 2, 349 offset_top = wrapper_middle - $c_fwd.find('a').height()/2 + "px"; 350 } 351 352 $c_fwd.find('a').css({'top': offset_top}); 353 $c_prev.find('a').css({'top': offset_top, 'left': offset_left}); 354 } 355 } 356 357 var conf_markers = function() { 358 // create a wrapper for our markers 359 $m_wrapper = $('<ol class="bjqs-markers"></ol>'); 360 361 // for every slide, create a marker 362 $.each($slides, function(key, slide){ 363
364 var slidenum = key + 1, 365 gotoslide = key + 1; 366 367 if(settings.animtype === 'slide'){ 368 // + 2 to account for clones 369 gotoslide = key + 2; 370 } 371 372 var marker = $('<li><a href="#">'+ slidenum +'</a></li>'); 373 374 // set the first marker to be active 375 if(slidenum === state.currentslide){ marker.addClass('active-marker'); } 376 377 // bind the click event 378 marker.on('click','a',function(e){ 379 e.preventDefault(); 380 if(!state.animating && state.currentslide !== gotoslide){ 381 go(false,gotoslide); 382 } 383 }); 384 385 // add the marker to the wrapper 386 marker.appendTo($m_wrapper); 387 }); 388 389 $m_wrapper.appendTo($wrapper); 390 $m_markers = $m_wrapper.find('li'); 391 392 // center the markers 393 if (settings.centermarkers) { 394 $m_wrapper.addClass('h-centered'); 395 var offset = (settings.width - $m_wrapper.width()) / 2; 396 $m_wrapper.css('left', offset); 397 } 398 }; 399 400 var conf_keynav = function() { 401 $(document).keydown(function (event) { 402 // Prevent page move when pressing the carousel controls 403 if ((event.keyCode == 32 || event.keyCode == 39 || event.keyCode == 37) && $(':focus').parent().parent().hasClass('bjqs-controls')) { 404 event.preventDefault(); 405 } 406 }); 407 $(document).keyup(function (event) { 408 if ($('body').hasClass('accessible_carousel')) { 409 // Accessible carousel 410 411 // Class for adding bg colour when user tabbed to the controls 412 if ($(':focus').parent().parent().hasClass('bjqs-controls')) { 413 $('.bjqs-controls').addClass('hover'); 414 } else { 415 $('.bjqs-controls').removeClass('hover'); 416 } 417 418 // Press Space when on the pause/play button 419 if (event.keyCode == 32 && $(':focus').parent().hasClass('bjqs-pause')) { 420 if (!state.paused) { 421 clearInterval(state.interval); 422 state.paused = true; 423 $c_pause.addClass('play'); 424 $c_pause.find('.textOffScreen').html(settings.playtext); 425 return; 426 } else { 427 state.interval = setInterval(function () { 428 go(vars.fwd); 429 }, settings.animspeed); 430 state.paused = false; 431 $c_pause.removeClass('play'); 432 $c_pause.find('.textOffScreen').html(settings.pausetext); 433 } 434 } 435 436 // Press arrows 437 if (!state.animating) { 438 if (event.keyCode === 39) { /* R */ 439 go(vars.fwd, false); 440 } else if (event.keyCode === 37) { /* L */ 441 go(vars.prev, false); 442 } 443 } 444 } else { 445 // Non accessible carousel 446 447 if (!state.paused) { 448 clearInterval(state.interval); 449 state.paused = true; 450 } 451 452 if (!state.animating) { 453 if (event.keyCode === 39) { 454 event.preventDefault(); 455 go(vars.fwd, false); 456 } else if (event.keyCode === 37) { 457 event.preventDefault(); 458 go(vars.prev, false); 459 } 460 } 461 462 if (state.paused && settings.automatic) { 463 state.interval = setInterval(function () { 464 go(vars.fwd); 465 }, settings.animspeed); 466 state.paused = false;
467 } 468 469 } 470 }); 471 }; 472 473 var conf_hoverpause = function() { 474 $wrapper.hover(function () { 475 if (!state.paused) { 476 clearInterval(state.interval); 477 state.paused = true; 478 } 479 }, function () { 480 if (state.paused && !$('body').hasClass('in_iframe')) { 481 state.interval = setInterval(function () { 482 go(vars.fwd, false); 483 }, settings.animspeed); 484 state.paused = false; 485 } 486 }); 487 }; 488 489 var conf_captions = function() { 490 491 $.each($slides, function (key, slide) { 492 var captionTitle = $(slide).find('img:first-child').data('heading'); // Title 493 var captionDes = $(slide).find('img:first-child').data('description'); // Description 494 var captionTitleColour = $(slide).find('img:first-child').data('title-colour'); // Description Colour 495 var captionDesColour = $(slide).find('img:first-child').data('description-colour'); // Description Colour 496 var captionBtnText = $(slide).find('img:first-child').data('btntext'); // Link Text 497 var captionBtnLink = $(slide).find('img:first-child').data('btnlink'); // Link Href 498 var captionBtnRel = $(slide).find('img:first-child').data('btnrel'); // Link Rel 499 var captionBtnTarget = $(slide).find('img:first-child').data('btntarget'); // Link Target 500 501 $('<div class="caption-wrapper"><div class="bjqs-caption"></div></div>').appendTo($(slide)); 502 $('<div class="carOverlay"></div>').appendTo($(slide)); 503 504 // show first caption 505 if ($(slide).index() == 0) { 506 $(this).find('div.bjqs-caption').addClass('captionCur') 507 } 508 509 // Title 510 if(!captionTitle){ 511 captionTitle = $(slide).find('a img:first-child').attr('title'); 512 } // Keep title if no caption is present 513 514 if (captionTitle && captionTitle.trim() !== '') { 515 // Check if the title already contains H2 tags (from TinyMCE editor) 516 if (captionTitle.indexOf('<h2') !== -1) { 517 // Content already has H2 tags, append as-is 518 $(slide).find('.bjqs-caption').append(captionTitle); 519 } else { 520 // Plain text content, wrap in H2 521 captionTitle = $('<h2>' + captionTitle + '</h2>'); 522 captionTitle.appendTo($(slide).find('.bjqs-caption')); 523 } 524 if (captionTitleColour) 525 $(slide).find('.bjqs-caption h2').css('color', captionTitleColour); 526 } 527 528 // Description 529 if (captionDes) { 530 captionDes = $('<p>' + captionDes + '</p>'); 531 captionDes.appendTo($(slide).find('.bjqs-caption')); 532 if (captionDesColour) 533 $(slide).find('p').css('color', captionDesColour); 534 } 535 536 // Link 537 if(!captionBtnText || !captionBtnLink){ 538 captionBtnText = $(slide).find('a').find('img:first-child').data('btntext'); 539 captionBtnLink = $(slide).find('a').find('img:first-child').data('btnlink'); 540 } // Keep title if no caption is present 541 542 if (captionBtnText && captionBtnLink) { 543 if (captionBtnRel) { 544 captionBtnText = $('<a href="' + captionBtnLink + '" rel="' + captionBtnRel + '" >' + captionBtnText + '</a>'); 545 } else if (captionBtnTarget) { 546 captionBtnText = $('<a href="' + captionBtnLink + '" target="' + captionBtnTarget + '">' + captionBtnText + '</a>'); 547 } else { 548 captionBtnText = $('<a href="' + captionBtnLink + '">' + captionBtnText + '</a>'); 549 } 550 captionBtnText.appendTo($(slide).find('.bjqs-caption')); 551 } 552 }); 553 }; 554 555 var conf_random = function() { 556 var rand = Math.floor(Math.random() * state.slidecount) + 1; 557 state.currentslide = rand; 558 state.currentindex = rand-1; 559 }; 560 561 var set_next = function(direction) { 562 if(direction === vars.fwd){ 563 if ($slides.eq(state.currentindex).next().length){ 564 state.nextindex = state.currentindex + 1; 565 state.nextslide = state.currentslide + 1; 566 } else { 567 state.nextindex = 0; 568 state.nextslide = 1; 569 } 570 } else { 571 if ($slides.eq(state.currentindex).prev().length){ 572 state.nextindex = state.currentindex - 1; 573 state.nextslide = state.currentslide - 1; 574 } else { 575 state.nextindex = state.slidecount - 1; 576 state.nextslide = state.slidecount; 577 } 578 } 579 }; 580 581 var go = function(direction, position) { 582 583 if ($('body').hasClass('in_iframe')) { 584 state.currentindex = state.nextindex = $wrapper.find('.bjqs li[style*="list-item"]').index() 585 } 586 587 // only if we're not already doing things 588 if (!state.animating){ 589 state.animating = true; 590 591 if (position){ 592 state.nextslide = position; 593 state.nextindex = position-1; 594 } else { 595 set_next(direction); 596 } 597 598 // fade animation 599 if (settings.animtype === 'fade'){ 600 601 if (settings.showmarkers){ 602 $m_markers.removeClass('active-marker'); 603 $m_markers.eq(state.nextindex).addClass('active-marker'); 604 } 605 606 // fade out current 607 $slides.eq(state.currentindex).fadeOut(settings.animduration).find('.bjqs-caption').css('opacity', 0); 608 609 // fade in next slide 610 $slides.eq(state.nextindex).fadeIn(settings.animduration); 611 612 // now that the next slide is visible get heights to work with 613 var slider_vert_middle = $slider.height()/2, 614 next_caption_height = $slides.eq(state.nextindex).find('.bjqs-caption').outerHeight(), 615 half_img_width = $wrapper.width()/2, 616 half_link_width = $slides.eq(state.nextindex).find('.bjqs-caption a').outerWidth() / 2, 617 caption_top = slider_vert_middle - next_caption_height/2; 618 var caption_start_left, 619 caption_end_left; 620 621 if ($('body').hasClass('updated-carousel')) { 622 if ($(window).width() >= 560) 623 caption_start_left = caption_end_left = 20; 624 } else { 625 if ($(window).width() >= 320) 626 caption_start_left = caption_end_left = 20; 627 } 628 if ($(window).width() >= 980) { 629 caption_start_left = 60; 630 caption_end_left = 110; 631 } 632 633 // fade in slide's caption 634 $slides.eq(state.nextindex).find('.bjqs-caption').css({opacity: 0, marginLeft: caption_start_left}).delay(500).animate({ 635 opacity: 1, 636 marginLeft: caption_end_left 637 }, 1500, function(){ 638 state.animating = false;
639 state.currentslide = state.nextslide; 640 state.currentindex = state.nextindex; 641 }) 642 } 643 644 // slide animation 645 if(settings.animtype === 'slide'){ 646 647 if (settings.showmarkers){ 648 649 var markerindex = state.nextindex-1; 650 651 if (markerindex === state.slidecount-2){ 652 markerindex = 0; 653 } else if (markerindex === -1){ 654 markerindex = state.slidecount-3; 655 } 656 657 $m_markers.removeClass('active-marker'); 658 $m_markers.eq(markerindex).addClass('active-marker'); 659 } 660 661 state.slidewidth = settings.width; 662 663 $slider.animate({'left': -state.nextindex * state.slidewidth }, settings.animduration, function(){ 664 state.currentslide = state.nextslide; 665 state.currentindex = state.nextindex; 666 667 // is the current slide a clone? 668 if ($slides.eq(state.currentindex).attr('data-clone') === 'last'){ 669 // affirmative, at the last slide (clone of first) 670 $slider.css({'left': -state.slidewidth }); 671 state.currentslide = 2; 672 state.currentindex = 1; 673 } else if($slides.eq(state.currentindex).attr('data-clone') === 'first'){ 674 // affirmative, at the fist slide (clone of last) 675 $slider.css({'left': -state.slidewidth *(state.slidecount - 2)}); 676 state.currentslide = state.slidecount - 1; 677 state.currentindex = state.slidecount - 2; 678 } 679 680 state.animating = false; 681 }); 682 } 683 } 684 }; 685 686 init(); 687 }; 688})(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.