1/* 2 * Sidescroll.js v1.0 3 * by Imagely (www.imagely.com) 4 * 5 * This is a fork of portfolio.js. 6 * http://portfoliojs.com 7 * Copyright (c) 2012 Abhinay Omkar (http://abhiomkar.in) @abhiomkar 8 * Licensed under the MIT License: 9 * http://www.opensource.org/licenses/mit-license.php 10 * Dependencies 11 * - jQuery: http://jquery.com 12 * - jQuery easing: http://gsgd.co.uk/sandbox/jquery/easing 13 * - jQuery touch swipe: http://labs.skinkers.com/touchSwipe 14 * - jQuery imagesLoaded: http://desandro.github.com/imagesloaded 15 * - jQuery scrollTo: http://flesler.blogspot.in/2007/10/jqueryscrollto.html 16 * - JS Spin: http://fgnass.github.com/spin.js 17 * 18 * CHANGES FROM PORTFOLIO.JS 19 * This is a slightly modified version of portfolio.js v1.0. Here is a list of changes. 20 * Changed code has also been marked by inline comments below. Search for CHANGED 21 * 22 * 1) Two new arguments and defaults have been added to allow customization of the selector 23 * for next/prev navigation. If no callback is suggested, we continue to use the default 24 * selectors used in portfolio.js. 25 * 26 * 2) A change was made to the loadNextImages method to ensure compatibility with latest 27 * version of imagesLoaded that is packaged by default in WordPress. The original portfolio.js 28 * throws an error with the latest imageLoaded: .each() is not a function. This seems to be 29 * because the type of object that is passed to the imagesloaded callback function is no longer 30 * one for which the jquery .each() method is callable. 31 * 32 * 3) A trigger was added inside the imagesLoaded loop so that other libraries can update themselves 33 * when the sidescroll has added more images to itself. 34 * 35 * 4) The default value of enableKeyboardNavigation was changed to false. 36 * 37 * */ 38 39;(function($) { 40 41 $.fn.sidescroll = function(settings) { 42 43 // default values 44 var defaults = { 45 autoplay: false, 46 firstLoadCount: 4, 47 enableKeyboardNavigation: false, 48 loop: false, 49 easingMethod: 'easeOutQuint', 50 height: '500px', 51 width: '100%', 52 lightbox: false, 53 showArrows: true, 54 // CHANGED: The next three lines line are changed from portfolio.js 55 logger: true, 56 nextCallback: null, 57 prevCallback: null 58 }; 59 60 // overriding default values 61 $.extend(this, defaults, settings); 62 63 // Local variables 64 var portfolio = this, gallery = this, 65 currentViewingImage, 66 totalLoaded = 0, 67 offset_left = 6, 68 imageLoadedCalled = false; 69 70 // portfolio public methods 71 $.extend(this, { 72 version: "0.1v", 73 init: function() { 74 75 portfolio.scrollToOptions={axis: 'x', easing: portfolio.easingMethod, offset: -4} 76 77 // Responsive for Mobile 78 if ($(window).width() <= 700) { 79 // if mobile, reduce the gallery height to fit on screen 80 // 200px fixed height is good enough? 81 82 // override gallery height 83 portfolio.height = '200px'; 84 } 85 86 // CSS Base 87 $(this).css({ 88 width: portfolio.width, 89 'max-height': portfolio.height, 90 'overflow': 'hidden', 91 'white-space': 'nowrap' 92 }); 93 94 $(this).find('img').css({ 95 display: 'inline-block', 96 'max-width': 'none', 97 height: portfolio.height, 98 width: 'auto' 99 }); 100 101 102 $(this).find("img").css('display', 'none'); 103 // end 104 105 // set all images element attribute loaded to false and hide, bcoz the 106 // game is not yet started :) 107 $(this).find("img").attr('loaded', 'false'); 108 // end 109 110 // mark first & last images 111 $(this).find("img").first().attr('first', 'true').css({'margin-left': '5px'}); 112 $(this).find("img").last().attr('last', 'true').css({'margin-right': '6px'}); 113 // end 114 115 // spinner 116 // show spinner while the images are being loaded... 117 portfolio.spinner.show('100%'); 118 119 // load first 4 images 120 portfolio.loadNextImages(portfolio.firstLoadCount); 121 122 // First Image 123 $(this).find("img").first().addClass('active'); 124 125 if (portfolio.lightbox) { 126 $(gallery).find('img').not('.active').animate({opacity: '0.2'}); 127 $(gallery).find('img.active').animate({opacity: '1'}); 128 $(gallery).css({ 'overflow-x': 'hidden' }); 129 } 130 131 // Show Arrows 132 if (portfolio.showArrows) { 133 portfolio.navigation.show(); 134 } 135 136 // add a 5px space at the end 137 $('.gallery-blank-space').css({ 138 position: 'absolute', 139 width: '5px', 140 height: portfolio.height, 141 }); 142 143 // Events 144 145 /* Swipe Left */ 146 $(this).swipe( { 147 swipeLeft: function() { 148 portfolio.next(); 149 }, 150 swipeRight: function() { 151 portfolio.prev(); 152 } 153 }); 154 155 $(this).find('img').on('movestart', function(e) { 156 console_.log('movestart'); 157 if ((e.distX > e.distY && e.distX < -e.distY) || 158 (e.distX < e.distY && e.distX > -e.distY)) { 159 e.preventDefault(); 160 // TODO: touchstart? the gallery should follow the 161 // finger on touchstart 162 } 163 }); 164 165 /* Click */ 166 $(this).find("img").on('click', function(event) { 167 168 if ($(gallery).find('img.active')[0] === $(this)[0]) { 169 // If clicked on the current viewing image 170 // then scroll to next image 171 portfolio.next(); 172 173 } 174 else { 175 // clicked on the next image or particular image, scroll to that image 176 portfolio.slideTo($(this)); 177 } 178 }); // click() 179 180 // Gallery Scroll 181 $(this).on('scroll', function() { 182 if ($(gallery).find('img').last().attr('loaded') === 'true') { 183 $('.gallery-blank-space').css({left: $(gallery).find('img').last().data('offset-left') + $(gallery).find('img').last().width() + 'px'}); 184 } 185 186 // if (gallery[0].offsetWidth + gallery.scrollLeft() >= gallery[0].scrollWidth) // scroll end condition 187 188 // scroll amount is greater than 60% 189 if ((gallery[0].offsetWidth + gallery.scrollLeft())*100 / gallery[0].scrollWidth > 60) { 190 191 if (totalLoaded < $(gallery).find('img').length) { 192 console_.log('scroll(): loading some more images'); 193 portfolio.loadNextImages(6); 194 // $(gallery).find('img[loaded=true]').last().addClass('ctive'); 195 196 } 197 } 198 }); 199
200 // Window Resize 201 $(window).on('resize', function() { 202 if ($(window).width() <= 700 && $(gallery).find('img').first().height()!==200) { 203 $(gallery).css({height: '200px'}); 204 $(gallery).find('img').css({height: '200px'}); 205 $(gallery).find('.gallery-arrow-left, .gallery-arrow-right').css({height: '200px'}); 206 } 207 else if ($(window).width() > 700 && $(gallery).find('img').first().height()===200) { 208 $(gallery).css({height: portfolio.height}); 209 $(gallery).find('img').css({height: portfolio.height}); 210 $(gallery).find('.gallery-arrow-left, .gallery-arrow-right').css({height: portfolio.height}); 211 } 212 }); 213 214 }, // init 215 216 next: function() { 217 218 var cur_img = $(gallery).find('img.active'); 219 // CHANGED: The next was line changed from original public version 220 // var next_img = $(gallery).find('img.active').closest('a').next('a').find('img'); 221 var next_img = portfolio.nextCallback ? portfolio.nextCallback(gallery) : $(gallery).find('img.active').next(); 222 223 if($(cur_img).attr('last') === 'true') { 224 225 // if on last image and if loop is on 226 if(portfolio.loop) { 227 // go to first image 228 console_.log('last', 'loop: on'); 229 230 $(gallery).scrollTo(0, 500, portfolio.scrollToOptions); 231 232 $(gallery).find('img').removeClass('active').first().addClass('active'); 233 234 if (portfolio.lightbox) { 235 $(gallery).find('img').not('.active').animate({opacity: '0.2'}); 236 $(gallery).find('img.active').animate({opacity: '1'}); 237 } 238 } 239 else { 240 console_.log('last', 'loop: off'); 241 } 242 } 243 244 // if next image is already loaded 245 else if ($(next_img).attr('loaded') === 'true') { 246 // go to next image 247 $(gallery).scrollTo(next_img, 600, portfolio.scrollToOptions); 248 249 $(gallery).find('img').removeClass('active'); 250 $(next_img).addClass('active'); 251 252 if (portfolio.lightbox) { 253 $(gallery).find('img').not('.active').animate({opacity: '0.2'}); 254 $(gallery).find('img.active').animate({opacity: '1'}); 255 } 256 257 } 258 // if next image is not yet loaded 259 else if ($(next_img).attr('loaded') === 'false') { 260 // show the spinner and prepare to load next images 261 console_.log('next images are being loaded...'); 262 } 263 264 /* 265 if (gallery.offsetWidth + gallery.scrollLeft >= gallery.scrollWidth) { 266 console_.log('scrollEnd'); 267 var spinner_target = $(currentViewingImage).after('<span class="spinner-container"></span>'); 268 $(gallery).scrollTo($(currentViewingImage).data("offset-left") + 100, 500, {axis: 'x'}); 269 portfolio.spinner(spinner_target); 270 } 271 */ 272 console_.log('next: current viewing image', $(gallery).find('img.active')); 273 }, 274 275 prev: function() { 276 var cur_img = $(gallery).find('img.active'); 277 // CHANGED: The next was line changed from original public version 278 // var prev_img = $(gallery).find('img.active').closest('a').prev('a').find('img'); 279 var prev_img = portfolio.prevCallback ? portfolio.prevCallback(gallery) : $(gallery).find('img.active').prev(); 280 281 if($(cur_img).attr('first') === 'true') { 282 // If on first Image stay there, do not scroll 283 } 284 else if (prev_img){ 285 // go to prev image 286 $(gallery).scrollTo(prev_img, 500, portfolio.scrollToOptions); 287 288 $(gallery).find('img').removeClass('active'); 289 $(prev_img).addClass('active'); 290 291 if (portfolio.lightbox) { 292 $(gallery).find('img').not('.active').animate({opacity: '0.2'}); 293 $(gallery).find('img.active').animate({opacity: '1'}); 294 } 295 } 296 297 console_.log('prev: current viewing image', $(gallery).find('img.active')); 298 }, 299 300 slideTo: function(img) { 301 302 $(gallery).scrollTo(img, 500, portfolio.scrollToOptions); 303 304 $(gallery).find('img').removeClass('active'); 305 $(img).addClass('active'); 306 307 if (portfolio.lightbox) { 308 $(gallery).find('img').not('.active').animate({opacity: '0.2'}); 309 $(gallery).find('img.active').animate({opacity: '1'}); 310 } 311 312 }, 313 314 spinner: { 315 remove: function() { 316 $(gallery).find('.spinner-container').remove(); 317 }, 318 319 show: function(width) { 320 // Spinner 321 portfolio.spinner.remove(); 322 323 var lastImg = $(gallery).find('img[loaded=true]').last(); 324 $(gallery).append('<span class="spinner-container"></span>'); 325 $(gallery).find('.spinner-container').css({ 326 display: 'inline-block', 327 height: portfolio.height, 328 width: width, 329 'vertical-align': 'top' 330 }); 331 332 var opts = { 333 lines: 17, // The number of lines to draw 334 length: 4, // The length of each line 335 width: 2, // The line thickness 336 radius: 5, // The radius of the inner circle 337 corners: 1, // Corner roundness (0..1) 338 rotate: 0, // The rotation offset 339 color: '#000', // #rgb or #rrggbb 340 speed: 1.5, // Rounds per second 341 trail: 72, // Afterglow percentage 342 shadow: false, // Whether to render a shadow 343 hwaccel: false, // Whether to use hardware acceleration 344 className: 'spinner', // The CSS class to assign to the spinner 345 zIndex: 2e9, // The z-index (defaults to 2000000000) 346 top: parseInt(portfolio.height)/2, // Top position relative to parent in px 347 left: 'auto' // Left position relative to parent in px 348 }; 349 350 var spinner = new Spinner(opts).spin($(gallery).find('.spinner-container')[0]); 351 } 352 }, 353 354 loadNextImages: function(count) { 355 // console_.log('loading...', totalLoaded, count, $(gallery).find(".photo img").slice(totalLoaded, totalLoaded + count)); 356 357 if (!imageLoadedCalled) { 358 var nextImages; 359 360 // load first few pictures - gallery init 361 nextImages = $(gallery).find("img[loaded=false]").slice(0, count); 362 $(nextImages).each(function(index) { 363 // current img element 364 var cur_img = this; 365 366 cur_img.src = $(cur_img).attr('src'); 367 $(cur_img).attr('loaded', 'loading'); 368 }); // each() 369 370 // .imagesLoaded callback on images having src attribute but not loaded yet 371 // on otherwords, filter only loading images 372 // CHANGED: content of the following anonymous callback has changed from portfolio.js 373 $(nextImages).imagesLoaded(function( instance ){ 374 375 $images = instance.elements; 376 console_.log('images:'); 377 console_.log($images); 378 379 for (var i = 0, len = $images.length; i < len; i++) { 380 var img = $images[i]; 381 382 // Inorder to fadeIn effect to work, make the new 383 // img element invisible by 'display: none' 384 $(img).css({display: 'none'}); 385 portfolio.spinner.remove(); 386 $(img).fadeIn('slow'); 387 388 img_width = $(img).width(); 389 390 totalLoaded += 1; 391 392 $(img).data('width', img_width); 393 $(img).attr('loaded', 'true'); 394 } 395 396 imageLoadedCalled = false;
397 398 // loaded all images 399 if (totalLoaded === $(gallery).find('img').length) { 400 portfolio.spinner.remove(); 401 } 402 else if (gallery[0].offsetWidth === gallery[0].scrollWidth) { 403 // if the first loaded images doesn't fill the 404 // offsetWidth of gallery then load some more images 405 portfolio.loadNextImages(6); 406 } 407 408 }); // imagesLoaded() 409 410 imageLoadedCalled = true; 411 412 // CHANGED: Added by Benjamin / Imagely 2016-11-03 413 portfolio.trigger('images-loaded'); 414 415 } // if(!imageLoadedCalled) 416 417 }, // loadNextImages 418 navigation: { 419 show: function() { 420 if (portfolio.navigation.created) { 421 // arrows already exists, do not create again 422 $('.gallery-arrow-left, .gallery-arrow-right').show(); 423 $('.gallery-arrow-left, .gallery-arrow-right').delay(6000).fadeOut(); 424 } 425 else { 426 // create arrows 427 $(gallery).before('<span class="gallery-arrow-left"></span>').after('<span class="gallery-arrow-right"></span>'); 428 $(gallery).prev('.gallery-arrow-left').css({ 429 position: 'absolute', 430 left: '8px', 431 height: portfolio.height, 432 width: '50px', 433 'z-index': '9999', 434 // inline image for arrow-left 435 background: "url(data:image/png;base64,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) center left no-repeat", 436 'background-position': '8px', 437 opacity: '0.5' 438 }); 439 $(gallery).next('.gallery-arrow-right').css({ 440 position: 'absolute', 441 right: '0', 442 top: $(gallery).position().top, 443 height: portfolio.height, 444 width: '50px', 445 'z-index': '9999', 446 // inline image for arrow-right 447 background: "url(data:image/png;base64,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) center left no-repeat", 448 'background-position': '8px', 449 opacity: '0.5' 450 }); 451 452 $(gallery).prev('.gallery-arrow-left').on('click', function(e) { 453 portfolio.prev(); 454 }); 455 456 $(gallery).next('.gallery-arrow-right').on('click', function(e) { 457 portfolio.next(); 458 }); 459 460 $('.gallery-arrow-left, .gallery-arrow-right') 461 .on('mouseenter', function(){ 462 // Mouse In 463 $(this).css({ 'opacity': '1' }); 464 }) 465 .on('mouseleave', function() { 466 // Mouse Out 467 $(this).css({ 'opacity': '0.5' }); 468 }); 469 470 $(gallery).on('mousemove', function(){ 471 portfolio.navigation.show(); 472 }); 473 474 $('.gallery-arrow-left, .gallery-arrow-right').delay(6000).fadeOut(); 475 portfolio.navigation.created = true; 476 477 } // if.. else.. 478 }, // show() 479 480 hide: function() { 481 $('.gallery-arrow-left, .gallery-arrow-right').fadeOut(); 482 }, // hide() 483 created: false 484 } // navigation 485 }); // extend() 486 487 // keyboard navigation 488 if (this.enableKeyboardNavigation) { 489 // Patched 2020-11-04 by Benjamin Owens from .keydown(...) which is deprecated 490 $(document).on('keydown', function(e) { 491 var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0; 492 switch(key) { 493 case 73: // 'i' key 494 // go to first slide 495 portfolio.slideTo($(gallery).find('img').first()); 496 break; 497 case 65: // 'a' key 498 // go to last slide 499 portfolio.slideTo($(gallery).find('img').last()); 500 break; 501 502 case 75: // 'k' key 503 case 37: // left arrow 504 portfolio.navigation.hide(); 505 portfolio.prev(); 506 e.preventDefault(); 507 break; 508 // case 74: // 'j' key 509 case 39: // right arrow 510 portfolio.navigation.hide(); 511 portfolio.next(); 512 e.preventDefault(); 513 break; 514 } 515 }); 516 }
516 // keyboard shortcuts 517 518 // logger 519 var console_ = { 520 log: function() { 521 if (this.active) { 522 // var l = []; 523 for (var i=0, len=arguments.length; i < len; i++) { 524 // l.push(arguments[i]); 525 console.log(arguments[i]); 526 } 527 // console.log(l.join(' ')); 528 } 529 }, 530 active: portfolio.logger 531 } // console_ 532 533 return this; 534} // $.fn.portfolio 535 536// TODO 537// handle keyboard shortcuts in a smart way when multiple galleries are used 538 539})(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.