Mercurial > hg > orthanc
annotate OrthancServer/OrthancExplorer/libs/slimbox2.js @ 5104:ea3224848d05
merge
| author | Alain Mazy <am@osimis.io> |
|---|---|
| date | Thu, 27 Oct 2022 12:57:29 +0200 |
| parents | d25f4c0fa160 |
| children |
| rev | line source |
|---|---|
| 0 | 1 /*! |
| 2 Slimbox v2.04 - The ultimate lightweight Lightbox clone for jQuery | |
| 3 (c) 2007-2010 Christophe Beyls <http://www.digitalia.be> | |
| 4 MIT-style license. | |
| 5 */ | |
| 6 | |
| 7 (function($) { | |
| 8 | |
| 9 // Global variables, accessible to Slimbox only | |
| 10 var win = $(window), options, images, activeImage = -1, activeURL, prevImage, nextImage, compatibleOverlay, middle, centerWidth, centerHeight, | |
| 11 ie6 = !window.XMLHttpRequest, hiddenElements = [], documentElement = document.documentElement, | |
| 12 | |
| 13 // Preload images | |
| 14 preload = {}, preloadPrev = new Image(), preloadNext = new Image(), | |
| 15 | |
| 16 // DOM elements | |
| 17 overlay, center, image, sizer, prevLink, nextLink, bottomContainer, bottom, caption, number; | |
| 18 | |
| 19 /* | |
| 20 Initialization | |
| 21 */ | |
| 22 | |
| 23 $(function() { | |
| 24 // Append the Slimbox HTML code at the bottom of the document | |
| 25 $("body").append( | |
| 26 $([ | |
| 27 overlay = $('<div id="lbOverlay" />')[0], | |
| 28 center = $('<div id="lbCenter" />')[0], | |
| 29 bottomContainer = $('<div id="lbBottomContainer" />')[0] | |
| 30 ]).css("display", "none") | |
| 31 ); | |
| 32 | |
| 33 image = $('<div id="lbImage" />').appendTo(center).append( | |
| 34 sizer = $('<div style="position: relative;" />').append([ | |
| 35 prevLink = $('<a id="lbPrevLink" href="#" />').click(previous)[0], | |
| 36 nextLink = $('<a id="lbNextLink" href="#" />').click(next)[0] | |
| 37 ])[0] | |
| 38 )[0]; | |
| 39 | |
| 40 bottom = $('<div id="lbBottom" />').appendTo(bottomContainer).append([ | |
| 41 $('<a id="lbCloseLink" href="#" />').add(overlay).click(close)[0], | |
| 42 caption = $('<div id="lbCaption" />')[0], | |
| 43 number = $('<div id="lbNumber" />')[0], | |
| 44 $('<div style="clear: both;" />')[0] | |
| 45 ])[0]; | |
| 46 }); | |
| 47 | |
| 48 | |
| 49 /* | |
| 50 API | |
| 51 */ | |
| 52 | |
| 53 // Open Slimbox with the specified parameters | |
| 54 $.slimbox = function(_images, startImage, _options) { | |
| 55 options = $.extend({ | |
|
3973
d86bddb50972
fix spelling errors according to debian
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
57
diff
changeset
|
56 loop: false, // Allows one to navigate between first and last images |
| 0 | 57 overlayOpacity: 0.8, // 1 is opaque, 0 is completely transparent (change the color in the CSS file) |
| 58 overlayFadeDuration: 400, // Duration of the overlay fade-in and fade-out animations (in milliseconds) | |
| 59 resizeDuration: 400, // Duration of each of the box resize animations (in milliseconds) | |
| 60 resizeEasing: "swing", // "swing" is jQuery's default easing | |
| 61 initialWidth: 250, // Initial width of the box (in pixels) | |
| 62 initialHeight: 250, // Initial height of the box (in pixels) | |
| 63 imageFadeDuration: 400, // Duration of the image fade-in animation (in milliseconds) | |
| 64 captionAnimationDuration: 400, // Duration of the caption animation (in milliseconds) | |
| 65 counterText: "Image {x} of {y}", // Translate or change as you wish, or set it to false to disable counter text for image groups | |
| 66 closeKeys: [27, 88, 67], // Array of keycodes to close Slimbox, default: Esc (27), 'x' (88), 'c' (67) | |
| 67 previousKeys: [37, 80], // Array of keycodes to navigate to the previous image, default: Left arrow (37), 'p' (80) | |
| 68 nextKeys: [39, 78] // Array of keycodes to navigate to the next image, default: Right arrow (39), 'n' (78) | |
| 69 }, _options); | |
| 70 | |
| 71 // The function is called for a single image, with URL and Title as first two arguments | |
| 72 if (typeof _images == "string") { | |
| 73 _images = [[_images, startImage]]; | |
| 74 startImage = 0; | |
| 75 } | |
| 76 | |
| 77 middle = win.scrollTop() + (win.height() / 2); | |
| 78 centerWidth = options.initialWidth; | |
| 79 centerHeight = options.initialHeight; | |
| 80 $(center).css({top: Math.max(0, middle - (centerHeight / 2)), width: centerWidth, height: centerHeight, marginLeft: -centerWidth/2}).show(); | |
| 81 compatibleOverlay = ie6 || (overlay.currentStyle && (overlay.currentStyle.position != "fixed")); | |
| 82 if (compatibleOverlay) overlay.style.position = "absolute"; | |
| 83 $(overlay).css("opacity", options.overlayOpacity).fadeIn(options.overlayFadeDuration); | |
| 84 position(); | |
| 85 setup(1); | |
| 86 | |
| 87 images = _images; | |
| 88 options.loop = options.loop && (images.length > 1); | |
| 89 return changeImage(startImage); | |
| 90 }; | |
| 91 | |
| 92 /* | |
| 93 options: Optional options object, see jQuery.slimbox() | |
| 94 linkMapper: Optional function taking a link DOM element and an index as arguments and returning an array containing 2 elements: | |
| 95 the image URL and the image caption (may contain HTML) | |
| 96 linksFilter: Optional function taking a link DOM element and an index as arguments and returning true if the element is part of | |
| 97 the image collection that will be shown on click, false if not. "this" refers to the element that was clicked. | |
| 98 This function must always return true when the DOM element argument is "this". | |
| 99 */ | |
| 100 $.fn.slimbox = function(_options, linkMapper, linksFilter) { | |
| 101 linkMapper = linkMapper || function(el) { | |
| 102 return [el.href, el.title]; | |
| 103 }; | |
| 104 | |
| 105 linksFilter = linksFilter || function() { | |
| 106 return true; | |
| 107 }; | |
| 108 | |
| 109 var links = this; | |
| 110 | |
| 111 return links.unbind("click").click(function() { | |
| 112 // Build the list of images that will be displayed | |
| 113 var link = this, startIndex = 0, filteredLinks, i = 0, length; | |
| 114 filteredLinks = $.grep(links, function(el, i) { | |
| 115 return linksFilter.call(link, el, i); | |
| 116 }); | |
| 117 | |
| 118 // We cannot use jQuery.map() because it flattens the returned array | |
| 119 for (length = filteredLinks.length; i < length; ++i) { | |
| 120 if (filteredLinks[i] == link) startIndex = i; | |
| 121 filteredLinks[i] = linkMapper(filteredLinks[i], i); | |
| 122 } | |
| 123 | |
| 124 return $.slimbox(filteredLinks, startIndex, _options); | |
| 125 }); | |
| 126 }; | |
| 127 | |
| 128 | |
| 129 /* | |
| 130 Internal functions | |
| 131 */ | |
| 132 | |
| 133 function position() { | |
| 134 var l = win.scrollLeft(), w = win.width(); | |
| 135 $([center, bottomContainer]).css("left", l + (w / 2)); | |
| 136 if (compatibleOverlay) $(overlay).css({left: l, top: win.scrollTop(), width: w, height: win.height()}); | |
| 137 } | |
| 138 | |
| 139 function setup(open) { | |
| 140 if (open) { | |
| 141 $("object").add(ie6 ? "select" : "embed").each(function(index, el) { | |
| 142 hiddenElements[index] = [el, el.style.visibility]; | |
| 143 el.style.visibility = "hidden"; | |
| 144 }); | |
| 145 } else { | |
| 146 $.each(hiddenElements, function(index, el) { | |
| 147 el[0].style.visibility = el[1]; | |
| 148 }); | |
| 149 hiddenElements = []; | |
| 150 } | |
| 151 var fn = open ? "bind" : "unbind"; | |
| 152 win[fn]("scroll resize", position); | |
| 153 $(document)[fn]("keydown", keyDown); | |
| 154 } | |
| 155 | |
| 156 function keyDown(event) { | |
| 157 var code = event.keyCode, fn = $.inArray; | |
| 158 // Prevent default keyboard action (like navigating inside the page) | |
| 159 return (fn(code, options.closeKeys) >= 0) ? close() | |
| 160 : (fn(code, options.nextKeys) >= 0) ? next() | |
| 161 : (fn(code, options.previousKeys) >= 0) ? previous() | |
| 162 : false; | |
| 163 } | |
| 164 | |
| 165 function previous() { | |
| 166 return changeImage(prevImage); | |
| 167 } | |
| 168 | |
| 169 function next() { | |
| 170 return changeImage(nextImage); | |
| 171 } | |
| 172 | |
| 173 function changeImage(imageIndex) { | |
| 174 if (imageIndex >= 0) { | |
| 175 activeImage = imageIndex; | |
| 176 activeURL = images[activeImage][0]; | |
| 177 prevImage = (activeImage || (options.loop ? images.length : 0)) - 1; | |
| 178 nextImage = ((activeImage + 1) % images.length) || (options.loop ? 0 : -1); | |
| 179 | |
| 180 stop(); | |
| 181 center.className = "lbLoading"; | |
| 182 | |
| 183 preload = new Image(); | |
| 184 preload.onload = animateBox; | |
| 185 preload.src = activeURL; | |
| 186 } | |
| 187 | |
| 188 return false; | |
| 189 } | |
| 190 | |
| 191 function animateBox() { | |
| 192 center.className = ""; | |
| 193 $(image).css({backgroundImage: "url(" + activeURL + ")", visibility: "hidden", display: "" }); | |
| 194 $(sizer).width(preload.width); | |
| 195 $([sizer, prevLink, nextLink]).height(preload.height); | |
| 196 | |
| 197 $(caption).html(images[activeImage][1] || ""); | |
| 198 $(number).html((((images.length > 1) && options.counterText) || "").replace(/{x}/, activeImage + 1).replace(/{y}/, images.length)); | |
| 199 | |
| 200 if (prevImage >= 0) preloadPrev.src = images[prevImage][0]; | |
| 201 if (nextImage >= 0) preloadNext.src = images[nextImage][0]; | |
| 202 | |
| 203 centerWidth = image.offsetWidth; | |
| 204 centerHeight = image.offsetHeight; | |
| 205 var top = Math.max(0, middle - (centerHeight / 2)); | |
| 206 if (center.offsetHeight != centerHeight) { | |
| 207 $(center).animate({height: centerHeight, top: top}, options.resizeDuration, options.resizeEasing); | |
| 208 } | |
| 209 if (center.offsetWidth != centerWidth) { | |
| 210 $(center).animate({width: centerWidth, marginLeft: -centerWidth/2}, options.resizeDuration, options.resizeEasing); | |
| 211 } | |
| 212 $(center).queue(function() { | |
| 213 $(bottomContainer).css({width: centerWidth, top: top + centerHeight, marginLeft: -centerWidth/2, visibility: "hidden", display: ""}); | |
| 214 animateCaption(); | |
| 215 $(image).css({display: "none", visibility: "", opacity: ""}).fadeIn(options.imageFadeDuration, animateCaption); | |
| 216 }); | |
| 217 } | |
| 218 | |
| 219 function animateCaption() { | |
| 220 if (prevImage >= 0) $(prevLink).show(); | |
| 221 if (nextImage >= 0) $(nextLink).show(); | |
| 222 $(bottom).css("marginTop", -bottom.offsetHeight).animate({marginTop: 0}, options.captionAnimationDuration); | |
| 223 bottomContainer.style.visibility = ""; | |
| 224 } | |
| 225 | |
| 226 function stop() { | |
| 227 preload.onload = null; | |
| 228 preload.src = preloadPrev.src = preloadNext.src = activeURL; | |
| 229 $([center, image, bottom]).stop(true); | |
| 230 $([prevLink, nextLink, image, bottomContainer]).hide(); | |
| 231 } | |
| 232 | |
| 233 function close() { | |
| 234 if (activeImage >= 0) { | |
| 235 stop(); | |
| 236 activeImage = prevImage = nextImage = -1; | |
| 237 $(center).hide(); | |
| 238 $(overlay).stop().fadeOut(options.overlayFadeDuration, setup); | |
| 239 } | |
| 240 | |
| 241 return false; | |
| 242 } | |
| 243 | |
|
3973
d86bddb50972
fix spelling errors according to debian
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
57
diff
changeset
|
244 })(jQuery); |