1/** 2 * Resize too large images 3 * (c) DavidIQ 2010-2020 4 * https://www.davidiq.com/ 5 **/ 6 7function ReIMG(altLabels, settings) { 8 const reimg = this; 9 10 reimg.AltLabels = altLabels; 11 reimg.Settings = settings; 12 13 reimg.ApplyResize = function () { 14 //Get the various images types within posts 15 const $postImages = $('img.postimage:not(dt.attach-image img.postimage)'), 16 $attachImages = (reimg.Settings.handleAttached) ? $('dt.attach-image img.postimage') : null, 17 imageSelector = ".ReIMG-Anchor"; 18 19 //Add ReIMG zooming to each non-attachment image 20 $postImages.each(function () { 21 reimg.AddZoom(this, false); 22 }); 23 24 //Add ReIMG zooming to each image attachment 25 if ($attachImages) { 26 $attachImages.each(function () { 27 reimg.AddZoom(this, true); 28 }); 29 } 30 31 //The plugin setup depending on which one is in use 32 switch (reimg.Settings.zoomMethod) { 33 case ZoomMethods.NewWindow: //Full sized image in new window 34 $(imageSelector).on('click', function (event) { 35 event.preventDefault(); 36 window.open($(this).attr("href")); 37 }); 38 break; 39 40 case ZoomMethods.Lightbox: //Use Image Lightbox plugin 41 const reimgAnchor = $(imageSelector).imageLightbox({ 42 quitOnDocClick: false, 43 selector: "class='ReIMG-Anchor'", 44 //Attachments are done via a PHP file so let's add that if we have any 45 allowedTypes: "png|jpg|jpeg|gif" + ($attachImages) ? "|" + reimg.Settings.phpExt : "", 46 onStart: function () { 47 reimg.OverlayShow(); 48 reimg.NavigationOn(reimgAnchor, 'a.ReIMG-Anchor'); 49 }, 50 onEnd: function () { 51 reimg.NavigationOff(); 52 reimg.ZoomMoreRemove(); 53 reimg.OverlayRemove(); 54 }, 55 onLoadStart: function () { 56 reimg.ZoomMoreRemove(); 57 reimg.Loading(); 58 }, 59 onLoadEnd: function () { 60 reimg.LoadingDone(); 61 setTimeout(() => reimg.ZoomMoreAdd("img.ReIMG-Anchor"), 400); 62 } 63 }); 64 65 break; 66 67 case ZoomMethods.ColorBox: //Use Colorbox plugin 68 const $window = $(window); 69 $(imageSelector).colorbox({ 70 current: reimg.AltLabels.Current, 71 previous: reimg.AltLabels.Previous, 72 next: reimg.AltLabels.Next, 73 close: reimg.AltLabels.Close, 74 xhrError: reimg.AltLabels.XhrError, 75 imgError: reimg.AltLabels.ImgError, 76 rel: 'gal', //Show as gallery 77 photo: true, 78 scalePhotos: true, 79 returnFocus: false, 80 maxWidth: $window.width(), 81 maxHeight: $window.height(), 82 onComplete: function () { 83 reimg.ZoomMoreRemove(); 84 reimg.ZoomMoreAdd("img.cboxPhoto"); 85 }, 86 onClosed: function () { 87 reimg.ZoomMoreRemove(); 88 } 89 }); 90 91 break; 92 93 case ZoomMethods.Magnific: //Use Magnific Popup plugin 94 $(imageSelector).magnificPopup({ 95 type: 'image', 96 verticalFit: true, 97 cursor: null, 98 gallery: { 99 enabled: true, 100 navigateByImgClick: true, 101 tPrev: reimg.AltLabels.PreviousTitle, 102 tNext: reimg.AltLabels.NextTitle, 103 tCounter: reimg.AltLabels.Counter, 104 tClose: reimg.AltLabels.CloseTitle 105 }, 106 callbacks: { 107 open: function () { 108 reimg.ZoomMoreRemove(); 109 reimg.ZoomMoreAdd('img.mfp-img'); 110 }, 111 close: function () { 112 reimg.ZoomMoreRemove(); 113 } 114 } 115 }); 116 117 break; 118 } 119 }; 120 121 reimg.AddZoom = function (image, attachment) { 122 let realWidth = 0, 123 realHeight = 0; 124 const t = new Image(); 125 126 if (attachment && $(image).parent().is("a")) { 127 t.src = $(image).parent().attr("href"); 128 } else { 129 t.src = $(image).attr("src"); 130 } 131 realWidth = (t.width) ? t.width : $(image).prop('naturalWi
131dth'); 132 realHeight = (t.height) ? t.height : $(image).prop('naturalHeight'); 133 134 //Check to see if real dimensions differ from current dimensions 135 if (reimg.Settings.reimgForAll || (realWidth !== $(image).width() || realHeight !== $(image).height())) { 136 const zoomText = reimg.AltLabels.ZoomIn.replace(/%1\$d/, realWidth).replace(/%2\$d/, realHeight), 137 anchorHtml = `<a href="${t.src}" data-reimgwidth="${realWidth}" data-reimgheight="${realHeight}" title="${zoomText}" class="ReIMG-Anchor"></a>`, 138 $reimgButton = $('<span class="ReIMG-ZoomIn"></span>'); 139 140 $reimgButton.wrap(anchorHtml); 141 $reimgButton.data('realWidth', realWidth); 142 $reimgButton.data('realHeight', realHeight); 143 $(image).before($reimgButton); 144 145 //Check if the parent is an anchor link first 146 if ($(image).parent().is("a")) { 147 const href = $(image).parent().attr("href"); 148 const $userlink = $(`<div class="ReIMG-UserLink"><a href="${href}" title="${reimg.AltLabels.UserLink}">${href}</a></div>`); 149 150 //Add original link to after the image 151 $(image).after($userlink); 152 //Update the parent's properties 153 $(image).parent().attr("href", t.src); 154 $(image).parent().data("reimgwidth", realWidth); 155 $(image).parent().data("reimgheight", realHeight); 156 $(image).parent().attr("title", zoomText); 157 $(image).parent().removeClass(); 158 $(image).parent().addClass("ReIMG-Anchor"); 159 } else { 160 $(image).wrap(anchorHtml); 161 } 162 if (!!$reimgButton) { 163 $(image).before($reimgButton); 164 } 165 } 166 }; 167 168 reimg.Loading = function () { 169 $('<div id="ReIMG-Loading"><div></div></div>').appendTo('body'); 170 }; 171 172 reimg.LoadingDone = function () { 173 $('#ReIMG-Loading').remove(); 174 $('.imagelightbox-arrow').css('display', 'block'); 175 }; 176 177 reimg.NavigationOn = function (instance, selector) { 178 $(`<button type="button" id="imagelightbox-close" title="${reimg.AltLabels.Close}"></button>`).appendTo('body').on('click touchend', function () { 179 $(this).remove(); 180 instance.quitImageLightbox(); 181 return false; 182 }); 183 184 const $arrows = $('<button type="button" class="imagelightbox-arrow imagelightbox-arrow-left"></button><button type="button" class="imagelightbox-arrow imagelightbox-arrow-right"></button>'); 185 186 $arrows.appendTo('body'); 187 188 $arrows.on('click touchend', function (e) { 189 e.preventDefault(); 190 191 const $this = $(this), 192 $target = $(selector + "[href='" + $('img.ReIMG-Anchor').attr("src") + "']") 193 let index = $target.index(selector); 194 195 if ($this.hasClass('imagelightbox-arrow-left')) { 196 index = index - 1; 197 if (!$(selector).eq(index).length) 198 index = $(selector).length; 199 } else { 200 index = index + 1; 201 if (!$(selector).eq(index).length) 202 index = 0; 203 } 204 205 instance.switchImageLightbox(index); 206 return false; 207 }); 208 }; 209 210 reimg.NavigationOff = function () { 211 $('#imagelightbox-close').remove(); 212 $('.imagelightbox-arrow').remove(); 213 }; 214 215 reimg.OverlayShow = function () { 216 $('<div id="ReIMG-Overlay"></div>').appendTo('body'); 217 }; 218 219 reimg.OverlayRemove = function () { 220 $('#ReIMG-Overlay').remove(); 221 }; 222 223 reimg.ZoomMoreAdd = function (imageselector) { 224 const $image = $(imageselector), 225 $imgAnchor = $("a.ReIMG-Anchor[href='" + $image.attr("src") + "']"), 226 reimgheight = parseInt($imgAnchor.data("reimgheight")), 227 reimgwidth = parseInt($imgAnchor.data("reimgwidth")), 228 positionleft = $image.css('left'), 229 $reimgClicked = $('<div/>', {id: 'ReIMG-Clicked'}); 230 231 let $addContainer = (element) => $('#ReIMG-Overlay').after(element), 232 positiontop = $image.css('top'); 233 234 switch (reimg.Settings.zoomMethod) { 235 case ZoomMethods.ColorBox: 236 $addContainer = (element) => $('#cboxLoadedContent').before(element); 237 break; 238 239 case ZoomMethods.Magnific: 240 positiontop = $('.mfp-close').height(); 241 $addContainer = (element) => $('img.mfp-img').before(element); 242 break; 243 } 244 245 if (!!$addContainer && $image.width() < reimgwidth || $image.height() < reimgheight) { 246 //Grab the image that was enlarged 247 const $zoomMoreButton = $(`<a id="ReIMG-ZoomMore" class="ReIMG-ZoomMore" href="${$image.attr("src")}"><span class="ReIMG-ZoomIn ReIMG-ZoomMore"></span></a>`); 248 249 $zoomMoreButton.data('reimgheight', reimgheight); 250 $zoomMoreButton.data('reimgwidth', reimgwidth);
251 $zoomMoreButton.data('reimgtop', positiontop); 252 $zoomMoreButton.data('reimgleft', positionleft); 253 254 $zoomMoreButton.on('click', function (event) { 255 reimg.ZoomMoreClick(event, this); 256 event.preventDefault(); 257 event.stopPropagation(); 258 }); 259 260 $zoomMoreButton.appendTo($reimgClicked); 261 } 262 263 if (!!$addContainer) { 264 $reimgClicked.css({ 265 'width': $image.css('width'), 266 'height': $image.css('height'), 267 'top': positiontop, 268 'left': positionleft 269 }); 270 271 $reimgClicked.data('origwidth', $image.css('width')); 272 $reimgClicked.data('origheight', $image.css('height')); 273 274 if (reimg.Settings.zoomMethod !== ZoomMethods.Magnific) { 275 $image.appendTo($reimgClicked); 276 } 277 278 $addContainer($reimgClicked); 279 } 280 }; 281 282 reimg.ZoomMoreRemove = function () { 283 $('#ReIMG-ZoomMore').remove(); 284 $('#ReIMG-Clicked').remove(); 285 }; 286 287 reimg.ZoomMoreClick = function (e, zoomButton) { 288 let imageIdentifier = '#ReIMG-Clicked img.ReIMG-Anchor', 289 reimgheight = '', 290 reimgwidth = '', 291 imgposition = reimg.Settings.zoomMethod === ZoomMethods.Magnific ? 'inherit' : 'fixed', 292 reimgleft = '0px', 293 reimgtop = '0px'; 294 295 const $zoomBtn = $(zoomButton), 296 $zoomImg = $zoomBtn.find('span'), 297 $reimgClicked = $('#ReIMG-Clicked'); 298 299 switch (reimg.Settings.zoomMethod) { 300 case ZoomMethods.ColorBox: 301 imageIdentifier = 'img.cboxPhoto'; 302 reimgheight = parseInt($zoomBtn.data("reimgheight")); 303 reimgwidth = parseInt($zoomBtn.data("reimgwidth")); 304 break; 305 306 case ZoomMethods.Magnific: 307 imageIdentifier = 'img.mfp-img'; 308 break; 309 } 310 311 const $image = $(imageIdentifier); 312 313 if ($zoomImg.hasClass('ReIMG-ZoomOut')) { 314 $zoomImg.removeClass('ReIMG-ZoomOut'); 315 reimgleft = $zoomBtn.data('reimgleft'); 316 reimgtop = $zoomBtn.data('reimgtop'); 317 reimgwidth = $reimgClicked.data('origwidth'); 318 reimgheight = $reimgClicked.data('origheight'); 319 $reimgClicked.css({ 320 'width': reimgwidth, 321 'left': $zoomBtn.data('reimgleft') 322 }); 323 $zoomBtn.css({ 324 'left': $zoomBtn.data('reimgleft') 325 }); 326 } else { 327 if (reimg.Settings.zoomMethod === ZoomMethods.Magnific) { 328 reimgtop = $zoomBtn.data('reimgtop'); 329 reimgleft = $zoomBtn.data('reimgleft'); 330 } else if ([ZoomMethods.ColorBox, ZoomMethods.Magnific].indexOf(reimg.Settings.zoomMethod) < 0) { 331 //Let's make the image panel a little wider 332 const naturalWidth = $image[0].naturalWidth, 333 screenWidth = $(window).width(); 334 335 let newWidth = 0, 336 screenOffset = 400; 337
338 if (naturalWidth - screenOffset >= screenWidth) { 339 newWidth = screenWidth - screenOffset; 340 } else if (naturalWidth - screenOffset < screenWidth - screenOffset) { 341 newWidth = naturalWidth; 342 } else { 343 newWidth = naturalWidth - screenOffset; 344 } 345 $reimgClicked.width(newWidth); 346 //Figure out left position 347 const newLeft = (screenWidth - newWidth) / 2; 348 $reimgClicked.css({ 349 'left': newLeft 350 }); 351 $zoomBtn.css({ 352 'left': newLeft 353 }); 354 imgposition = 'absolute'; 355 } 356 $zoomImg.addClass('ReIMG-ZoomOut'); 357 } 358 359 $image.css({ 360 'width': reimgwidth, 361 'height': reimgheight, 362 'left': reimgleft, 363 'top': reimgtop, 364 'position': imgposition 365 }); 366 }; 367 368 $(window).on('resize', () => { 369 const $img = $('img.ReIMG-Anchor'); 370 if (!!$img && $img.length > 0) { 371 $('a.ReIMG-ZoomMore').css({ 372 'left': $img.css('left'), 373 'top': $img.css('top') 374 }); 375 } 376 }); 377 378 const ZoomMethods = { 379 NewWindow: '_blank', 380 Lightbox: '_imglightbox', 381 ColorBox: '_colorbox', 382 Magnific: '_magnific' 383 } 384}
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.