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:
   • make sure fileLoadingImage and fileBottomNavCloseImage are referencing where loading.gif and closelabel.gif actually are
   • change all instances of 'rel' to 'class'
   • change all instances of match('lightbox') to match('thumbimage')
   • change if((imageLink.getAttribute('class') == 'lightbox')){ to if((imageLink.getAttribute('class') == 'thumbimage')){
   • in function updateImageList(), in the first for loop, duplicate the if block but change match('thumbimage') to match('image')
   • in function start(), look for if((imageLink.getAttribute('class') == 'thumbimage')){ and change:

     imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));

     to

     imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('longdesc')));

     and a few lines later in the for loop, change:

     imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));

     to

     imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('longdesc')));

4. Edit includes/Linker.php:
   • in function makeThumbLink2(), change:

     $more = htmlspecialchars( wfMsg( 'thumbnail-more' ) );

     to

     $more = 'view image description page';

   • also in function makeThumbLink2(), look for $s .= $thumb->toHtml( array( and change:

     'desc-link' => true,

     to

     'file-link' => true,

     and add another key/val pair to that array:

     'longdesc' => $fp['alt'],

5. Edit includes/MediaTransformOutput.php:
   • in ThumbnailImage's function toHtml(), look for } elseif ( !empty( $options['file-link'] ) ) { and change:

     $linkAttribs = array( 'href' => $this->file->getURL() );

     to

     $info = $this->getDescLinkAttribs( $this->file->name );

     $linkAttribs = array(

          'href' => $this->file->getURL(),

          'class' => $options['img-class'],

          'title' => $info['title'],

          'longdesc' => '<a href="'.$info['href'].'" title="view image\'s description page">'.$info['title'].'</a>'.($options['longdesc'] ? ': '.$options['longdesc'] : '' ), );

6. Edit includes/ImageGallery.php:
   • in function toHTML(), change:

     . $thumb->toHtml( array( 'desc-link' => true ) ) . '</div></div>';

     to

     . $thumb->toHtml( array( 'file-link' => true, 'img-class' => 'thumbimage[notunique]', 'longdesc' => $text ) ) . '</div></div>';

Ta-daa. ?action=purge 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.