Go Back   vb.org Archive > vBulletin Modifications > Archive > vB.org Archives > vBulletin 3.7 > vBulletin 3.7 Template Modifications
FAQ Community Calendar Today's Posts Search

Reply
 
Thread Tools
Lytebox Intergration. Allows image groups, slideshows and works with embeded images. Details »»
Lytebox Intergration. Allows image groups, slideshows and works with embeded images.
Version: 1.20, by D.Baker D.Baker is offline
Developer Last Online: Oct 2008 Show Printable Version Email this Page

Category: Integration with vBulletin - Version: 3.7.0 Rating:
Released: 05-20-2008 Last Update: Never Installs: 9
Template Edits
Re-useable Code Additional Files Translations  
No support by the author.

This mod has be made redundant by The Image Resizer 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. 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.

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:
HTML Code:
images
for:
HTML Code:
../images/lytebox
4) 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:
HTML Code:
rel="Lightbox"
with:
HTML Code:
rel="lytebox"
If you want to use the image group feature then replace
HTML Code:
rel="Lightbox"
with:
HTML Code:
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
HTML Code:
rel="Lightbox"
with:
HTML Code:
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:

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:

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 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".

PHP Code:
return '<img src="' .  $link '" border="0" alt="" />'
change to:

PHP Code:
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.

Code:
.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 from the vB team.
Thanks to Lost Heaven for coming up with the code I used in step 13.
Of course, thanks to Markus F. Hay for Lytebox.

Show Your Support

  • This modification may not be copied, reproduced or published elsewhere without author's permission.

Comments
  #22  
Old 05-24-2008, 01:35 PM
D.Baker D.Baker is offline
 
Join Date: May 2008
Posts: 64
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

If you'd prefer to remove the warning tabs permanently, you can do it by commenting out (put a // in front of the code) lines 111 to 149 in Image Resizer's, "ncode_imageresizer.js" file although I'm not sure how legal that is due to copyrights.

My mod/hack/whatever isn't perfect yet. The Image Resizer plugin is not at all xhtml valid (but then again, neither is vBulletin) which bugs me (I like to know I've done it 100% right). Also, there should be a margin of 2px around the images, but I can't get Image Resizer to accept inline styles (like vB applies to all attached images). I just don't know enough about JavaScript.

The other thing is, I hate having to edit edit templates enough, and I personally draw the line at editing core files outside of the vB AdminCP. So I have decided that personally won't use the method described in step 13. I'm just going to have those images non-lyteboxed untill I figure something else out. There are two reasons for this. Firstly, any vB updates in the future to that file will remove that code, and secondly, it's not xhtml valid and the code it generates is messy (which is even more messy thanks to Image Resizers invalid code).

Hopefully JASE gets back to me (or someone else who knows JavaScript) about tweaking his file to include a rel=lytebox[group] tag in the image embed code.

But for people who don't care about those kinds of things, this mod works pretty close to perfect (everything except the 2px margin IMG embeds) for embedding images using ATTACH, IMG and by attaching images to a post. It will display lyteshows or grouped images.
Reply With Quote
  #23  
Old 05-25-2008, 10:12 AM
pedroenf pedroenf is offline
 
Join Date: Jun 2006
Location: Portugal
Posts: 308
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

I there. Is there any way to increase the size of the images in lytebox? What i mean is when we click the image it won't get the original size so, consequently, the image looses some quality. I have my image permissions to allow 1024*1024 images (in attachments). Thanks.
Reply With Quote
  #24  
Old 05-25-2008, 12:03 PM
D.Baker D.Baker is offline
 
Join Date: May 2008
Posts: 64
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Hey pedroenf, you set that in lytebox.js.

There is a line about auto resizing images, set it to false. That will mean images will enlarge to their real size. It's a problem for people with smaller screens, but 1024*1024 is borderline OK.
Reply With Quote
  #25  
Old 05-25-2008, 02:04 PM
pedroenf pedroenf is offline
 
Join Date: Jun 2006
Location: Portugal
Posts: 308
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Thanks D.Baker.
Reply With Quote
  #26  
Old 07-01-2008, 07:41 AM
BeerLuver's Avatar
BeerLuver BeerLuver is offline
 
Join Date: Mar 2002
Location: Green Bay, WI, US
Posts: 69
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Great mod, but one thing I am curious about. I set it up to resize images posted using the IMG tags, BUT how would I get it to NOT include the images members post in their signatures using the IMG tags? So when they want to browse through all images in a thread posted via IMG tags within their posts, it won't include the signature images as well? Any ideas on how to get around that or exclude those?
Reply With Quote
  #27  
Old 07-05-2008, 02:14 AM
D.Baker D.Baker is offline
 
Join Date: May 2008
Posts: 64
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Hey BeerLuver,
That's a tough one. Step 13 is what's causing that. I myself have decided not to use this with the Image Resizer mod because of that very reason (and because I don't like editing core files), meaning I just skipped step 13 and 14See an example of the end result here. I've been trying to get Jase2 to get his mod working with Lightbox (the version that comes with vB) and that way it would also work with this mod (or at least I'd then be able to figure out how to get it working with this mod), but he hasn't done it yet.

So, the way this mod works at the moment is if you want to have IMG images open as a group using lytebox, then your signatures will too. Sorry, I wish I was smarter.

If anyone knows a little about JavaScript I'm sure it would be super easy to tweak Jase2's code to work with my mod, I can help jsut let me know what you need.
Reply With Quote
  #28  
Old 07-05-2008, 02:43 AM
BeerLuver's Avatar
BeerLuver BeerLuver is offline
 
Join Date: Mar 2002
Location: Green Bay, WI, US
Posts: 69
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

I'm wondering if there is some type of IF statement that could be used to ignore any images within the signature bits of code? I'm not very code savvy myself, so I wouldn't know how to get that working either heh. Or it'd be nice if the Lytebox could be set to work on individual images; not as a group, so when they click on one image, that's the only image it displays then. That might work for a work-around idea.
Reply With Quote
  #29  
Old 07-06-2008, 01:56 AM
D.Baker D.Baker is offline
 
Join Date: May 2008
Posts: 64
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Hey BeerLuver,
I wish I knew more coding.

As for getting a single image to open rather than a group, that is easy. See step 6 of my hack/mod above.

-Baker
Reply With Quote
  #30  
Old 07-06-2008, 06:58 AM
BeerLuver's Avatar
BeerLuver BeerLuver is offline
 
Join Date: Mar 2002
Location: Green Bay, WI, US
Posts: 69
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Well, for now, I disabled the IMG bb code in signatures and allowed HTML image linking instead. I know it's not a safer way, but if I wanna use the lytebox with the IMG tag, needed to enable html in sigs and disable the img tag in sigs cause otherwise, if ya clicked on a linked image in someone's sig... it's only open that image in lytebox, and not actually open the link. I have close moderation of the forums too, so I'm not too concerned for misuse of the signatures with html, and any malicious use of em... automatic permanent ban for that person then heh.

Thanks for all your hard work on this mod though .
Reply With Quote
  #31  
Old 07-08-2008, 11:51 AM
Walter Ronny Walter Ronny is offline
 
Join Date: Apr 2008
Posts: 47
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

this will works in the last version 3.7.1?
Reply With Quote
Reply


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 04:56 AM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.08404 seconds
  • Memory Usage 2,331KB
  • Queries Executed 27 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (3)bbcode_code
  • (8)bbcode_html
  • (2)bbcode_php
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_post
  • (1)navbar
  • (6)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (3)pagenav_pagelink
  • (11)post_thanks_box
  • (11)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (11)post_thanks_postbit_info
  • (10)postbit
  • (11)postbit_onlinestatus
  • (11)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • fetch_musername
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete