Extension talk:HighslideThumbs
Latest comment: 13 years ago by Katkov Yury in topic Does it work with MW 1.17?
Still being fixed?
editIs the extension still being developed?
Thank you for this extension. It works perfectly! --84.227.138.168 11:34, 30 October 2010 (UTC)
Does it work with MW 1.17?
editThe extension looks really great (considering the example) but I can't make it work. Nothing happens when clicking images. No visible errors either.
Is anyone running this in 1.17? --VNAlves 17:24, 30 July 2011 (UTC)
- It shouln't work on MW 1.16 and MW 1.17 because of improper use of the regular expressions. I'm working on fixing these issues and hopefully the new version will see the light of day this Christmas. Katkov Yury 12:03, 26 November 2011 (UTC)
Does it work with MW 1.16?
editNo luck - Wasn't able to make this work on MW 1.16.5 / local server. Highslide in /js/highslide works fine. But nothing happens. Phcalle 21:49, 14 May 2011 (UTC)
I tried to install this extension on MW 1.16 but was not able to get it work - the folder-settings seem to be ok.
Thanks for support + greetings! --Filburt 17:23, 8 January 2011 (UTC)
- The same for me ! Thanks in advance !
- --FrancoR 14:30, 10 February 2011 (UTC)
- I changed to FancyBoxThumbs. It's very lightweight and works fine with MW 1.16...
- --Filburt 20:06, 10 February 2011 (UTC)
- Thanks Filburt for your reply.I tried yet the FancyBoxThumbs, but I got problems also with it. Following instructions it seems to be very easy to configure, but when I run it I don't get any error but the images aren't opened with "fancyBox" effect but are appended to bottom of the page. I also wrote to Fancy Box creator but I didn't get any answer.
- Actually I'm using lightbox extension, but I have some trouble with Special:NewImages page and UsabilityInitiatve so I would like to try something else .
- --FrancoR 14:35, 11 February 2011 (UTC)
how to download
editHi guys, does anybody knows how to download this extension? --Katkov Yury 20:09, 13 November 2011 (UTC)
Patch for MediaWiki 1.18.1
editI just got HighslideThumbs 0.1.0 running on MediaWiki 1.18.1 and made a patch for it:
http://chris.files.hobbyelektronik.org/HighslideThumbs_mw_1.18.1.diff
I don't know if the german translation of MW is a little bit off but on my local installation of MW 1.18.1 there are no title-attributes on the images, so I removed them completely from the source. So no subtitles are shown below the resized image.
Update: Some PHP-installations seem to dislike the comments in the regex-expressions. I've added another diff-file that also removes the comments:
http://chris.files.hobbyelektronik.org/HighslideThumbs_mw_1.18.1b.diff
Your Patch works for MediaWiki 1.16.5
editThanx a lot. I tested your patch on my Mediawiki 1.16.5, it's work. Here the code of HighslideThumbs.php for MW 1.16.5 :
<?php
/*
* HighslideThumbs extension
* by TomFourWinds, http://www.mediawiki.org/wiki/User:TomFourWinds
* Displays thumbnailed images full-size in window using Highslide JS (http://www.highslide.com/).
* Licensed under Creative Commons Attribution-NonCommercial license 3.0: http://creativecommons.org/licenses/by-nc/3.0/
*
* Bugs: will make very large images take over your screen! doesn't do any resizing
* if there are multiple galleries on one page, they are treated as being part of one big slideshow
* will probably break on images with a / or ? in the name
* probably eats a lot of resources if you have a ton of thumbnails in a page...
* doesn't work with SVGs (?)
* doesn't work on MW before 1.9 (?)
*
* Todo: Make galleries show in different slideshows
*/
if ( !defined( 'MEDIAWIKI' ) )
die( 'This is a MediaWiki extension, and must be run from within MediaWiki.' );
$wgExtensionCredits['other'][] = array(
'name' => 'HighslideThumbs',
'url' => 'none',
'author' => 'http://www.mediawiki.org/wiki/User:TomFourWinds',
'description' => 'Displays full-size images with [http://www.highslide.com/ HighSlide JS] when clicking on thumbnails.',
'version' => '0.1.0'
);
if ($highslideFilesDir) ## don't add the hook unless we have a directory to look at
{
$highslideFilesDir = rtrim(trim($highslideFilesDir),'/'); # strip whitespace, then any trailing /
## we'd rather subclass Linker and change how it builds thumbnails and galleries, but we can't, so modifying the HTML once it's built will have to suffice
$wgHooks['BeforePageDisplay'][] = 'efHighslideBeforePageDisplay';
}
function efDebugVar($varName,$var)
{
return "\n\n<!--\n$varName: ".str_replace('--','__',print_r($var,true))."\n-->\n\n";
}
## TODO merge two efRewrite fxns into one, and send it normalized data from callback fxns which will interpret the $matches from each preg_replace?
## ...that'd make it easier to group galleries into lightbox slideshows
function efHighslideRewriteThumbImage($matches)
{
## see comments in first $pattern in efHighslideBeforePageDisplay() for what the pieces of $matches are
global $wgOut, $lightboxThumbsDebug, $wgContLang;
if ($lightboxThumbsDebug) { global $wgContLang; }
$titleObj = urldecode($matches[2]);
$wgContLang->namespaceNames[6].":".$titleObj;
$image = wfFindFile(Title::makeTitle(NS_IMAGE, $titleObj),array('time' => false, 'ignoreRedirect' => false)); ## wfFindFile($titleObj,false,false,true) to bypass cache
return $matches[1].' href="'.$image->getURL().'" onclick="return hs.expand(this, config_images);" class="image" '
.$matches[3].$matches[4].$matches[5]
.($lightboxThumbsDebug?efDebugVar('$matches',$matches).efDebugVar('$titleObj',$titleObj).efDebugVar('$image',$image).efDebugVar('$wgContLang->namespaceNames',$wgContLang->namespaceNames):'');
}
function efHighslideRewriteGalleryImage($matches)
{
## see comments in second $pattern in efHighslideBeforePageDisplay() for what the pieces of $matches are
global $wgOut, $lightboxThumbsDebug, $wgContLang;
$titleObj = urldecode($matches[2]);
$wgContLang->namespaceNames[6].":".$titleObj;
$image = wfFindFile($titleObj,false,false,true);
return $matches[1].' href="'.$image->getURL().'" onclick="return hs.expand(this, config_images);" class="image" rel="lightbox[gallery]" '
.$matches[3].$matches[4]."</li>"
.($lightboxThumbsDebug?efDebugVar('$matches',$matches).efDebugVar('$titleObj',$titleObj).efDebugVar('$image',$image):'');
}
function efHighslideBeforePageDisplay($out)
{
global $highslideFilesDir, $wgContLang;
$out->addScript('<script type="text/javascript" src="'.$highslideFilesDir.'/highslide-full.js"></script>');
$out->addScript('<script type="text/javascript" src="'.$highslideFilesDir.'/highslide-extra.js"></script>');
$out->addScript('<script type="text/javascript" >hs.graphicsDir = "'.$highslideFilesDir.'/graphics/";var config_images = {slideshowGroup: "images",transitions: ["expand", "crossfade"],numberPosition: "caption"};</script>');
$out->addScript('<link rel="stylesheet" type="text/css" href="'.$highslideFilesDir.'/highslide.css" />');
$out->addScript('<link rel="stylesheet" type="text/css" href="'.$highslideFilesDir.'/highslide-extra.css" />');
## ideally we'd do this with XPath, but we'd need valid XML for that, so we'll do it with some ugly regexes
## (could use a regex to pull out all div.thumb, maybe they're valid XML? ...probably not)
## regex for thumbnails
$pattern = '/(<a[^>]+?) # $1: start of opening <a> tag through start of href attribute in <a> tag, so we can keep it intact
\s*href="[^"]*(?:'.urlencode($wgContLang->namespaceNames[6]).'): # dont care about start of original link href...
([^"\/]+)" # $2: ...but end is wiki name for the image
\s*class="image" #
([^>]*>) # $3: remainder of opening <a> tag
\s* #
(<img[^>]+?class="thumbimage") # $4: the img start tag itself
([^>]*>) # $5: the img end
/x';
$thumbnailsDone = preg_replace_callback($pattern, 'efHighslideRewriteThumbImage', $out->getHTML());
## regex for galleries
$pattern = '/(<li\s*class="gallerybox".+?div\s*class="thumb".+?) # $1: div.gallerybox opening tag through href attribute, so we can keep it intact
\s*href="[^"]+\/'.urlencode($wgContLang->namespaceNames[6]).':([^"]+)"\s*class="image"\s* # $2: wiki name of the image, this is getting replaced
([^>]*>.+?<div\s*class="gallerytext">) # $3: end of open <a> through start of caption
\s*(?:<p>\s*)? #
(.+?) # $4: caption is raw HTML... (may choke if contains an ending div)
(?:\s*(<\/p>|<br\s*\/?>))?\s*<\/li> #
/sx';
$allDone = preg_replace_callback($pattern, 'efHighslideRewriteGalleryImage', $thumbnailsDone);
$out->clearHTML();
$out->addHTML($allDone);
return true;
}
Version for MediaWiki 1.19.1
editIt was needed to change some parts of the file for 1.18, because of the changes in MW 1.19. Here is the small patch (apply after you applied the patch for 1.18):
--- HighslideThumbsORIG.php 2012-07-20 11:25:28.010571754 +0200
+++ HighslideThumbs.php 2012-07-20 11:26:47.696336894 +0200
@@ -44,9 +44,10 @@
{
## see comments in first $pattern in efHighslideBeforePageDisplay() for what the pieces of $matches are
global $wgOut, $lightboxThumbsDebug, $wgContLang;
- if ($lightboxThumbsDebug) { global $wgContLang; }
+ $namespaces = $wgContLang->getNamespaces();
+
$titleObj = urldecode($matches[2]);
- $wgContLang->namespaceNames[6].":".$titleObj;
+ $namespaces[6].":".$titleObj;
$image = wfFindFile(Title::makeTitle(NS_IMAGE, $titleObj),array('time' => false, 'ignoreRedirect' => false)); ## wfFindFile($titleObj,false,false,true) to bypass cache
return $matches[1].' href="'.$image->getURL().'" onclick="return hs.expand(this, config_images);" class="image" '
.$matches[3].$matches[4].$matches[5]
@@ -57,8 +58,10 @@
{
## see comments in second $pattern in efHighslideBeforePageDisplay() for what the pieces of $matches are
global $wgOut, $lightboxThumbsDebug, $wgContLang;
+ $namespaces = $wgContLang->getNamespaces();
+
$titleObj = urldecode($matches[2]);
- $wgContLang->namespaceNames[6].":".$titleObj;
+ $namespaces[6].":".$titleObj;
$image = wfFindFile($titleObj,false,false,true);
return $matches[1].' href="'.$image->getURL().'" onclick="return hs.expand(this, config_images);" class="image" rel="lightbox[gallery]" '
.$matches[3].$matches[4]."</li>"
@@ -68,6 +71,8 @@
function efHighslideBeforePageDisplay($out)
{
global $highslideFilesDir, $wgContLang;
+ $namespaces = $wgContLang->getNamespaces();
+
$out->addScript('<script type="text/javascript" src="'.$highslideFilesDir.'/highslide-full.js"></script>');
$out->addScript('<script type="text/javascript" src="'.$highslideFilesDir.'/highslide-extra.js"></script>');
$out->addScript('<script type="text/javascript" >hs.graphicsDir = "'.$highslideFilesDir.'/graphics/";var config_images = {slideshowGroup: "images",transitions: ["expand"],numberPosition: "caption"};</script>');
@@ -78,12 +83,12 @@
## (could use a regex to pull out all div.thumb, maybe they're valid XML? ...probably not)
## regex for thumbnails
- $pattern = '/(<a[^>]+?)\s*href="[^"]*(?:'.urlencode($wgContLang->namespaceNames[6]).'):([^"\/]+)"\s*class="image"([^>]*>)\s*(<img[^>]+?class="thumbimage")([^>]*>)/x';
+ $pattern = '/(<a[^>]+?)\s*href="[^"]*(?:'.urlencode($namespaces[6]).'):([^"\/]+)"\s*class="image"([^>]*>)\s*(<img[^>]+?class="thumbimage")([^>]*>)/x';
$thumbnailsDone = preg_replace_callback($pattern, 'efHighslideRewriteThumbImage', $out->getHTML());
## regex for galleries
- $pattern = '/(<li\s*class="gallerybox".+?div\s*class="thumb".+?)\s*href="[^"]+\/'.urlencode($wgContLang->namespaceNames[6]).':([^"]+)"\s*class="image"\s*([^>]*>.+?<div\s*class="gallerytext">)\s*(?:<p>\s*)?(.+?)(?:\s*(<\/p>|<br\s*\/?>))?\s*<\/li>/sx';
+ $pattern = '/(<li\s*class="gallerybox".+?div\s*class="thumb".+?)\s*href="[^"]+\/'.urlencode($namespaces[6]).':([^"]+)"\s*class="image"\s*([^>]*>.+?<div\s*class="gallerytext">)\s*(?:<p>\s*)?(.+?)(?:\s*(<\/p>|<br\s*\/?>))?\s*<\/li>/sx';
$allDone = preg_replace_callback($pattern, 'efHighslideRewriteGalleryImage', $thumbnailsDone);
$out->clearHTML();
And here is the full source code of HighslideThumbs.php which works flawlessly in MediaWiki 1.19.1:
<?php
/*
* HighslideThumbs extension
* by TomFourWinds, http://www.mediawiki.org/wiki/User:TomFourWinds
* Displays thumbnailed images full-size in window using Highslide JS (http://www.highslide.com/).
* Licensed under Creative Commons Attribution-NonCommercial license 3.0: http://creativecommons.org/licenses/by-nc/3.0/
*
* Bugs: will make very large images take over your screen! doesn't do any resizing
* if there are multiple galleries on one page, they are treated as being part of one big slideshow
* will probably break on images with a / or ? in the name
* probably eats a lot of resources if you have a ton of thumbnails in a page...
* doesn't work with SVGs (?)
* doesn't work on MW before 1.9 (?)
*
* Todo: Make galleries show in different slideshows
*/
if ( !defined( 'MEDIAWIKI' ) )
die( 'This is a MediaWiki extension, and must be run from within MediaWiki.' );
$wgExtensionCredits['other'][] = array(
'name' => 'HighslideThumbs',
'url' => 'none',
'author' => 'http://www.mediawiki.org/wiki/User:TomFourWinds',
'description' => 'Displays full-size images with [http://www.highslide.com/ HighSlide JS] when clicking on thumbnails.',
'version' => '0.1.0'
);
if ($highslideFilesDir) ## don't add the hook unless we have a directory to look at
{
$highslideFilesDir = rtrim(trim($highslideFilesDir),'/'); # strip whitespace, then any trailing /
## we'd rather subclass Linker and change how it builds thumbnails and galleries, but we can't, so modifying the HTML once it's built will have to suffice
$wgHooks['BeforePageDisplay'][] = 'efHighslideBeforePageDisplay';
}
function efDebugVar($varName,$var)
{
return "\n\n<!--\n$varName: ".str_replace('--','__',print_r($var,true))."\n-->\n\n";
}
## TODO merge two efRewrite fxns into one, and send it normalized data from callback fxns which will interpret the $matches from each preg_replace?
## ...that'd make it easier to group galleries into lightbox slideshows
function efHighslideRewriteThumbImage($matches)
{
## see comments in first $pattern in efHighslideBeforePageDisplay() for what the pieces of $matches are
global $wgOut, $lightboxThumbsDebug, $wgContLang;
$namespaces = $wgContLang->getNamespaces();
$titleObj = urldecode($matches[2]);
$namespaces[6].":".$titleObj;
$image = wfFindFile(Title::makeTitle(NS_IMAGE, $titleObj),array('time' => false, 'ignoreRedirect' => false)); ## wfFindFile($titleObj,false,false,true) to bypass cache
return $matches[1].' href="'.$image->getURL().'" onclick="return hs.expand(this, config_images);" class="image" '
.$matches[3].$matches[4].$matches[5]
.($lightboxThumbsDebug?efDebugVar('$matches',$matches).efDebugVar('$titleObj',$titleObj).efDebugVar('$image',$image).efDebugVar('$wgContLang->namespaceNames',$wgContLang->namespaceNames):'');
}
function efHighslideRewriteGalleryImage($matches)
{
## see comments in second $pattern in efHighslideBeforePageDisplay() for what the pieces of $matches are
global $wgOut, $lightboxThumbsDebug, $wgContLang;
$namespaces = $wgContLang->getNamespaces();
$titleObj = urldecode($matches[2]);
$namespaces[6].":".$titleObj;
$image = wfFindFile($titleObj,false,false,true);
return $matches[1].' href="'.$image->getURL().'" onclick="return hs.expand(this, config_images);" class="image" rel="lightbox[gallery]" '
.$matches[3].$matches[4]."</li>"
.($lightboxThumbsDebug?efDebugVar('$matches',$matches).efDebugVar('$titleObj',$titleObj).efDebugVar('$image',$image):'');
}
function efHighslideBeforePageDisplay($out)
{
global $highslideFilesDir, $wgContLang;
$namespaces = $wgContLang->getNamespaces();
$out->addScript('<script type="text/javascript" src="'.$highslideFilesDir.'/highslide-full.js"></script>');
$out->addScript('<script type="text/javascript" src="'.$highslideFilesDir.'/highslide-extra.js"></script>');
$out->addScript('<script type="text/javascript" >hs.graphicsDir = "'.$highslideFilesDir.'/graphics/";var config_images = {slideshowGroup: "images",transitions: ["expand"],numberPosition: "caption"};</script>');
$out->addScript('<link rel="stylesheet" type="text/css" href="'.$highslideFilesDir.'/highslide.css" />');
$out->addScript('<link rel="stylesheet" type="text/css" href="'.$highslideFilesDir.'/highslide-extra.css" />');
## ideally we'd do this with XPath, but we'd need valid XML for that, so we'll do it with some ugly regexes
## (could use a regex to pull out all div.thumb, maybe they're valid XML? ...probably not)
## regex for thumbnails
$pattern = '/(<a[^>]+?)\s*href="[^"]*(?:'.urlencode($namespaces[6]).'):([^"\/]+)"\s*class="image"([^>]*>)\s*(<img[^>]+?class="thumbimage")([^>]*>)/x';
$thumbnailsDone = preg_replace_callback($pattern, 'efHighslideRewriteThumbImage', $out->getHTML());
## regex for galleries
$pattern = '/(<li\s*class="gallerybox".+?div\s*class="thumb".+?)\s*href="[^"]+\/'.urlencode($namespaces[6]).':([^"]+)"\s*class="image"\s*([^>]*>.+?<div\s*class="gallerytext">)\s*(?:<p>\s*)?(.+?)(?:\s*(<\/p>|<br\s*\/?>))?\s*<\/li>/sx';
$allDone = preg_replace_callback($pattern, 'efHighslideRewriteGalleryImage', $thumbnailsDone);
$out->clearHTML();
$out->addHTML($allDone);
return true;
}