D.Baker
05-20-2008, 10:00 PM
This mod has be made redundant by The Image Resizer (https://vborg.vbsupport.ru/showthread.php?t=184571) by TCattitude. So, I no longer support it and recommend you use his plugin instead, it's much better!
This isn't the best mini-mod out there, and I'm not even sure if it's technically a mod. It's closer to a "how to" document than a mod. This works better than most of the proper Lytebox mods out there as it allows image grouping or slideshows (can't have both) and works with images embeded in posts (using ATTACH BBcode, or the little paper clip) . I'm not sure if it works with images in signatures, try it out and let me know. It does not do anything to images embedded using the IMG BBcode (it only works on images linked to by a thumbnail).
LIVE DEMO: Here (http://forums.popmag.com.au/showthread.php?p=37#post37). Note that I am using the image group feature instead of the slideshow feature.
Anyway, here it is.
If you would like to get Lytebox working with vB 3.7.0 (this should work with other versions, but this is all I have tested it on). You need to do the following.
1) Download latest version of Lytebox here (http://www.dolem.com/lytebox/).
2) Edit lytebox.js to your desired settings (can just leave as default if you want).
3) Edit lytebox.css using a find-and-replace tool (even Notepad will do this). You need to swap all the words: images for: ../images/lytebox4) Upload lytebox's images folder to "/images/lytebox" using FTP.
5) Upload lytebox.js and lytebox.css to "/clientscript" using FTP.
6) In AdminCP, go to Styles & Templates>Replacement Variable Manager and create a new replacment variable. Set it to replace: rel="Lightbox" with: rel="lytebox"If you want to use the image group feature then replace rel="Lightbox" with: rel="lytebox[group]" This will make all attached/embeded images in the one thread display in lytebox as a group (I am still working on how to make only images from the one post group).
If you want to use the lyteshow feature then replace rel="Lightbox" with: rel="lyteshow[group]" This will make all attached/embeded images in the one thread display in lytebox as a slidshow (I am still working on how to rhis with only images from the one post ). 7) In AdminCP, go Style Manager>Edit Templates>Show Thread Templates>SHOWTHREAD. Click Customize (or Edit) and replace the following code:
<if condition="$show['lightbox']">
<!-- lightbox scripts -->
<script type="text/javascript" src="clientscript/vbulletin_lightbox.js?v=$vboptions[simpleversion]"></script>
<script type="text/javascript">
<!--
vBulletin.register_control("vB_Lightbox_Container", "posts", $vboptions[lightboxenabled]);
//-->
</script>
<!-- / lightbox scripts -->
</if>with this code:
<if condition="$show['lightbox']">
<!-- lightbox scripts -->
<script type="text/javascript" language="javascript" src="clientscript/lytebox.js"></script>
<link rel="stylesheet" href="clientscript/lytebox.css" type="text/css" media="screen" />
<!-- / lightbox scripts -->
</if>8) You need to move the above code into the head section of the SHOWTHREAD template. To do this, you simply cut it and paste it right above the <HEAD> tag.
9) Repeat steps 7 and 8 for the SHOWTHREAD_SHOWPOST template. You can find this template by going into Style Manager>Edit Templates>Show Thread Templates>SHOWTHREAD_SHOWPOST. This will get lytebox working on the individual post page.
10) In AdminCP you need to turn on thumbnails and Lightbox (note that it refers to Lightbox, not lytebox. This is OK). You can do this in the AdminCP at vBulletin Options>Message Attachment Options.
11) Make sure that your images aren't set to load in a New Window. You can change this in the AdminCP at Attachments>Attachments Manager.
12) To enable images embedded using the IMG tag to be resized and enlarged using lytebox, you need to install JASE2's Image Resizer (https://vborg.vbsupport.ru/showthread.php?t=176531) plugin from here and make some code changes.Make sure you you set Image Resizer to enlarge images in a new window. You do this in AdminCP vBulletin Options>Image Resizer Options>Default Resize Mode and set it to "Open in new window". You also need to set the size you want the IMG embedded images resized to (I set them to the same as my thumbnail settings).
13) Using FTP, browse to /includes/ and edit the following line of PHP code in the file "class_bbcode.php".
return '<img src="' . $link . '" border="0" alt="" />';change to:
return '<a target="_blank" href="' . $link . '" rel="lytebox[group]"><img src="' . $link . '" border="0" alt="" /></a>';NOTE: If you want to use the slideshow feature, simply use rel="lyteshow[group]" rather than rel="lytebox[group]".
14) To remove the yellow warning box from images embedded using IMG tags, add the following CSS to your style.
.ncode_imageresizer_warning {
display: none;
}
v1.2
Provides a way to resize images embedded using IMG. It's not perfect, but it works in the meantime.
v1.1
Works when viewing a single post.
Allows for slideshows using lyteshow.
Credits:
Thanks to Andy Huang (http://www.vbulletin.com/forum/member.php?u=42534) from the vB team.
Thanks to Lost Heaven (https://vborg.vbsupport.ru/member.php?u=199366) for coming up with the code I used in step 13.
Of course, thanks to Markus F. Hay (http://www.dolem.com/lytebox/) for Lytebox.
This isn't the best mini-mod out there, and I'm not even sure if it's technically a mod. It's closer to a "how to" document than a mod. This works better than most of the proper Lytebox mods out there as it allows image grouping or slideshows (can't have both) and works with images embeded in posts (using ATTACH BBcode, or the little paper clip) . I'm not sure if it works with images in signatures, try it out and let me know. It does not do anything to images embedded using the IMG BBcode (it only works on images linked to by a thumbnail).
LIVE DEMO: Here (http://forums.popmag.com.au/showthread.php?p=37#post37). Note that I am using the image group feature instead of the slideshow feature.
Anyway, here it is.
If you would like to get Lytebox working with vB 3.7.0 (this should work with other versions, but this is all I have tested it on). You need to do the following.
1) Download latest version of Lytebox here (http://www.dolem.com/lytebox/).
2) Edit lytebox.js to your desired settings (can just leave as default if you want).
3) Edit lytebox.css using a find-and-replace tool (even Notepad will do this). You need to swap all the words: images for: ../images/lytebox4) Upload lytebox's images folder to "/images/lytebox" using FTP.
5) Upload lytebox.js and lytebox.css to "/clientscript" using FTP.
6) In AdminCP, go to Styles & Templates>Replacement Variable Manager and create a new replacment variable. Set it to replace: rel="Lightbox" with: rel="lytebox"If you want to use the image group feature then replace rel="Lightbox" with: rel="lytebox[group]" This will make all attached/embeded images in the one thread display in lytebox as a group (I am still working on how to make only images from the one post group).
If you want to use the lyteshow feature then replace rel="Lightbox" with: rel="lyteshow[group]" This will make all attached/embeded images in the one thread display in lytebox as a slidshow (I am still working on how to rhis with only images from the one post ). 7) In AdminCP, go Style Manager>Edit Templates>Show Thread Templates>SHOWTHREAD. Click Customize (or Edit) and replace the following code:
<if condition="$show['lightbox']">
<!-- lightbox scripts -->
<script type="text/javascript" src="clientscript/vbulletin_lightbox.js?v=$vboptions[simpleversion]"></script>
<script type="text/javascript">
<!--
vBulletin.register_control("vB_Lightbox_Container", "posts", $vboptions[lightboxenabled]);
//-->
</script>
<!-- / lightbox scripts -->
</if>with this code:
<if condition="$show['lightbox']">
<!-- lightbox scripts -->
<script type="text/javascript" language="javascript" src="clientscript/lytebox.js"></script>
<link rel="stylesheet" href="clientscript/lytebox.css" type="text/css" media="screen" />
<!-- / lightbox scripts -->
</if>8) You need to move the above code into the head section of the SHOWTHREAD template. To do this, you simply cut it and paste it right above the <HEAD> tag.
9) Repeat steps 7 and 8 for the SHOWTHREAD_SHOWPOST template. You can find this template by going into Style Manager>Edit Templates>Show Thread Templates>SHOWTHREAD_SHOWPOST. This will get lytebox working on the individual post page.
10) In AdminCP you need to turn on thumbnails and Lightbox (note that it refers to Lightbox, not lytebox. This is OK). You can do this in the AdminCP at vBulletin Options>Message Attachment Options.
11) Make sure that your images aren't set to load in a New Window. You can change this in the AdminCP at Attachments>Attachments Manager.
12) To enable images embedded using the IMG tag to be resized and enlarged using lytebox, you need to install JASE2's Image Resizer (https://vborg.vbsupport.ru/showthread.php?t=176531) plugin from here and make some code changes.Make sure you you set Image Resizer to enlarge images in a new window. You do this in AdminCP vBulletin Options>Image Resizer Options>Default Resize Mode and set it to "Open in new window". You also need to set the size you want the IMG embedded images resized to (I set them to the same as my thumbnail settings).
13) Using FTP, browse to /includes/ and edit the following line of PHP code in the file "class_bbcode.php".
return '<img src="' . $link . '" border="0" alt="" />';change to:
return '<a target="_blank" href="' . $link . '" rel="lytebox[group]"><img src="' . $link . '" border="0" alt="" /></a>';NOTE: If you want to use the slideshow feature, simply use rel="lyteshow[group]" rather than rel="lytebox[group]".
14) To remove the yellow warning box from images embedded using IMG tags, add the following CSS to your style.
.ncode_imageresizer_warning {
display: none;
}
v1.2
Provides a way to resize images embedded using IMG. It's not perfect, but it works in the meantime.
v1.1
Works when viewing a single post.
Allows for slideshows using lyteshow.
Credits:
Thanks to Andy Huang (http://www.vbulletin.com/forum/member.php?u=42534) from the vB team.
Thanks to Lost Heaven (https://vborg.vbsupport.ru/member.php?u=199366) for coming up with the code I used in step 13.
Of course, thanks to Markus F. Hay (http://www.dolem.com/lytebox/) for Lytebox.