User:Alxndr/Lightbox2 hack

'''Wait! Do you really want this messy hack, or do you want the relatively-easy extension?'''

This hack changes thumbnails so they use the Lightbox Javascript method of viewing fullsize images laid over the page, instead of linking to the image's description page. The overlaid fullsize image has a caption matching the thumbnail's caption, followed by a link to the image's description page.

Tested with version 2.03.3 only. Back up your stuff, don't hold me responsible if everything blows up, etc.

Demo: http://oberwiki.net/Special:Newimages

Questions/comments/problems/death threats: alxndr@ nospamthanks- gmail.com

How-to

 * 1) Download Lightbox 2, put somewhere useful on your server.
 * 2) Follow step 1 of the installation instructions there ("Setup": put JS/CSS links into your skin's head)
 * 3) Edit js/lightbox.js:
 * 4) * make sure fileLoadingImage and fileBottomNavCloseImage are referencing where loading.gif and closelabel.gif actually are
 * 5) * change all instances of 'rel' to 'class'</tt>
 * 6) * change all instances of match('lightbox')</tt> to match('thumbimage')</tt>
 * 7) * change  if((imageLink.getAttribute('class') == 'lightbox')){ </tt> to  if((imageLink.getAttribute('class') == 'thumbimage')){ </tt>
 * 8) * in function updateImageList</tt>, in the first for</tt> loop, duplicate the if</tt> block but change match('thumbimage')</tt> to match('image')</tt>
 * 9) * in function start</tt>, look for  if((imageLink.getAttribute('class') == 'thumbimage')){ </tt> and change:
 *  imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title'))); </tt>
 * to
 *  imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('longdesc'))); </tt>
 * and a few lines later in the for</tt> loop, change:
 *  imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title'))); </tt>
 * to
 * <tt> imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('longdesc'))); </tt>
 * 1) Edit <tt>includes/Linker.php</tt>:
 * 2) * in function <tt>makeThumbLink2</tt>, change:
 * <tt> $more = htmlspecialchars( wfMsg( 'thumbnail-more' ) ); </tt>
 * to
 * <tt> $more = 'view image description page'; </tt>
 * 1) * also in function <tt>makeThumbLink2</tt>, look for <tt> $s .= $thumb->toHtml( array( </tt> and change:
 * <tt> 'desc-link' => true, </tt>
 * to
 * <tt> 'file-link' => true, </tt>
 * and add another key/val pair to that array:
 * <tt> 'longdesc' => $fp['alt'], </tt>
 * 1) Edit <tt>includes/MediaTransformOutput.php</tt>:
 * 2) * in <tt>ThumbnailImage</tt>'s function <tt>toHtml</tt>, look for <tt> } elseif ( !empty( $options['file-link'] ) ) { </tt> and change:
 * <tt> $linkAttribs = array( 'href' => $this->file->getURL ); </tt>
 * to
 * <tt> $info = $this->getDescLinkAttribs( $this->file->name ); </tt>
 * <tt> $linkAttribs = array( </tt>
 * <tt>    'href' => $this->file->getURL, </tt>
 * <tt>    'class' => $options['img-class'], </tt>
 * <tt>    'title' => $info['title'], </tt>
 * <tt>    'longdesc' => '<a href="'.$info['href'].'" title="view image\'s description page">'.$info['title'].'</a>'.($options['longdesc'] ? ': '.$options['longdesc'] : '' ), ); </tt>
 * 1) Edit <tt>includes/ImageGallery.php</tt>:
 * 2) * in function <tt>toHTML</tt>, change:
 * <tt> . $thumb->toHtml( array( 'desc-link' => true ) ) . ' '; </tt>
 * to
 * <tt> . $thumb->toHtml( array( 'file-link' => true, 'img-class' => 'thumbimage[notunique]', 'longdesc' => $text ) ) . ' '; </tt>

Ta-daa. <tt>?action=purge</tt> if you're not seeing it.

Bugs
Images larger than the screen are not resized, and so must be scrolled around; makes for weird image-viewing.

Images across all galleries (if there are more than one in the page) are considered part of the same set.