|
|
Line 1: |
Line 1: |
− | // <syntaxhighlight lang="javascript">
| |
| /* Any JavaScript here will be loaded for all users on every page load. */ | | /* Any JavaScript here will be loaded for all users on every page load. */ |
− | /**
| |
− | * @description modify MediaWiki:Sidebar
| |
− | * @param {string} action one of add, remove
| |
− | * @param {string} section name of the section in the sidebar
| |
− | * @param {string} name name of the link
| |
− | * @param {string} link URL of the link
| |
− | * @returns {unresolved}
| |
− | */
| |
| function ModifySidebar( action, section, name, link ) { | | function ModifySidebar( action, section, name, link ) { |
| try { | | try { |
Line 65: |
Line 56: |
| } | | } |
| | | |
− | /**
| |
− | * @description apply modification of the sidebar
| |
− | * @requires ModifySidebar()
| |
− | * @returns {undefined}
| |
− | */
| |
| function CustomizeModificationsOfSidebar() { | | function CustomizeModificationsOfSidebar() { |
| ModifySidebar("add", "toolbox", "Recent Changes", "//gfbio.biowikifarm.net/wiki/Special:RecentChanges"); | | ModifySidebar("add", "toolbox", "Recent Changes", "//gfbio.biowikifarm.net/wiki/Special:RecentChanges"); |
| } | | } |
| | | |
− | /**
| |
− | * @description Allows add-on scripts to add onload functions
| |
− | * @requires http://wiki.bayernflora.de/w/skins/common/wikibits.js
| |
− | */
| |
| addOnloadHook( CustomizeModificationsOfSidebar ); | | addOnloadHook( CustomizeModificationsOfSidebar ); |
| | | |
− | /**
| + | importScript('MediaWiki:FootnotePopup.js'); |
− | * @namespace resource string dictionary
| + | importScript('MediaWiki:ImageZoom.js'); |
− | *
| + | |
− | * Note: Commons uses collapse/expand ▲/▼, but this looks better in strict box
| + | |
− | * layouts that in the free-wrapping key statements
| + | |
− | *
| + | |
− | * Nomenclature proposal: if an extra plugin is used, strings can be designated as
| + | |
− | * “plugin_toolTipSomthing” otherwise just “toolTipSomthing” (global string). So it’s more clear if
| + | |
− | * somebody wants to deactivate a plugin and remove strings from the resource dictionary.
| + | |
− | * @requires MediaWiki:Jquery.zoomImage.js, MediaWiki:Common.css for #modal-fg, .iviewer_zoom_in, .iviewer_zoom_out, .iviewer_zoom_zero, .iviewer_zoom_fit
| + | |
− | * @requires jQuery
| + | |
− | * @augments $
| + | |
− | * @type object
| + | |
− | */
| + | |
− | $.jI18n = {
| + | |
− | en: {
| + | |
− | captionCollapse : " (show less) ",
| + | |
− | captionExpand : " (more...) ",
| + | |
− | expandAll : "Show all extras",
| + | |
− | iconCloseWindowHover : "http://upload.wikimedia.org/wikipedia/commons/d/d0/Close_icon_hover.jpg",
| + | |
− | iconCloseWindow : "http://upload.wikimedia.org/wikipedia/commons/8/87/Close_icon_default.jpg",
| + | |
− | iconOverview : "http://upload.wikimedia.org/wikipedia/commons/thumb/2/22/View-pause_Gion_simple.svg/20px-View-pause_Gion_simple.svg.png",
| + | |
− | iconResume : "http://upload.wikimedia.org/wikipedia/commons/thumb/4/49/View-playback_Gion_simple.svg/20px-View-playback_Gion_simple.svg.png",
| + | |
− | iconStart1st : "http://upload.wikimedia.org/wikipedia/commons/thumb/4/49/View-playback_Gion_simple.svg/20px-View-playback_Gion_simple.svg.png",
| + | |
− | iconStartNew : "http://upload.wikimedia.org/wikipedia/commons/thumb/0/05/View-refresh_Gion_simple.svg/20px-View-refresh_Gion_simple.svg.png",
| + | |
− | imageMetadataLink : "(Information about Creator, License and Copyright)",
| + | |
− | newWindow : "(New Window …)",
| + | |
− | toolTipClose : "Click to close",
| + | |
− | toolTipCollapse : "(click to hide information below)",
| + | |
− | toolTipExpand : "(click to show more information below)",
| + | |
− | toolTipImageZooming : "Images can be enlarged by clicking on it",
| + | |
− | toolTipNavigatePagetop : "Top of page",
| + | |
− | toolTipNewWindow : "(click to open content in a new window or tab)",
| + | |
− | toolTipFloatleft : "floating on the left side",
| + | |
− | toolTipFloatright: "floating on the right side",
| + | |
− | toolTipUnfloat: "back to default position",
| + | |
− | toolTipNoContentLoadable:"<i>No content could be loaded</i>",
| + | |
− | //toolTipHeadingLink: "Click to show (permanent) link to this headline", // MediaWiki:Gadget-HeadingLink
| + | |
− | //toolTipHeadingLinkHelp: "(1) Normal link to this head line or (2) the permanent link with version number:",// MediaWiki:Gadget-HeadingLink
| + | |
− | zoomNotPossible : "(This image can not be further enlarged)",
| + | |
− | // see MediaWiki:Jquery.zoomImage.js
| + | |
− | ZoomImage_iconMagnifier: "http://www.species-id.net/o/media/f/f7/Iviewer.zoom_in.gif",
| + | |
− | ZoomImage_iconMagnifierHover: "http://www.species-id.net/o/media/5/5c/Iviewer.zoom_out.gif",
| + | |
− | ZoomImage_iconLoader: "http://upload.wikimedia.org/wikipedia/commons/d/de/Ajax-loader.gif",
| + | |
− | ZoomImage_toolTipLoad : "(click to load largest available image; this may take considerable time to load)",
| + | |
− | ZoomImage_textZoomOrig: "Zooming facility"
| + | |
− | },
| + | |
− | de: {
| + | |
− | captionCollapse : " (weniger anzeigen) ",
| + | |
− | captionExpand : " (mehr...) ",
| + | |
− | expandAll : "Alle Zusatzinformationen zeigen",
| + | |
− | imageMetadataLink : "(Informationen zu Autor, Lizenz und Copyright)",
| + | |
− | newWindow : "(Neues Fenster …)",
| + | |
− | toolTipClose : "Zum Schließen klicken",
| + | |
− | toolTipCollapse : "(klicken um Zusatzinformationen zu verbergen)",
| + | |
− | toolTipExpand : "(klicken um Zusatzinformationen anzuzeigen)",
| + | |
− | //toolTipHeadingLink: "Klicken um (permanenten) Link dieser Überschrift anzuzeigen",// MediaWiki:Gadget-HeadingLink
| + | |
− | //toolTipHeadingLinkHelp: "(1) Link zu dieser Überschrift oder (2) Link mit Versionsnummer:",// MediaWiki:Gadget-HeadingLink
| + | |
− | toolTipImageZooming : "Bilder können durch Anklicken vergrößert betrachtet werden",
| + | |
− | toolTipNavigatePagetop : "Zum Seitenanfang",
| + | |
− | toolTipNewWindow : "(klicken um Inhalt in neuem Fenster oder Reiter zu öffnen)",
| + | |
− | toolTipFloatleft : "Links schwebend",
| + | |
− | toolTipFloatright: "Rechts schwebend",
| + | |
− | toolTipUnfloat: "Zurück zur Normalposition",
| + | |
− | toolTipNoContentLoadable:"<i>Leider konnte der Inhalt nicht geladen werden.</i>",
| + | |
− | zoomNotPossible : "(Dieses Bild kann nicht weiter vergrößert werden)",
| + | |
− | // see MediaWiki:zoomImage.js
| + | |
− | ZoomImage_toolTipLoad : "(klicken um Originalbild nachzuladen; bei großen Bildern kann dies u. U. langsam sein)",
| + | |
− | ZoomImage_textZoomOrig: "Vergrößerungsfunktion"
| + | |
− | },
| + | |
− | it: {
| + | |
− | captionCollapse : " (mostra di meno) ",
| + | |
− | captionExpand : " (più...) ",
| + | |
− | expandAll : "Mostra tutti informazione", //REVISE
| + | |
− | imageMetadataLink : "(Informazione sull'Autore, Licenza e Copyright)",
| + | |
− | toolTipClose : "Clicca per chiudere",
| + | |
− | toolTipImageZooming : "Le immagini possono essere ingrandite cliccandoci sopra",
| + | |
− | zoomNotPossible : "(Al momento non è possibilie ingrandire questa immagine)" // TODO translation see en version
| + | |
− | }
| + | |
− | };
| + | |
− | | + | |
− | /**
| + | |
− | * @description Get resource string (text, image URLs) for a given language, based on a string-key
| + | |
− | * If no resource is defined in a given language for a resource key, the resource for "en" will be returned,
| + | |
− | * if this is missing as well an error message.
| + | |
− | * @augments $
| + | |
− | * @requires mw.config for getting global variables
| + | |
− | * @param {string} resourceKey key for the resource
| + | |
− | * @returns {String}
| + | |
− | */
| + | |
− | $.resource = function (resourceKey) {
| + | |
− | var lang = mw.config.get('wgUserLanguage').split("-")[0]; // language: "pt-BR", "de-formal", etc.
| + | |
− | return ($.jI18n[lang] && $.jI18n[lang][resourceKey] ?
| + | |
− | $.jI18n[lang][resourceKey] :
| + | |
− | ($.jI18n.en[resourceKey]) ? $.jI18n.en[resourceKey] : "MISSING RESOURCE: no $.jI18n.en." + resourceKey + " defined.");
| + | |
− | };
| + | |
− | | + | |
− | /**
| + | |
− | * @descriptions: Create html string for link with image and/or text content
| + | |
− | * @param {string} txtResourceKey resource keys (multilingual {@link $.resource()}
| + | |
− | * @param {html} txtContent displayed content of a link
| + | |
− | * @param {url} href
| + | |
− | * @param {string} attributes string of combined other attributes of link element; must use ' as inner quotes, and \" inside event functions
| + | |
− | * @returns {@exp;txtResourceKey@pro;length|String|@exp;txtContent@pro;length@exp;txtResourceKey@pro;length}
| + | |
− | */
| + | |
− | $.linkBuilder = function (txtResourceKey, txtContent, href, attributes) {
| + | |
− | return (txtResourceKey.length ? "<a "
| + | |
− | + " href='" + href + "' "
| + | |
− | + " " + (attributes.length ? attributes : "") + ">"
| + | |
− | + $.resource(txtResourceKey)
| + | |
− | + "</a>" : (txtContent.length ? "<a "
| + | |
− | + " href='" + href + "' "
| + | |
− | + " " + (attributes.length ? attributes : "") + ">"
| + | |
− | + txtContent +
| + | |
− | "</a>" : "")
| + | |
− | );
| + | |
− | };
| + | |
− | /**
| + | |
− | * @description return a random integer
| + | |
− | * @param {integer} min
| + | |
− | * @param {integer} max
| + | |
− | * @returns {@exp;@call;parseInt}
| + | |
− | */
| + | |
− | $.random = function (min, max) { // NO CHECKS: if(min>max) {return -1;} if(min==max) {return min;}
| + | |
− | return (min + parseInt(Math.random() * (max - min + 1), 10));
| + | |
− | };
| + | |
− | | + | |
− | /**
| + | |
− | * @description Utility for Cluetip, Modal layer, Image Zoom:
| + | |
− | * Create appendable jquery object, fnAction = function bound to click.
| + | |
− | * NOTE All functions called within createButton() should return false
| + | |
− | * to prevent appending a # to the URL from clicking <a href='#'></a>
| + | |
− | * @param {string} kindOfButton type of button ('zoomImg', 'close')
| + | |
− | * @param {function} fnAction function to bind on that link
| + | |
− | * @returns {@exp;@exp;@call;$@pro;append@pro;h@call;over@call;@call;click|@exp;@call;$@pro;append@pro;h@call;over@call;@call;click}
| + | |
− | */
| + | |
− | function createButton(kindOfButton, fnAction) {
| + | |
− | switch (kindOfButton) {
| + | |
− | case "zoomImg":
| + | |
− | return $("<a href='#' title='"+$.resource('ZoomImage_toolTipLoad')+"' />")
| + | |
− | .append(
| + | |
− | "<img src='"+$.resource("ZoomImage_iconMagnifier")+"' align='middle' style='border:1px solid gray;'>" +
| + | |
− | '<span style="position:absolute;left:20px;top:0px;white-space:nowrap;">'+$.resource("ZoomImage_textZoomOrig")+'</span>'
| + | |
− | ) // text after img seems to be inline only with position:absolute
| + | |
− | .hover(
| + | |
− | function() { $(this).find("img:first").attr({src: $.resource("ZoomImage_iconMagnifierHover"), style :'border:1px solid black;'}); },
| + | |
− | function() { $(this).find("img:first").attr({src: $.resource("ZoomImage_iconMagnifier"), style :'border:1px solid gray;'}); })
| + | |
− | .click(fnAction);
| + | |
− | break;
| + | |
− | case "close":
| + | |
− | default:
| + | |
− | return $("<a href='#' title='"+$.resource('toolTipClose')+"'/>")
| + | |
− | .append("<img src='"+$.resource("iconCloseWindow")+"' />")
| + | |
− | .hover(
| + | |
− | function() { $(this).find("img:first").attr("src", $.resource("iconCloseWindowHover")); },
| + | |
− | function() { $(this).find("img:first").attr("src", $.resource("iconCloseWindow")); })
| + | |
− | .click(fnAction);
| + | |
− | }// end switch case
| + | |
− | }
| + | |
− | | + | |
− | ////////////////////////////////////
| + | |
− | // Modal Layer base functionality //
| + | |
− | ////////////////////////////////////
| + | |
− | // for program flow see [[MediaWiki:ModalLayer and image zoom docu]]
| + | |
− |
| + | |
− | /**
| + | |
− | * @description: Hide (= close) modal layer (Note: cyclical dependency with next method unavoidable)
| + | |
− | * @requires modalLayer_KeyDown()
| + | |
− | * @returns {Boolean}
| + | |
− | */
| + | |
− | function modalLayer_Hide() {
| + | |
− | $(document).unbind("keydown", modalLayer_KeyDown);
| + | |
− | $("#modal-fg").fadeOut(function() {
| + | |
− | $("#modal-bg").hide();
| + | |
− | $(this).empty().hide();
| + | |
− | });
| + | |
− | return false;
| + | |
− | }
| + | |
− |
| + | |
− | /**
| + | |
− | * @description: Close (hide) modal layer on escape, backspace and arrow left key
| + | |
− | * @requires modalLayer_Hide()
| + | |
− | * @param {event} e the keyboard event object
| + | |
− | * @returns {undefined}
| + | |
− | */
| + | |
− | function modalLayer_KeyDown(e) {
| + | |
− | if ((e.keyCode == 8) || (e.keyCode == 27) || (e.keyCode == 37)) { modalLayer_Hide(); }
| + | |
− | }
| + | |
− |
| + | |
− | /**
| + | |
− | * @description: Create modal layer and execute fnRender
| + | |
− | * @param {function} fnRender custom function to display something
| + | |
− | * @param {object} paramsObj generic parameters passed to "fnRender"
| + | |
− | * @returns {undefined}
| + | |
− | */
| + | |
− | function modalLayer_Create(fnRender, paramsObj) {
| + | |
− | // find existing or create background & layer
| + | |
− | var modalBG = $("#modal-bg"),
| + | |
− | modalFG = $("#modal-fg");
| + | |
− | if (modalBG.length === 0) { // first time init
| + | |
− | if (typeof(document.body.style.maxHeight) === "undefined") { // if IE 6
| + | |
− | $("body","html").css({height: "100%", width: "100%"});
| + | |
− | }
| + | |
− | // add styles (IE6 hack not possible as element style!)
| + | |
− | $("head").append("<style type=\"text/css\">#modal-bg {position:fixed; z-index:100; top:0px;left:0px; height:100%;width:100%; background:black; opacity:0.8; filter:alpha(opacity=80); display:none;}\n" +
| + | |
− | "#modal-fg {position:fixed; z-index:101; top:50%;left:50%; padding:3px; border:2px solid #E0E0E0; background-color:white; display:none;}\n" + // IE6 hack: add (very!) slow IE-CSS-expression only for IE < 7
| + | |
− | ($.browser.msie && $.browser.version < 7 ? "* html #modal-bg {position: absolute; height:expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');}\n* html #modal-fg {position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');}\n" : "") +
| + | |
− | "#modal-fg img {display:block;}\n</style>");
| + | |
− | modalBG = $("<div id='modal-bg'/>"); // #### in old code version: HEIGHT was changed to: $(document).height()-- necessary for some browsers??? Trying without!
| + | |
− | modalFG = $("<div id='modal-fg'/>");
| + | |
− | modalBG.click(function() { modalLayer_Hide(); });
| + | |
− | $("body").append(modalBG).append(modalFG);
| + | |
− | } // END first time init
| + | |
− | $(document).keydown(modalLayer_KeyDown);
| + | |
− | // generic view port functionality: close icon and background click
| + | |
− | modalFG
| + | |
− | .append( $('<div style="position:absolute;right:4px;"/>')
| + | |
− | .append(createButton("close", modalLayer_Hide)) );
| + | |
− | modalBG
| + | |
− | .append('<img src="' + $.resource('ZoomImage_iconLoader') + '" id="loaderIcon" style="position:absolute;top:50%;left:50%;"/>')
| + | |
− | .show();
| + | |
− | fnRender(paramsObj); // Execute custom logic, example: modalLayer_ZoomImage
| + | |
− | }
| + | |
− |
| + | |
− | /**
| + | |
− | * @description Show modal layer based on a image
| + | |
− | *
| + | |
− | * @requires createButton()
| + | |
− | * @requires modalLayer_InitShowIviewerZoomImage()
| + | |
− | * @requires modalLayer_Hide()
| + | |
− | * @requires $.resource()
| + | |
− | *
| + | |
− | * @param {object} newImg new image object
| + | |
− | * @param {object} oriImg original image object
| + | |
− | * @returns {undefined}
| + | |
− | */
| + | |
− | function modalLayer_ShowImage(newImg, oriImg) {
| + | |
− | var title = oriImg.title,
| + | |
− | imgWidth = newImg.width,
| + | |
− | imgHeight = newImg.height,
| + | |
− | modalBG = $("#modal-bg"),
| + | |
− | modalFG = $("#modal-fg");
| + | |
− |
| + | |
− | modalBG.find("#loaderIcon").remove();
| + | |
− |
| + | |
− | if (imgWidth===0) { // Only IE, only if newImg = oriImg.clone(): cloned image in IE has no width
| + | |
− | imgWidth = oriImg.width;
| + | |
− | imgHeight = oriImg.height;
| + | |
− | }
| + | |
− | // extend height of modal layer for no-zoom msg
| + | |
− | var zoomIsPossible = (imgWidth !== oriImg.width),
| + | |
− | layerHeight = imgHeight + 105 + ((!zoomIsPossible) ? 60 : 0),
| + | |
− | layerWidth = Math.max(300, imgWidth + 70); // reserve minimal text width
| + | |
− | // delete alt text & add click function to hide modal
| + | |
− | $(newImg).removeAttr("alt")
| + | |
− | .attr("title", title.replace($.resource("toolTipImageZooming"),$.resource("toolTipClose")))
| + | |
− | .click( function() {modalLayer_Hide();});
| + | |
− |
| + | |
− | modalFG
| + | |
− | .css({width: layerWidth + "px", height: layerHeight + "px", "margin-left": -(layerWidth/2)})
| + | |
− | .append( zoomIsPossible ? $('<div style="position:absolute;left:4px;" id="iviewer_zoom_icon"/>').append(createButton("zoomImg", modalLayer_InitShowIviewerZoomImage)) :"" )
| + | |
− | // append content to foreground; wrap image with <div>
| + | |
− | .append($("<div id='modal-fg-wrapper' style='margin-left:" +
| + | |
− | (layerWidth-imgWidth) / 2 + "px; margin-top:35px;'/>")
| + | |
− | .append(newImg)// add image
| + | |
− | )
| + | |
− | // + caption
| + | |
− | .append($("<div id='zoomcaption' class='zoomcaption' style='text-align:center; margin:8px 2px 2px 2px; font-weight:bold;'/>")
| + | |
− | .append(title.replace("("+$.resource("toolTipImageZooming")+")","")+"<br />")
| + | |
− | // URL to metadata page from "a[href]" around img
| + | |
− | .append($.linkBuilder("imageMetadataLink", "", $(oriImg).closest("a").attr("href"), "target='_blank'"))
| + | |
− | .append( !zoomIsPossible ? "<br/><br/><span style='color:red;'>" + $.resource("zoomNotPossible") + "</span>" : "")
| + | |
− | );
| + | |
− | // take away IE6 modifications
| + | |
− | if ( !($.browser.msie && $.browser.version < 7)) {
| + | |
− | modalFG.css({"margin-top": -((layerHeight + 8) / 2)}); // 8 from other margin-top
| + | |
− | }
| + | |
− | modalFG.fadeIn(50);
| + | |
− | }
| + | |
− |
| + | |
− | /**
| + | |
− | * @description: load script and functionality on demand for jQuery plugin iviewer
| + | |
− | * @requires MediaWiki:Jquery.zoomImage.js with function modalLayer_ShowIviewerZoomImage()
| + | |
− | * @requires mw.config.get
| + | |
− | * @requires modalLayer_ShowIviewerZoomImage()
| + | |
− | * @returns {Boolean}
| + | |
− | */
| + | |
− | function modalLayer_InitShowIviewerZoomImage() {
| + | |
− | if (typeof modalLayer_ShowIviewerZoomImage !== "function") {
| + | |
− | $.getScript(mw.config.get('wgServer')
| + | |
− | + mw.config.get('wgScript')
| + | |
− | + "?title=MediaWiki:Jquery.zoomImage.js&action=raw&ctype=text/javascript"
| + | |
− | , function(){modalLayer_ShowIviewerZoomImage();}
| + | |
− | );
| + | |
− | } else {
| + | |
− | if (modalLayer_ShowIviewerZoomImage) {
| + | |
− | modalLayer_ShowIviewerZoomImage ();
| + | |
− | } else {
| + | |
− | console.log("Error: Function modalLayer_ShowIviewerZoomImage() not found to make the image scalable.");
| + | |
− | }
| + | |
− | }
| + | |
− | return false;// needed for click on <a href'#'></a> → no # appended to the URL
| + | |
− | }
| + | |
− |
| + | |
− | /**
| + | |
− | * @description: custom function to be passed to modal layer zooming an image
| + | |
− | * @param {object} paramsObj object containing "caller" = ref to a link including an img
| + | |
− | * @requires $.random()
| + | |
− | * @requires modalLayer_ShowImage()
| + | |
− | * @returns {undefined}
| + | |
− | */
| + | |
− | function modalLayer_ZoomImage(paramsObj) {
| + | |
− | var oriImg = $(paramsObj.caller).find("img").get(0), // caller is typically a[href]
| + | |
− | urlParts = oriImg.src.split("/");
| + | |
− | if ((oriImg.src.search(/\/thumb\//) === -1) ||
| + | |
− | (urlParts[urlParts.length - 1].search(/px-/) === -1)) {
| + | |
− | // no larger picture possible, use existing
| + | |
− | modalLayer_ShowImage($(oriImg).clone().get(0), oriImg);
| + | |
− | } else { // images with "/thumb/" in path can be enlarged using URL-based resize
| + | |
− | var stdThumbWidths = [1600,1400,1280,1024,900,800,700,640,600,550,480,400,350,320,300,250,200,180,150,120,100,80],
| + | |
− | maxHeight = $(window).height() - 105, // 70 for additional text; 35 for space at top and bottom
| + | |
− | maxWidth = $(window).width() - 50; // 50 for space left & right
| + | |
− | // smallest possible of upscaling factor for height, width, multiply back to get max possible width
| + | |
− | var maxScaledWidth = oriImg.width * Math.min(maxHeight/oriImg.height, maxWidth/oriImg.width),
| + | |
− | maxScaledHeight = oriImg.height * maxScaledWidth / oriImg.width;
| + | |
− | // reduce to next smaller standard thumb width (mediawiki preview settings plus additions)
| + | |
− | for (var i = 0; i < 22; i++) {
| + | |
− | if (stdThumbWidths[i] < maxScaledWidth) {
| + | |
− | maxScaledWidth = stdThumbWidths[i];
| + | |
− | maxScaledHeight = oriImg.height * maxScaledWidth / oriImg.width;
| + | |
− | break;
| + | |
− | }
| + | |
− | }
| + | |
− | urlParts[urlParts.length - 1] = maxScaledWidth + "px-" + urlParts[urlParts.length - 2];
| + | |
− | var newImg = new Image(maxScaledWidth, maxScaledHeight);
| + | |
− | // Load image. load/error occur asynchronously, need independent calls
| + | |
− | // appending "random()" seems necessary for IE6-8, else "zoom image, close, zoom again" fails. REASON?
| + | |
− | $(newImg)
| + | |
− | .attr("src", urlParts.join("/")+"&rnd="+$.random(0,10000))
| + | |
− | .load(function() { // load succeeded: create modal layer after loading image, else values (width, etc.) are 0
| + | |
− | modalLayer_ShowImage(newImg, oriImg);
| + | |
− | })
| + | |
− | .error(function() { // Error loading thumb, main reason: thumbs must be smaller than ori size.
| + | |
− | // Currently assuming this reason, loading full original image; BETTER: test using API:
| + | |
− | // http://commons.wikimedia.org/w/api.php?action=query&titles=Image:Lamium_purpureum_scan.jpg&prop=imageinfo&iiprop=size
| + | |
− | urlParts.pop(); // remove last part (e.g. 800px-xyz.jpg)
| + | |
− | // set default width and height in case of thumbnail generation failure with huge images
| + | |
− | newImg = new Image(maxScaledWidth, maxScaledHeight); // load original image
| + | |
− | $(newImg)
| + | |
− | .attr("src", urlParts.join("/").replace("/thumb", "")) // remove "/thumb" from url to get full. DO NOT ADD random here!
| + | |
− | .load(function() {modalLayer_ShowImage(newImg, oriImg);}) // load succeeded
| + | |
− | // 2nd level fail -> load from wikimedia.org
| + | |
− | .error(function() {
| + | |
− | // set default width and height in case of thumbnail generation failure with huge images
| + | |
− | newImg = new Image(maxScaledWidth, maxScaledHeight);
| + | |
− | $(newImg)
| + | |
− | .attr("src", "http://commons.wikimedia.org/w/thumb.php?f="+urlParts[urlParts.length-1]+"&width="+maxScaledWidth+"px"+"&rnd="+$.random(0,10000))
| + | |
− | .load(function() {modalLayer_ShowImage(newImg, oriImg);}) // load succeeded
| + | |
− | // 3rd level fail -> load unchanged wiki page thumb
| + | |
− | .error(function() {modalLayer_ShowImage($(oriImg).clone().get(0), oriImg);});
| + | |
− | });
| + | |
− | }); // end first level error
| + | |
− | }
| + | |
− | }
| + | |
− |
| + | |
− |
| + | |
− | /**
| + | |
− | * @description: Show image in modal layer
| + | |
− | *
| + | |
− | * @requires modalLayer_Create()
| + | |
− | * @requires modalLayer_ZoomImage()
| + | |
− | * @param {caller} caller reference to a link around image, function to call
| + | |
− | * @returns {False}
| + | |
− | */
| + | |
− | function zoomImage(caller) {
| + | |
− | modalLayer_Create(modalLayer_ZoomImage, {caller: caller});
| + | |
− | return false; // cancel default event
| + | |
− | }
| + | |
− |
| + | |
− | /**
| + | |
− | * @description: Add a modal zoom functionality to all images linking to own metadata
| + | |
− | * the CSS
| + | |
− | * class=no-image-popup or class=no-popup-image OR
| + | |
− | * class=no-image-zoom or class=no-zoom-image prevents an image from being zoomable, e.g.
| + | |
− | * [[File:Example.jpg|caption text|thumb|class=no-popup-image]]
| + | |
− | * @requires $.resource()
| + | |
− | * @requires zoomImage()
| + | |
− | * @returns {undefined}
| + | |
− | */
| + | |
− | function initImageZooming() {
| + | |
− | $("a[href].image img:not(.no-image-popup,.no-popup-image,.no-image-zoom,.no-zoom-image)").each(function() {
| + | |
− | var jParent = $(this).parent(),
| + | |
− | metaURL = jParent.attr("href"),
| + | |
− | urlParts = this.src.split("/"),
| + | |
− | imgFileName = (this.src.search(/\/thumb\//) !== -1) ? urlParts[urlParts.length - 2] : urlParts[urlParts.length - 1];
| + | |
− | // Is file name also in metadata page link? Else abort (e.g. for |link=parameter| wiki-images)
| + | |
− | // Problem: a.href and img.scr inconsistently! use encoded or non-encoded versions of e.g. () or "," -> unescape
| + | |
− | if (unescape(metaURL).indexOf(unescape(imgFileName)) === -1) { return; }
| + | |
− | // pass along the image
| + | |
− | jParent.click(function() { return zoomImage(this); });
| + | |
− | // set or change title, set alt to title
| + | |
− | var newTitle = this.alt + ((this.alt.length === 0) ? "" : " ") + "(" + $.resource("toolTipImageZooming") + ")";
| + | |
− | $(this).attr({title:newTitle, alt:newTitle});
| + | |
− | });
| + | |
− | }
| + | |
− |
| + | |
− | // END Modal Layer/Img Zoom
| + | |
− | ////////////////////////////
| + | |
− | | + | |
− | /* Load when documetn is ready */
| + | |
− | $(document).ready(function() {
| + | |
− | initImageZooming();
| + | |
− | });
| + | |
− | // </pre>
| + | |