Extension talk:LightboxThumbs

Resizing
What would I have to do to resize images on the fly? Ideally, I'd like to set a maximum image dimension that would match the viewer's screen. Any way to do this? – Jonathan Kovaciny 21:50, 20 December 2007 (UTC)


 * You'd need some Javascript trickery. I'm not friends with Javascript so I haven't tackled this project, but it would be a great feature. Maybe it's in the works for a future version of Lightbox itself? &#x2014;alxndr&#x00a0; (t) 23:12, 23 May 2008 (UTC)


 * What about about using the mediawiki's thumb.php to generate smaller versions of the images? --Kwisatz 00:44, 8 July 2009 (UTC)


 * Interesting idea, but it wouldn't be able to match the viewer's screen. &#x2014;alxndr&#x00a0; (t) 21:09, 7 July 2009 (UTC)


 * I modified the script (lightbox v2.04, not the mediawiki extension itself) so that the size of the lightbox is always a little smaller than the browser's size. It just has one minor glitch: if the image is resized you see it flash from it's original size to the smaller version just after loading it. It doesn't flow out of the lightbox though, for a moment it's just clipped inside the box until it resizes. Here's how to do it:
 * Around line 45 of /lightbox/js/lightbox.js find

LightboxOptions = Object.extend({
 * and add these lines before that:

//** HACK: resize big images. Needs a few global vars var newWidth = null; var maxWidth, maxHeight;
 * Around line 143 find:

Builder.node('img',{id:'lightboxImage'}),
 * and replace with

Builder.node('div', {id:'imgWrapper', style:'overflow:hidden'}, [    Builder.node('img',{id:'lightboxImage', style:'height:auto'}) ]),
 * Around line 180 find:

var ids = 'overlay lightbox outerImageContainer imageContainer lightboxImage hoverNav prevLink nextLink loading loadingLink ' + 'imageDataContainer imageData imageDetails caption numberDisplay bottomNav bottomNavClose';
 * And add imgWrapper (preceded by a space) to the list, after bottomNavClose.
 * Around rule 280 find:

// get current width and height var widthCurrent = this.outerImageContainer.getWidth; var heightCurrent = this.outerImageContainer.getHeight;
 * after that, add:

/** HACK: resize big images **/ var	pageSizes = this.getWindowSize; maxWidth = pageSizes.width - 50; maxHeight = pageSizes.height - 200; if (imgWidth > maxWidth) {   imgHeight = (imgHeight * maxHeight) / imgWidth; imgWidth = maxHeight; } else if (imgHeight > maxHeight) {   imgWidth = (imgWidth * maxHeight) / imgHeight; imgHeight = maxHeight; } newWidth = imgWidth; this.lightboxImage.setStyle({width: 'auto'});
 * Around line 315 find:

if (hDiff != 0) new Effect.Scale(this.outerImageContainer, yScale, {scaleX: false, duration: this.resizeDuration, queue: 'front'}); if (wDiff != 0) new Effect.Scale(this.outerImageContainer, xScale, {scaleY: false, duration: this.resizeDuration, delay: this.resizeDuration});
 * after that, add:

this.imgWrapper.setStyle({height: imgHeight + 'px'});
 * Around line 345 find:

afterFinish: (function{ this.updateDetails; }).bind(this)
 * And replace with:

afterFinish: (function{ this.updateDetails;  /** HACK: resize big images **/ if(newWidth <= maxWidth) this.lightboxImage.setStyle({width: newWidth + 'px'}); }).bind(this)
 * Finally, at the end of the document find

return [pageWidth,pageHeight]; }
 * and replace with

return [pageWidth,pageHeight]; }, getWindowSize: function { var array = []; w = window; array.width = array[0] = w.innerWidth || (w.document.documentElement.clientWidth || w.document.body.clientWidth); array.height = array[1] = w.innerHeight || (w.document.documentElement.clientHeight || w.document.body.clientHeight); return array; }

This should make the lightbox always resize to fit the browser. Litso 11:08, 26 October 2010 (UTC)

Fatal error
Got a error message - can you help ?:

Fatal error: Call to undefined method OutputPage::addStyle in /home/wikifixm/public_html/wiki/extensions/LightboxThumbs.php on line 64

--84.193.195.239, 12 January 2008


 * Sounds like you're not on MW 1.11; older versions don't have the addStyle function. You can put the s to the JS and CSS files directly into the skin(s) you use, or the hack would probably work too... &#x2014;alxndr&#x00a0; (t) 23:14, 23 May 2008 (UTC)

Problems with MediaWiki 1.11.1 ?
I installed the extension on a 1.11.1. It works fine while previewing the page in edit-mode. If I the page is saved and i view it, it only opens the image in an normal HTML page. Any ideas? --Stefan Haberstroh 13:48, 3 February 2008 (UTC)


 * I have the same problem with a 1.11.0. --83.189.120.177 13:55, 3 February 2008 (UTC)


 * Got a URL I can look at? Off the top of my head, I'm guessing it's a relative URL problem; the s to the JS and CSS aren't absolute. &#x2014;alxndr&#x00a0; (t) 23:16, 23 May 2008 (UTC)

Doesn't load the image
It does everything else--the screen goes dark and the circle keeps going around and around, like it's loading, only it never loads. --72.230.84.48, 8 March 2008


 * Interesting. Can you get to the full-size image normally from the image description page? Got a URL I can look at? &#x2014;alxndr&#x00a0; (t) 23:20, 23 May 2008 (UTC)

I have the same problem. I am using lightbox 2.04, mediawiki 1.13.1. The URL is http://menten.org/wiki/index.php5?title=Special:NewImages. 14:50 EST, 19, Jan 2009.

I encountered the same behaviour with MediaWiki 1.13.3.

I have installed another extension (Picasa2Gallery) that uses lightbox.js as well. Both work fine together on my localhost (Windows XP), but when I upload the files on the Linux server (http://www.mediterraner-garten.lu/index.php?title=Garten), the gallery still works, but the normal thumbnails don't display - the screen only darkens, and the animated gif is rotating, but nothing more.

One difference I found is that the tooltips of the thumbnails sais that (the picture can't be found). I compaired the source code of the page, and found out, that LightboxThumbs seems to get confused with the right URL to the picture, so that it can't be loaded. It's strange, but the URL that points to the picture looks something like this: .../images/5/54/Index.php?title=Bild:picture.jpg whereas the right URL should be: .../images/e/ea/picture.jpg As I said, under Windows XP on localhost the URL is displayed correct, and everything works fine. I would really like to use the LightboxThumbs extension. Maybe someone has an idea. Without LigtboxThumbs the usual special-page with the metas of the picture shows up. --77.176.240.33 12:24, 2 May 2009 (UTC)

Lightbox isn't used for SVG files
Great extension! The Lightbox is a great effect, especially for galleries. However I've found that it doesn't work with SVG files. I'm using a lot of SVGs on my wiki, and would love it if they could be shown in a Lightbox. Does anyone know if this is possible? Thanks! - LNick 13:53, 27 May 2008 (UTC)

No lightbox effet
hello I use MW 1.11 and the lightbox doesn't look to work properly. i'v got 2 javascript errors
 * Builder is not defined


 * [Break on this error] objBody.appendChild(Builder.node('div',{id:'overlay'}));

when the page is loading


 * $("overlay") has no properties


 * [Break on this error] $('overlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPag...

When i try to clic on the thumb

you can see it here with firebug enabled thank you for your answer --Roulion 14:25, 11 June 2008 (UTC)


 * It seems as the latest version of lightbox requires an additional javascript file. I fixed this by adding the following line to LighboxThumbs.php, before the same line with lightbox.js:

$out->addScript(' ');
 * --Ext 14:04, 17 June 2008 (UTC)

MediaWiki 1.12.0
I have trouble running it in MediaWiki 1.12.0. The page leaves me with Parse error: syntax error, unexpected '<'...

Any idea? --125.163.24.155 13:51, 30 August 2008 (UTC)

German Version of Mediawiki
Hello,

the LightboxThumbs Extension is not working with effect. when i Editing a Site an run at as "Show preview" (no saveing) the effect working fine. Maybe it is the German Version of Mediwiki???

MiGo 09 Nov 2008


 * That's interesting, I don't know what could be causing that behavior. However, older versions of this extension were hard-coded to be English only; v0.1.3, which I've just put up, should work no matter the interface language. &#x2014;alxndr&#x00a0; (t) 22:10, 12 May 2009 (UTC)

MediaWiki 1.6.12
Is there anyway I can use this great extension in MediaWiki 1.6.12? The hack is not compatible either. I get the error: which refers to the $repo lines 38 and 58: Can you help me with this? I have to stick to MW 1.6 for the moment Regards, Razool 17:41, 26 March 2009 (UTC)


 * Argh, that's the bit of the extension that frustrated me the most. In older MediaWiki versions, it's no easy task to get the raw URL of an uploaded image when all you have is the title of the image.
 * What happened when you tried the hack?
 * &#x2014;alxndr&#x00a0; (t) 22:06, 12 May 2009 (UTC)

Not Working on 1.13
After clicking on image, it just openin in new page in full-size by link lokking like that: http://wikiaddress.net/w/images/6/6a/Image_name.JPG

How can i fix it?

--195.14.50.18, 21 April 2009


 * That means the Lightbox Javascript (and probably the CSS too) isn't properly linked. It expects to find the  directory inside a   directory relative to where the PHP file is (which on a default install and on mediawiki.org is in the   directory).


 * If the  directory is where it should be, try tinkering with the   lines in the   function. You may want to make them absolute (relative to the domain instead of where the current file is) by starting the   attribute with a slash. Replace the   line with another   line; it expects a full HTML tag so you want something like:

$out->addScript('&lt;link rel="stylesheet" href="/skins/LightboxThumbsFiles/css/lightbox.css" type="text/css" media="screen" /&gt;');


 * &#x2014;alxndr&#x00a0; (t) 15:47, 21 April 2009 (UTC)

Bug (and fix) using LightboxThumbs on a non-ASCII wiki
Just tried using your plugin on a non-English (Russian/Cyrillic) mediawiki site and it failed. The problem is the Russian word for "Image" ("Изображение") is not ASCII and therefore when used in an URL it is converted to %D0%98%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5. Since regex for thumbnails is looking for this word in original form it can not find it.

The fix is simple: change  to   when you assign the $pattern.

--81.5.110.2 23:03, 6 September 2009 (UTC) (aka w:User:K001)
 * Has been implemented, it should now work. - Rgood erm ote   20:26, 20 October 2009 (UTC)

Not Working on 1.15.1
I have MW version 1.15.1 and I want to use the LightBox v2.4-Extension but doesn't work, when I click on the image this open in a new window ,non like a lightbox effect. --Skarabeusz 12:21, 31 January 2010 (UTC)


 * I would like it to work 1.15.1 if at all possible thanks.
 * Still not working. Effects on http://www.turystyka-powiat-nowosolski.info.pl Can someone help?--Skarabeusz 22:42, 8 May 2010 (UTC)

Hi,

just saw your attached link, it seems like you managed to fix this issue. I have a similar problem with my wiki, I am using mediawiki version 1.15.1. Could you please explain me how you managed to solve it. Thank you

Differentiate between single images and galleries
I got your extension working on my 1.15 wiki without any problems (well, there were problems but they were due to my stupidity, so we won't mention that again). This wiki has both individual thumbnail images on many pages and occasional galleries using the gallery tag on others. What I'd like would be to have the extension only modify thumbnails for those on the gallery pages, leaving the individual images alone. What I did was replace:


 * $thumbnailsDone = preg_replace_callback($pattern, 'efRewriteThumbImage', $out->getHTML);

with


 * $thumbnailsDone = $out->getHTML ;

Just thought I'd mention it.

Your documentation says, "A caption below the image includes the image's title and a link to its description page, along with the caption on the thumbnail, if any." All that seems to be working except the "link to its description page" which I'm not getting. Any idea why?

HenryHartley 17:19, 4 March 2010 (UTC)

No link to actual image
Everything seems to be working fine but I don't get a link anywhere to the actual image page. That is, when I click on a thumbnail the image shows up in the standard lightbox way, with prev and next links, with the caption from the gallery, with "Image x of y" and with a close button, but there is no link, that I can find anyway, to the images wiki page. I see that on the Oberwiki gallery that part is working.

I've tried putting a link to the image page as part of the image caption, with this:  but when MediaWiki expands that to build the HTML, you end up with invalid HTML. It get's expanded and put into the  tag in the gallery with nested double quotes, which is a problem -- like this:

title="file:img_045291.jpg"

Any idea what might be missing? Or is there some trick?

HenryHartley 14:26, 6 March 2010 (UTC)
 * I've made a solution for this (for lightbox v2.04). Around line 153 in /lightbox/js/lightbox.js replace

Builder.node('span',{id:'numberDisplay'})
 * With

Builder.node('span',{id:'numberDisplay'}), Builder.node('a',{id:'toFilePage'}, 'Go to image page')     /** HACK: Link to MediaWiki file page **/
 * Around line 175 should be something like:

var ids = 'overlay lightbox outerImageContainer imageContainer lightboxImage hoverNav prevLink nextLink loading loadingLink ' + 'imageDataContainer imageData imageDetails caption numberDisplay bottomNav bottomNavClose';
 * Add toFilePage (preceded by a space) to that list after bottomNavClose.
 * Then around line 330 inside the function "updateDetails: function { }" find

// if caption is not null if (this.imageArray[this.activeImage][1] != ""){ this.caption.update(this.imageArray[this.activeImage][1]).show; }
 * and add after that:

/** HACK: link to MediaWiki file page **/ thelink = this.imageArray[this.activeImage][0].split('/'); this.toFilePage.writeAttribute('href', '/wiki/File:' + thelink[7]);


 * You might want to edit the css a little bit too to style the link. In /lightbox/css/lightbox.css around line 24 find


 * 1) imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}
 * and replace with


 * 1) imageData #numberDisplay{ display: block;}
 * 2) imageData a#toFilePage { display: block; clear: left; padding-bottom: 1.0em }
 * I myself added a color to the link as well, but that's totally up to you of course! Anyway, now the lightbox should have a link to the image's file page at the bottom left of the image (below the caption). Litso 11:20, 26 October 2010 (UTC)

Lightbox Thumbs + FCK Rich Text Editor
I love Lightbox Thumbs and it works great on our wiki! The only problem is that as soon as we enable it, it makes the option for choosing to edit in Rich Text (via FCKeditor) disappear. Has anyone had this problem, or know what may be causing it? Is anyone using these two extensions together without problem? Any info would be helpful! --Aekki99 18:01, 23 April 2010 (UTC)

Lightbox Thumbs + OpenSearch
You can't install OpenSearch (opensearch_desc.php) in Firefox while Lightbox is included in LocalSettings.php

Reducing "larger" image size
Is there any way to reduce the larger image's size? I have a few images that are very large (some 5MB+) and I wouldn't want my visitors waiting a long time to load the images after clicking on the thumbnail. I'm sure I can call a larger "thumbnail" from MediaWiki, but I'm not sure how to do that here... Would appreciate an answer! Thank you! :) -- Joe Beaudoin Jr. 17:45, 12 May 2010 (UTC)
 * All right, so I didn't find a way to reduce the file size of the image, but rather a means to deal with the dimensions of the image so that they aren't bigger than the screen. Instructions here. Feedback and constructive criticism welcome! -- Joe Beaudoin Jr. 02:17, 14 May 2010 (UTC)

New Version for 1.16
It doesn't seem to work with MW 1.16 beta3. The RegEx pattern must change, as the MW output has changed a lot. I am in the process of fixing the RexEx patterns and adapting the Image and Gallery functions.

I updated the extension! It now works fine with our 1.16 installation. I also fixed the wrong behaviour with the Special:NewFiles Gallery. The new script can be found here: Extension:LightboxThumbs/LightboxThumbs-0.1.4.php (still has some minor errors, will fix them asap)

(I leave it to Alex to udpate the download-page...) Cheers, Michael --Aczs 16:50, 1 August 2010 (UTC)

Fixed some errors and merged the two callback handlers. I hope it works now: Extension:LightboxThumbs/LightboxThumbs-0.1.4.php --Aczs 00:14, 4 August 2010 (UTC)

Conflicts with WikiEditor on 1.16.0. When lightbox is turned on, on edit page, WikiEditor's toolbar is not displayed and TOC navigation panel is displayed without TOC. --Corias 20:39, 6 September 2010 (MSD)

Still not working with 1.16.0 Wiki Editor from UsabilityInitiative extension.

1.16.0 and 0.1.4.1 Gallery Formatting Issue
There seems to be a link between the gallery HTML formatting and this extension. When the extension is disabled, all the wiki galleries are displayed with proper formatting. As soon as I enable the extension, the galleries get all messed up and looking directly at the HTML, it seems to be stripping the from the first few images in the gallery.

Example of the issue: http://wiki.twilightonalex.com/Help:Images

Unofficial Gallery formatting fix for the above mentioned issue
A slight change to the regex pattern and in how the html is reshaped fixes the Gallery formatting issue mentioned above. source: http://www.blackmoonit.com/unofficial_gallery_fix.zip
 * Perfect, thanks!