FANDOM


  • FANDOM's Galleries have a bit of shortcoming: when someone click on an image and open up the lightbox, the gallery caption associated to that image is not displayed. Many times the caption is essential to understand the image, so it's a bit of a drawback (you cannot navigate the gallery from the lightbox because you have to close it every time you want to check the caption).

    Since I doubt FANDOM will work on this, I was wondering if anyone here would be able to come up with a custom JS solution to fix this. Is this possible? Does anyone want to do it?

      Loading editor
    • this code adds title to thumbs. https://snag.gy/DelsZ6.jpg

      $(function() {
          var $galleries = $('div.wikia-gallery');
          if (!$galleries.length) return;
          $(window).on('lightboxOpened', function() {
              //w8. not loaded yet
              setTimeout(function() {
                  var $lb = $('#LightboxModal');
                  if (!$lb.length) return;
                  $lb.find('#LightboxCarouselContainer .carousel li').each(function(i, v) {
                      var $v = $(v);
                      if($v.hasClass('more-items')) {
                          return false;
                      } else {
                          var $img = $v.find('img');
                          var imgName = $img.attr('src').replace(/.*\/(.*?)\/revision\/.*/, '$1');
                          var caption = $galleries.find('.lightbox img[data-image-key="' + imgName + '"]').closest('.wikia-gallery-item').find('.lightbox-caption').text();
                          //2nd chck. needed when $(el).data('name') !== $(el).attr('data-name')
                          if (!caption) {
                              $galleries.find('img').each(function(i ,v) {
                                  var $v = $(v);
                                  if ($v.data('imageKey') === imgName) {
                                      caption = $v.closest('.wikia-gallery-item').find('.lightbox-caption').text();
                                      return false;
                                  }//if imgname
                              });//each img
                          }
                          //sanitize
                          caption = caption.replace(/(<([^>]+)>)/ig, '');
                          $img.attr('title', caption);
                      }//if
                  });//each li
              }, 1000);//timeout
          });//lightboxOpened
      });

      note: if image used more than once on page, then only 1st caption will be used. also, all html-tags will be removed.

        Loading editor
    • Ty! Could you make a version for the New Image Galleries though? Here a sample page.

        Loading editor
    • for both types

      $(function() {
          var $galleries;
          if (window.wgEnableMediaGalleryExt) {
              $galleries = $('div.media-gallery-wrapper');
          } else {
              $galleries = $('div.wikia-gallery');
          }//if new gallery
          if (!$galleries.length) return;
          $(window).on('lightboxOpened', function() {
              //w8. not loaded yet
              setTimeout(function() {
                  var $lb = $('#LightboxModal');
                  if (!$lb.length) return;
                  $lb.find('#LightboxCarouselContainer .carousel li').each(function(i, v) {
                      var $v = $(v);
                      if($v.hasClass('more-items')) {
                          return false;
                      } else {
                          var $img = $v.find('img');
                          var imgName = $img.attr('src').replace(/.*\/(.*?)\/revision\/.*/, '$1');
                          var caption;
                          if (window.wgEnableMediaGalleryExt) {
                              $.each($galleries, function(i, v) {
                                  var data = $(v).data('model');
                                  if (!data) return;
                                  $.each(data, function(i, v) {
                                      var imgname = v.thumbUrl.replace(/.*\/(.*?)\/revision\/.*/, '$1');
                                      if (imgname === imgName) {
                                          caption = v.caption;
                                          return false;
                                      }
                                  });//each data
                                  if (caption) return false;
                              });//each galleries
                          } else {
                              caption = $galleries.find('.lightbox img[data-image-key="' + imgName + '"]').closest('.wikia-gallery-item').find('.lightbox-caption').text();
                              //2nd chck. needed when $(el).data('name') !== $(el).attr('data-name')
                              if (!caption) {
                                  $galleries.find('img').each(function(i, v) {
                                      var $v = $(v);
                                      if ($v.data('imageKey') === imgName) {
                                          caption = $v.closest('.wikia-gallery-item').find('.lightbox-caption').text();
                                          return false;
                                      }//if imgname
                                  });//each img
                              }
                          }//if new gallery
                          //sanitize
                          caption = (caption || '').replace(/(<([^>]+)>)/ig, '');
                          $img.attr('title', caption);
                      }//if
                  });//each li
              }, 1000);//timeout
          });//lightboxOpened
      });
      
        Loading editor
    • Ty! You should make a script here for that!

        Loading editor
    •   Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.