1/** 2 * Slideshow function 3 * @version 2017.02.14 jln Ticket 353124, recheck image and resize in cse it was missed first time 4 */ 5 6var slideshow; 7 8function doSlideshow(slideid) { 9 //clear any previous information when the screen is opened 10 slideshow = null; 11 //unbind the control buttons 12 $('#slideshow_prev').unbind('click'); 13 $('#slideshow_next').unbind('click'); 14 $('#slideshow_play').unbind('click'); 15 $('#slideshow_pause').unbind('click'); 16 $('#slideshow_thumbnails_list').undelegate('img', 'click'); 17 $('#thumb_page_left').unbind('click'); 18 $('#thumb_page_right').unbind('click'); 19 20 //setup page layout 21 $('#slideshow_holder ul li').css({ 22 opacity: 0.3, 23 display: 'inline', 24 }); 25 $('#slideshow_holder ul li.current').removeClass('current'); 26 $('#slideshow_holder ul li:first') 27 .css({ opacity: 1 }) 28 .attr('first', 1) 29 .addClass('current'); 30 $('#slideshow_holder ul li:last').attr('last', 1); 31 $('#slideshow_pause').hide(); 32 $('#slideshow_thumbnails_list').css({ 33 width: $('#photopopup').innerWidth() - 60, 34 }); 35 $(window).on('resize.slideshow', function () { 36 slideshow.resize(); 37 }); 38 $('#slideshow_thumbnails').slideDown(); 39 40 //create slideshow and interfaces 41 slideshow = new (function () { 42 var slideTime = 5000; 43 var transTime = 400; 44 var fixed_left = 230; 45 var timer; 46 47 //advance to the next slide 48 this.next = function () { 49 //if the slide is the last slide, go back to the first 50 checkResize('next'); 51 if (1 == $('#slideshow_holder li.current').attr('last')) { 52 $('#slideshow_holder li.current').animate( 53 { opacity: 0.3 }, 54 transTime, 55 'swing', 56 function () { 57 /*callback*/ 58 }, 59 ); 60 $('#slideshow_holder ul').animate( 61 { left: fixed_left }, 62 transTime, 63 'swing', 64 function () { 65 /*callback */ 66 }, 67 ); 68 $('#slideshow_holder li:first').animate( 69 { opacity: 1 }, 70 transTime, 71 'swing', 72 function () { 73 /*callback*/ 74 }, 75 ); 76 $('#slideshow_holder li.current').removeClass('current'); 77 $('#slideshow_holder li:first').addClass('current'); 78 } 79 //for any other slide, go to the next 80 else { 81 $('#slideshow_holder li.current').animate( 82 { opacity: 0.3 }, 83 transTime, 84 'swing', 85 function () { 86 /*callback*/ 87 }, 88 ); 89 $('#slideshow_holder ul').animate( 90 { 91 left: 92 fixed_left - 93 $('#slideshow_holder li.current').next().position().left, 94 }, 95 transTime, 96 'swing', 97 function () { 98 /*callback */ 99 }, 100 ); 101 $('#slideshow_holder li.current') 102 .next() 103 .animate({ opacity: 1 }, transTime, 'swing', function () { 104 /*callback*/ 105 }); 106 $('#slideshow_holder li.current') 107 .removeClass('current') 108 .next() 109 .addClass('current'); 110 } 111 }; 112 113 this.previous = function () { 114 //if the slide is the first one, do nothing 115 if (1 == $('#slideshow_holder li.current').attr('first')) { 116 /* empty */ 117 } 118 //for any other slide, go to the previous 119 else { 120 checkResize('prev'); 121 $('#slideshow_holder li.current').animate( 122 { opacity: 0.3 }, 123 transTime, 124 'swing', 125 function () { 126 /*callback*/ 127 }, 128 ); 129 $('#slideshow_holder ul').animate( 130 { 131 left: 132 fixed_left - 133 $('#slideshow_holder li.current').prev().position().left, 134 }, 135 transTime, 136 'swing', 137 function () { 138 /*callback */ 139 }, 140 ); 141 $('#slideshow_holder li.current') 142 .prev() 143 .animate({ opacity: 1 }, transTime, 'swing', function () { 144 /*callback*/ 145 }); 146 $('#slideshow_holder li.current') 147 .removeClass('current') 148 .prev() 149 .addClass('current'); 150 } 151 }; 152 153 this.start = function () { 154 $('#slideshow_play').hide(); 155 $('#slideshow_pause').show(); 156 timer = setTimeout(function () { 157 slideshow.next(); 158 slideshow.start(); 159 }, slideTime); 160 }; 161 162 this.stop = function () { 163 clearTimeout(timer); 164 $('#slideshow_pause').hide(); 165 $('#slideshow_play').show(); 166 }; 167 168 this.slideTo = function (slideid) { 169 if ( 170 $('#slideshow_holder li.current').attr('id') != 171 $('#slideshow_holder li#image' + slideid).attr('id') 172 ) { 173 checkResize(slideid); 174 $('#slideshow_holder li.current') 175 .animate({ opacity: 0.3 }, transTime, function () { 176 /*callback*/ 177 }) 178 .removeClass('current'); 179 $('#slideshow_holder ul').animate( 180 { 181 left: 182 fixed_left - 183 $('#slideshow_holder li#image' + slideid).position().left, 184 }, 185 transTime, 186 function () { 187 /*callback */ 188 }, 189 ); 190 $('#slideshow_holder li#image' + slideid) 191 .animate({ opacity: 1 }, transTime, function () { 192 /*callback*/ 193 }) 194 .addClass('current'); 195 } 196 }; 197 198 this.reset = function () { 199 slideshow.stop(); 200 slideshow.resize(); 201 $('#slideshow_holder li.current').css({ opacity: 0.3 }); 202 $('#slideshow_holder ul').css({ left: fixed_left }); 203 $('#slideshow_holder li:first').css({ opacity: 1 }); 204 $('#slideshow_holder li.current').removeClass('current'); 205 $('#slideshow_holder li:first').addClass('current'); 206 }; 207 208 this.resize = function () { 209 wh = $(window).innerHeight(); 210 ww = $(window).innerWidth(); 211 photopopup_width = ww * 0.9; 212 photopopup_height = wh * 0.9; 213 thumblist_width = photopopup_width - 60; 214 slideshow_display_width = photopopup_width - 20; 215 slideshow_display_height = photopopup_height - 122; 216 //resize the popup window 217 $('#photopopup').dialog('option', 'height', photopopup_height); 218 $('#photopopup').dialog('option', 'width', photopopup_width); 219 $('#photopopup').dialog('option', 'position', { 220 my: 'center', 221 at: 'center', 222 of: window, 223 }); 224 //resize the image viewer portion 225 $( 226 '#slideshow_header, #slideshow_holder, #slideshow_holder ul, #slideshow_holder ul li, #slideshow_holder ul li img', 227 ).css({ height: slideshow_display_height }); 228 $('#slideshow_holder').css({ width: slideshow_display_width }); 229 $('#slideshow_thumbnails_list').css({ width: thumblist_width }); 230 //if it is too small, shrink the controls, move them to the bottom, and remove the thumbnails 231 if (300 > slideshow_display_height) { 232 slideshow_display_height = photopopup_height - 48; 233 $('#slideshow_thumbnails').hide(); 234 $( 235 '#slideshow_holder, #slideshow_holder ul, #slideshow_holder ul li, #slideshow_holder ul li img', 236 ).css({ height: slideshow_display_height }); 237 $('#slideshow_holder').css({ top: 5 }); 238 $('#slideshow_header').css({ height: 30 }); 239 $('#slideshow_controls img').css({ height: 30, width: 30 }); 240 $('#slideshow_header').css({ top: photopopup_height - 72 }); 241 $('#slideshow_header').css({ left: photopopup_width / 2 - 55 }); 242 $('#slideshow_header').addClass('ui-corner-all'); 243 $('#slideshow_header').css({ width: 110 });
244 $('#slideshow_controls').css({ width: 100, left: 5 }); 245 $('#slideshow_holder ul').css({ left: 0 }); 246 fixed_left = 0; 247 } 248 //if it is too narrow, move the controls to the bottom 249 else if (1.3334 > (photopopup_width - 230) / slideshow_display_height) { 250 $('#slideshow_thumbnails').show(); 251 $('#slideshow_holder').css({ top: 80 }); 252 $('#slideshow_header').css({ height: 60 }); 253 $('#slideshow_controls img').css({ height: 60, width: 60 }); 254 $('#slideshow_header').css({ top: photopopup_height - 112 }); 255 $('#slideshow_header').css({ left: photopopup_width / 2 - 110 }); 256 $('#slideshow_header').addClass('ui-corner-all'); 257 $('#slideshow_holder ul').css({ left: 0 }); 258 $('#slideshow_header').css({ width: 220 }); 259 $('#slideshow_controls').css({ width: 200, left: 10 }); 260 fixed_left = 0; 261 } else { 262 $('#slideshow_thumbnails').show(); 263 $('#slideshow_holder').css({ top: 80 }); 264 $('#slideshow_controls img').css({ height: 60, width: 60 }); 265 $('#slideshow_header').removeClass('ui-corner-all'); 266 $('#slideshow_header').css({ top: 80 }); 267 $('#slideshow_header').css({ left: 10 }); 268 $('#slideshow_holder ul').css({ left: 230 }); 269 $('#slideshow_header').css({ width: 220 }); 270 $('#slideshow_controls').css({ width: 200, left: 10 }); 271 fixed_left = 230; 272 } 273 //make sure all images fit inside the display box 274 $('#slideshow_holder ul li img').each(function () { 275 //console.log('holder:'+slideshow_display_width+'; this:'+$(this).width()); 276 if (slideshow_display_width < $(this).width()) { 277 ratio = slideshow_display_width / $(this).width(); 278 $(this).css({ height: (slideshow_display_height - 10) * ratio }); 279 //$(this).child('img').css({'height':slideshow_display_height*ratio}); 280 } 281 }); 282 //reset the current slide 283 $('#slideshow_holder ul').animate( 284 { 285 left: fixed_left - $('#slideshow_holder li.current').position().left, 286 }, 287 0, 288 function () { 289 /*callback */ 290 }, 291 ); 292 }; 293 })(); 294 295 //bind the control buttons 296 $('#slideshow_prev').click(function () { 297 //alert('slideshow prev'); 298 slideshow.stop(); 299 slideshow.previous(); 300 }); 301 $('#slideshow_next').click(function () { 302 //alert('slideshow next'); 303 slideshow.stop(); 304 slideshow.next(); 305 }); 306 $('#slideshow_play').click(function () { 307 slideshow.start(); 308 }); 309 $('#slideshow_pause').click(function () { 310 slideshow.stop(); 311 }); 312 313 //setup thumbnail display 314 var thumblist = '<ul id="thumblist">'; 315 $('#slideshow_holder li').each(function (index) { 316 imageid = $(this).find('img').attr('imageid'); 317 imgurl = $(this).find('img').attr('src'); 318 thumblist += 319 '<li><img alt="Image ' + 320 imageid + 321 '" src="' + 322 imgurl + 323 '" imageid="' + 324 imageid + 325 '" style="height:60px;" /></li>'; 326 });
327 thumblist += '</ul>'; 328 $('#slideshow_thumbnails_list').html(thumblist); 329 $('#slideshow_thumbnails_list').delegate('img', 'click', function () { 330 slideshow.stop(); 331 slideshow.slideTo($(this).attr('imageid')); 332 }); 333 //setup thumbnail paging 334 $('#thumb_page_left').click(function () { 335 curr = $('#slideshow_thumbnails_list ul').position().left; 336 if (0 == curr) { 337 } //at first slide, don't need to move 338 else { 339 newleft = 340 curr + $('#slideshow_thumbnails_list').innerWidth() - 100 < 0 341 ? curr + $('#slideshow_thumbnails_list').innerWidth() - 100 342 : 0; 343 $( 344 $('#slideshow_thumbnails_list ul').animate({ left: newleft }), 345 500, 346 function () { 347 /* callback */ 348 }, 349 ); 350 } 351 }); 352 $('#thumb_page_right').click(function () { 353 //determine maximum shift 354 deltac = 355 $('#slideshow_thumbnails_list ul li:last').position().left + 356 $('#slideshow_thumbnails_list ul').position().left; 357 pageshift = $('#slideshow_thumbnails_list').innerWidth() - 100; 358 if (deltac < pageshift) //maxshift less than one page shift 359 { 360 } //do nothing 361 else { 362 newleft = $('#slideshow_thumbnails_list ul').position().left - pageshift; 363 $( 364 $('#slideshow_thumbnails_list ul').animate({ left: newleft }), 365 500, 366 function () { 367 /* callback */ 368 }, 369 ); 370 } 371 }); 372 373 slideshow.reset(); 374 /* @version 2017.03.13 jln Ticket 359869, remove this if - causing problems on some slideshows first image gray'd out, even in place, doesn't work anyway **/ 375 /*if (undefined != slideid) 376 { 377 slideshow.slideTo(slideid); 378 }*/ 379 380 /** @version 2017.03.06 jln Ticket 359869, add a delay before calling function **/ 381 setTimeout(function () { 382 checkResize('image1'); 383 }, 1000); 384 385 function checkResize(slide) { 386 var w = $('#slideshow_holder').width(); 387 var h = $('#slideshow_holder').height(); 388 if ('next' == slide) { 389 var ni = $('#slideshow_holder li.current').next().width(); 390 var iid = $('#slideshow_holder li.current').next().attr('id'); 391 } else if ('prev' == slide) { 392 var ni = $('#slideshow_holder li.current').prev().width(); 393 var iid = $('#slideshow_holder li.current').prev().attr('id'); 394 } else if ('image1' == slide) { 395 var ni = $('#image1').width(); 396 var iid = slide; 397 } else { 398 var ni = $('#slideshow_holder li#image' + slide).width(); 399 var iid = 'image' + slide; 400 } 401 402 if (w < ni) { 403 ratio = w / ni; 404 405 $('#' + iid + ' img').css({ height: (h - 10) * ratio }); 406 } 407 } 408}
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.