Do lightbox init in global.js instead of onclicks

classes/imagetools.class.php

@@ -243,7 +243,7 @@ class ImageTools {
       $Lightbox = $Src;
     }
 ?>
-    <img src="<?=$Src?>" width="90" height="90" alt="Cover" onclick="lightbox.init('<?=$Lightbox?>', 90)" />
+    <img src="<?=$Src?>" width="90" height="90" alt="Cover" class="lightbox-init" lightbox-img="<?=$Lightbox?>" />
 <?
   }
 }

classes/text.class.php

@@ -863,9 +863,9 @@ class Text {
           } else {
             $LocalURL = self::local_url($Block['Val']);
             if ($LocalURL) {
-              $Str .= '<img class="scale_image" onclick="lightbox.init(this, $(this).width());" alt="'.$Block['Val'].'" src="'.$LocalURL.'" />';
+              $Str .= '<img class="scale_image lightbox-init" alt="'.$Block['Val'].'" src="'.$LocalURL.'" />';
             } else {
-              $Str .= '<img class="scale_image" onclick="lightbox.init(this, $(this).width());" alt="'.$Block['Val'].'" src="'.ImageTools::process($Block['Val']).'" />';
+              $Str .= '<img class="scale_image lightbox-init" alt="'.$Block['Val'].'" src="'.ImageTools::process($Block['Val']).'" />';
             }
           }
           break;

sections/artist/artist.php

@@ -455,7 +455,7 @@ if (check_perms('site_torrents_notify')) {
     <div class="box box_image">
       <div class="head"><strong><?=$Name?></strong></div>
       <div style="text-align: center; padding: 10px 0px;">
-        <img style="max-width: 220px;" src="<?=ImageTools::process($Image, true)?>" alt="<?=$Name?>" onclick="lightbox.init('<?=ImageTools::process($Image)?>', 220);" />
+        <img style="max-width: 220px;" class="lightbox-init" src="<?=ImageTools::process($Image, true)?>" alt="<?=$Name?>" />
       </div>
     </div>
 <?  } ?>

sections/reportsv2/ajax_new_report.php

@@ -313,7 +313,7 @@ $DB->query("
         $Images = explode(' ', $Images);
         foreach ($Images as $Image) {
     ?>
-              <img style="max-width: 200px;" onclick="lightbox.init(this, 200);" src="<?=ImageTools::process($Image)?>" alt="Relevant image" />
+              <img style="max-width: 200px;" class="lightbox-init" src="<?=ImageTools::process($Image)?>" alt="Relevant image" />
 <?
         } ?>
             </td>

sections/reportsv2/static.php

@@ -573,7 +573,7 @@ if (count($Reports) === 0) {
         $Images = explode(' ', $Images);
         foreach ($Images as $Image) {
 ?>
-            <img style="max-width: 200px;" onclick="lightbox.init(this, 200);" src="<?=ImageTools::process($Image)?>" alt="Relevant image" />
+            <img style="max-width: 200px;" class="lightbox-init" src="<?=ImageTools::process($Image)?>" alt="Relevant image" />
 <?        } ?>
           </td>
         </tr>

sections/requests/request.php

@@ -118,7 +118,7 @@ $encoded_artist = urlencode($encoded_artist);
 <?
     if (!empty($Request['Image'])) {
 ?>
-          <p align="center"><img style="width: 100%;" src="<?=ImageTools::process($Request['Image'], true)?>" alt="<?=$FullName?>" onclick="lightbox.init('<?=ImageTools::process($Request['Image'])?>', 220);" /></p>
+          <p align="center"><img style="width: 100%;" src="<?=ImageTools::process($Request['Image'], true)?>" alt="<?=$FullName?>" class="lightbox-init" /></p>
 <?    } else { ?>
           <p align="center"><img style="width: 100%;" src="<?=STATIC_SERVER?>common/noartwork/<?=$CategoryIcons[$Request['CategoryID'] - 1]?>" alt="<?=$CategoryName?>" class="tooltip" title="<?=$CategoryName?>" height="220" border="0" /></p>
 <?    } ?>

sections/torrents/details.php

@@ -192,7 +192,7 @@ View::show_header($Title, 'browse,comments,torrent,bbcode,recommend,cover_art,su
 <div id="covers">
 <div id="cover_div_<?=$Index?>">
 <?  if ($WikiImage != '') { ?>
-      <div><img width="100%" src="<?=ImageTools::process($WikiImage, true)?>" alt="<?=$AltName?>" onclick="lightbox.init('<?=ImageTools::process($WikiImage)?>', 245);" /></div>
+      <div><img width="100%" class="lightbox-init" src="<?=ImageTools::process($WikiImage, true)?>" alt="<?=$AltName?>" /></div>
 <?  } else { ?>
       <div><img width="100%" src="<?=STATIC_SERVER?>common/noartwork/comedy.png<? /*=$CategoryIcons[$GroupCategoryID - 1]*/ ?>" alt="<?=$Categories[$GroupCategoryID - 1]?>" class="brackets tooltip" title="<?=$Categories[$GroupCategoryID - 1]?>" height="220" border="0" /></div>
 <?
@@ -212,7 +212,7 @@ $Index++;
             $Src = 'src="' . ImageTools::process($Image, true) . '"';
           }
 ?>
-          <img id="cover_<?=$Index?>" width="100%" <?=$Src?> alt="<?=$Summary?>" onclick="lightbox.init('<?=ImageTools::process($Image)?>', 220);" />
+          <img id="cover_<?=$Index?>" class="lightbox-init" lightbox-img="<?=ImageTools::process($Image)?>" width="100%" <?=$Src?> alt="<?=$Summary?>" />
         </div>
         <ul class="stats nobullet">
           <li>
@@ -788,7 +788,7 @@ include(SERVER_ROOT.'/sections/torrents/voter_picks.php');
 <?
     foreach($Screenshots as $Screenshot) {
       $SSURL = ImageTools::process($Screenshot['Image'], false)
-      ?><img class='tooltip' title='<?=Users::format_username($Screenshot['UserID'], false, false, false)?> - <?=time_diff($Screenshot['Time'])?>' onclick="lightbox.init('<?=$SSURL?>', 220);" src="<?=$SSURL?>" /><?
+      ?><img class='tooltip lightbox-init' title='<?=Users::format_username($Screenshot['UserID'], false, false, false)?> - <?=time_diff($Screenshot['Time'])?>' src="<?=$SSURL?>" /><?
     }
 ?>
       </div>

sections/torrents/editgroup.php

@@ -161,7 +161,7 @@ View::show_header('Edit torrent group', 'upload');
               <a onclick="RemoveScreenshotField(this)" class="brackets">&minus;</a>
 <? } ?>
               <br />
-              <img class="tooltip" title='<?=Users::format_username($Screenshot['UserID'], false, false, false)?> - <?=time_diff($Screenshot['Time'])?>' style="width: 30%;" onclick="lightbox.init('<?=$SSURL?>', 220);" src="<?=$SSURL?>" />
+              <img class="tooltip lightbox-init" title='<?=Users::format_username($Screenshot['UserID'], false, false, false)?> - <?=time_diff($Screenshot['Time'])?>' style="width: 30%;" src="<?=$SSURL?>" />
             </div>
             <br />
 <? } ?>

static/functions/global.js

@@ -219,4 +219,10 @@ $(function() {
       }
     })
   })
+
+  document.querySelectorAll('.lightbox-init').forEach(function(el) {
+    el.addEventListener('click', function(event) {
+      lightbox.init(el.attributes['lightbox-img']||el.src, el.attributes['lightbox-size']||el.width)
+    })
+  })
 })