1//DECLARE SOME STUFF 2var $window; // cache the window 3var $galcontainer; // cache gallery container 4//var $galoutline; // cache gallery outline 5var $gallery; // cache gallery 6var $boxes; // cache boxes that hold images 7var $galimgs; // cache gallery images 8var $controls; // cache controls 9var $loader; // cache loader 10var $nextbtn; 11var $prevbtn; 12var divH; 13var divW; 14 15$(function(){ 16 17 /* HOME GALLERY INIT ---------------------------------------------------------------*/ 18 19 $window = $(window); // cache the window 20 $galcontainer = $('#homegalcontainer'); // cache the gallery container 21 //$galoutline = $('#homeoutline'); // cache the outline 22 $gallery = $('#homegallery'); // cache gallery for cycle plugin 23 $controls = $('#controls'); // pointer to controls 24 $loader = $('#homegalloading'); // pointer to loader 25 $overbtns = $('#overbtns'); 26 $nextbtn = $('#overbtns #nextBtn'); //$('#nextBtn) 27 $prevbtn = $('#overbtns #prevBtn'); //$('#prevBtn) 28 29 var fx = 'fade'; // transition between images - can be fade(see bg), fadeOut(no bg), scrollHoriz, scrollVert 30 var timeout = 5000; // Time between images for autoplay 31 var speed = 1000; // speed of transition 32 var imagesloaded = 0; // Count for the number of images loaded 33 var playing = false; // If slideshow is playing 34 var logBool = false; // Bool for logging 35 36 var index = 0; // Image to show first 37 var preloadAmount = 2; // Number of images change to original image with lazy load 38 var counter = 1; 39 40 41 /*INIT THE GALLERY ---------------------------------------------------------------*/ 42 initGallery = function() { 43 44 //$gallery.hide(); // hide gallery and controls to start 45 $gallery.css("overflow", "hidden"); // set gallery to overflow hidden 46 47 $boxes = $('.home-img'); // cache boxes that hold image 48 $galimgs = $gallery.find('img'); // cache all images 49 50 // IMAGE POSITIONS 51 $boxes.css("position", "relative"); 52 $boxes.css("top", "0"); 53 $boxes.css("left", "0"); 54 55 // INIT EACH GALLERY IMAGE 56 $galimgs.each( function() { 57 //$(this).hide(); // hide to start 58 $(this).data( 'myNum', counter ); 59 //console.log("each img: "+counter); 60 counter++; 61 //totalImages++; 62 }); 63 64 //RESIZE IMAGES 65 //resizeGallery(); 66 67 //set src for first 2 images so they load 68 $galimgs.slice(0,preloadAmount).quickEach( function(){ 69 if ( this.attr("src") == "https://sayleslivingstondesign.com/wp-content/themes/sayles/img/emptygif.gif"){ 70 this.attr("src", this.attr("data-original")); 71 //console.log("setting src for: "+$this.attr('id')+" -- img: "+this.attr('src')); 72 } 73 }); 74 75 76 /* WAIT FOR IMAGES TO LOAD ----------------------------------------------*/ 77 $galimgs.slice(0,preloadAmount).waitForImages( function() { 78 //console.log("preload Images loaded"+$(this).data('myNum')); 79 imagesloaded++; 80 if(imagesloaded == preloadAmount){ 81 //call cycle plugin 82 //console.log("ok, now start plugin"); 83 runCycle(); 84 } 85 }); 86 87 };//end initGallery 88 89 /* RUN CYCLE --------------------------------------------------------------------*/ 90 runCycle = function(){ 91 92 //console.log("run cycle: "+$gallery); 93 94 $gallery.cycle({ 95 fx: fx, 96 speed: speed, 97 timeout: timeout, 98 log: logBool, 99 slides: '.home-img', 100 startingSlide: index, 101 next: $nextbtn, 102 prev: $prevbtn, 103 pager: '#custom-pager' 104 //delay: 10000 //delay first image transition 105 106 });//.cycle('pause'); //autoplay OFF to start 107 playing = true; 108 //RESIZE IMAGES 109 resizeGallery(); 110 //now, show gallery and controls 111 $gallery.hide().fadeIn('slow'); 112 //hide loader 113 $loader.hide(); 114 115 //THEN SET SOURCES FOR REST OF IMAGES 116 /*$galimgs.quickEach( function(){ 117 if ( this.attr("src") == "https://sayleslivingstondesign.com/wp-content/themes/sayles/img/emptygif.gif"){ 118 this.attr("src", this.attr("data-original")); 119 //console.log("setting src for: "+t.attr('id')+" --img: "+this.attr('src')); 120 } 121 }); */ 122 123 }; 124 125 126 /* ON INIT -----------------------------------------------------------------------*/ 127 /*$gallery.on( 'cycle-post-initialize', function( event, opts ) {
128 // set the imgDisplay 129 var displayStr = (opts.currSlide + 1) + ' of ' + opts.slideCount; 130 $controls.find('#imgDisplay').html(displayStr); 131 132 }); 133 */ 134 135 /* BEFORE EACH IMAGE TRANSITION --------------------------------------------------*/ 136 /*$gallery.on( 'cycle-before', function( event, opts ) { 137 var n = opts.nextSlide; 138 var c = opts.currSlide; 139 140 // set the imgDisplay 141 var displayStr = (n + 1) + ' of ' + opts.slideCount; 142 $controls.find('#imgDisplay').html(displayStr); 143 }); 144 */ 145 $gallery.on( 'cycle-before', function( event, opts, outgoing, incoming, forwardflag ) { 146 147 var boxes = $('.home-img'); 148 149 var n = opts.nextSlide; 150 var c = opts.currSlide; 151 152 var $h = $(incoming).find('img'); 153 var $n = $(incoming).next().find('img'); // next 154 var $p = $(incoming).prev().find('img'); // one before 155 156 //for first image, prev is last 157 if( $(incoming).index() == 1){ 158 $p = boxes.eq(opts.slideCount-1).find("img"); 159 } 160 //for last image next is first 161 if( $(incoming).index() == opts.slideCount){ 162 $n = boxes.eq(1).find("img"); 163 } 164 165 $galimgs.quickEach( function(){ 166 167 if(this.parent().attr('id') == $h.parent().attr('id')){ 168 //set src forward for THIS image 169 if($h.length > 0){ 170 if($h.attr("src") == "https://sayleslivingstondesign.com/wp-content/themes/sayles/img/emptygif.gif"){ 171 $h.attr("src",$h.attr("data-original")); 172 } 173 } 174 }else if(this.parent().attr('id') == $n.parent().attr('id')){ 175 //set src forward for NEXT image 176 if($n.length > 0){ 177 if($n.attr("src") == "https://sayleslivingstondesign.com/wp-content/themes/sayles/img/emptygif.gif"){ 178 $n.attr("src",$n.attr("data-original")); 179 } 180 } 181 }else if(this.parent().attr('id') == $p.parent().attr('id')){ 182 //set src forward for PREV image 183 if($p.length > 0){ 184 if($p.attr("src") == "https://sayleslivingstondesign.com/wp-content/themes/sayles/img/emptygif.gif"){ 185 $p.attr("src",$p.attr("data-original")); 186 } 187 } 188 }else{ 189 if(this.parent().attr('id') != undefined){ 190 if ( this.attr("src") != "https://sayleslivingstondesign.com/wp-content/themes/sayles/img/emptygif.gif"){ 191 this.attr("src", "https://sayleslivingstondesign.com/wp-content/themes/sayles/img/emptygif.gif"); 192 } 193 } 194 } 195 }); 196 197 }); 198 199 //ON AFTER 200 $gallery.on( 'cycle-after', function( event, opts, outgoing, incoming, forwardflag ) { 201 //set current slide back after transition is complete 202 $(outgoing).find('img').attr("src", "https://sayleslivingstondesign.com/wp-content/themes/sayles/img/emptygif.gif"); 203 }); 204 205 206 /* NEXT PREVIOUS - STOP AUTOPLAY ON CLICK ---------------------------------------*/ 207 /* 208 $nextbtn.on('click', function(){ 209 $gallery.cycle('pause'); 210 playing = false; 211 //$apBtn.css('background-position','0px -112px'); //not playing, back to arrow brown 212 }); 213 $prevbtn.on('click', function(){ 214 $gallery.cycle('pause'); 215 playing = false; 216 //$apBtn.css('background-position','0px -112px'); //not playing, back to arrow brown 217 }); 218 */ 219 /* TOUCH SWIPE -------------------------------------------------------------------*/ 220 //requires build of jquery mobile touch 221 //if(ISTOUCH){ 222 $overbtns.on("swiperight",function(event) { //PREV - IT'S BACKWARDS 223 //$gallery.cycle('pause'); 224 //playing = false; 225 //$apBtn.css('background-position','0px -112px'); //not playing, back to arrow brown 226 $gallery.cycle('prev'); 227 }); 228 $overbtns.on("swipeleft",function(event) { //NEXT 229 //$gallery.cycle('pause'); 230 //playing = false; 231 //$apBtn.css('background-position','0px -112px'); //not playing, back to arrow brown 232 $gallery.cycle('next'); 233 }); 234 //} 235 236 /* AUTOPLAY BUTTON ---------------------------------------------------------------*/ 237 /* 238 var $apBtn = $controls.find('#apBtn'); // get apBtn in a var 239 $apBtn.hover( function () { 240 if(playing){ 241 $(this).css('background-position','0px -56px'); // playing, show pause blue 242 }else{ 243 $(this).css('background-position','0px -168px'); //not playing, show arrow blue 244 } 245 }, function () { 246 if(playing){ 247 $(this).css('background-position','0px 0px'); //playing, back to pause brown 248 }else{ 249 $(this).css('background-position','0px -112px'); //not playing, back to arrow brown 250 } 251 }); 252 253 254 $apBtn.on('click', function(){ 255 if(playing){ 256 $(this).css('background-position','0px -112px'); //not playing, back to arrow brown 257 $gallery.cycle('pause'); 258 playing = false;
259 //$(this).text('slideshow off'); 260 }else{ 261 $(this).css('background-position','0px 0px'); //playing, back to pause brown 262 $gallery.cycle('resume'); 263 $gallery.cycle('next'); //move one now so we see something happen 264 playing = true; 265 //$(this).text('slideshow on'); 266 } 267 }); 268 */ 269 270 /* RESIZE IMAGES ON WINDOW RESIZE ---------------------------------------------------*/ 271 $window.resize(function(){ 272 //$window.smartresize(function(){ 273 resizeGallery(); 274 }); 275 276 277 /* RESIZE FUNCTION -----------------------------------------------------------------*/ 278 resizeGallery = function(){ 279 280 var innerwrapperW = $('#homegalwrapper').width(); 281 var windowH = $window.height(); 282 283 var imgW = 1200; //MAX IMG WIDTH 284 var imgH = 600; //MAX IMG HEIGHT 285 286 var marg = 0;//8; //DOUBLE MARGIN 287 288 //calculate divw & divh 289 divW = innerwrapperW - marg; 290 divH = ((divW * (imgH)) / (imgW)) | 0; 291 292 293 //test that image doesn't get larger than available width 294 var maxImgW = innerwrapperW - marg; 295 if(divW > maxImgW){ 296 divW = maxImgW; 297 divH = ((divW * imgH) / imgW) | 0; 298 } 299 300 //now check for out of bounds 301 //if image w/h is greater than max w or max h 302 if(divW > imgW){ 303 divW = imgW; 304 divH = ((divW * imgH) / imgW) | 0; 305 } 306 if(divH > imgH){ 307 divH = imgH; 308 divW = ((divH * imgW) / imgH) | 0; 309 } 310 311 312 CURRENTIMGH = divH; 313 314 //then container W = galW + 20; 315 var containerW = divW + marg; 316 var containerH = divH + marg; 317 318 $galcontainer.width(containerW+2).height(containerH+2); // whole container including border on outline 319 $gallery.width(divW).height(divH+15); //gallery container same size as images 320 $('#overbtns').width(divW).height(divH-20); //over buttons container same size as images 321 var npW = divW/2 | 0; 322 $('#overbtns #nextBtn, #overbtns #prevBtn').width(npW).height(divH-20); 323 324 $boxes.width(divW).height(divH); //divs that hold images same size as full gallery 325 326 //now loop through and set image sizes + center them 327 $galimgs.quickEach(function() { 328 329 calH = divH; 330 calW = (divH * this.attr('data-W')) / this.attr('data-H') | 0; 331 332 //for panos - recalculate 333 if(calW > divW){ 334 calW = divW; 335 calH = (calW * this.attr('data-H')) / this.attr('data-W') | 0; 336 } 337 if(this.width() != calW){ this.width(calW); } 338 if(this.height() != calH){ this.height(calH); } 339 340 //NOW CENTER HORIZ 341 if(calW < divW){ 342 margL = (((divW - calW) / 2) ) | 0; 343 this.css('marginLeft', margL); 344 } 345 //NOW CENTER VERTICALLY 346 if(calH < divH){ 347 margT = (((divH - calH) / 2) ) | 0; 348 this.css('marginTop', margT); 349 } 350 351 }); 352 }//end resize gallery function 353 354 355 356}); // END DOCUMENT READY 357 358 359 360 361
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.