vb.org Archive - vBulletin Attachment Lightbox

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 3.5 Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=155)

- - vBulletin Attachment Lightbox (https://vborg.vbsupport.ru/showthread.php?t=115701)

vBulletin Attachment Lightbox

//////////////////////////////////////////////////////////////////\
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ \\\\\\\\\\\\\\\\/
****LightBox for vBulletin Attachments By: Dave @ FightRice.com****
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ \\\\\\\\\\\\\\\\/
//////////////////////////////////////////////////////////////////\
Ogrinal Version: ALl credit should go there, I Simply ported to vBulletin by myself ;)
View Second Post In Thread for more modifications:

What this hack does is add a nice CSS and Javascript lightbox effect
to your forums attachments. Attachments must be set to shown as thumb-
nails and not inline. Attachments can not be posted using the [attach]
id[/attach] bbCode at this time.

Working Demo(s): (Send me your URL once you get it working) http://www.fightrice.com/forums/showthread.php?t=124

Now Lets Get Started

1. Open your adminCP - Styles and Templates - Template Manager - Postbit
Templates - postbit OR postbit_legacy (only edit both if you use both)
At The Very Top Add

Code:

<!--LightBox By Dave At FightRice -->

<if condition="$show['thumbnailattachment']">

<script type="text/javascript" src="clientscript/prototype.js"></script>

<script type="text/javascript" src="clientscript/scriptaculous.js?load=effects"></script>

<script type="text/javascript" src="clientscript/lightbox.js"></script>

<!-- / Light Box -->

<else />

<!-- Nothing To Load Here-->

</if>

<!-- /LightBox -->

Save and close

2. Next open postbit_attachmentthumbnail find <a after add

Code:

rel="lightbox[attachment]"

Save and close

3. Next Open the headinclude template Find

Code:

Replace with

Code:

<link rel="stylesheet" href="clientscript/vbulletin_css/lightbox.css" type="text/css" media="screen" />

<!-- / CSS Stylesheet -->

Save and close

Thats all for template edits:
Now upload the contents of the clientscript into your forums. You should end up with this structure
/forums/clientscript/vbulletin_css/lightbox.css
/forums/clientscript/ - All the .js files go inside this folder

Next Upload the images into the webroot.ex
http://www.yoursite.com/images/lightboximages.gif (note this isnt an actual image, its an example)

Thats all there should be

User Configuration Options below If you do not feel comfortable doing this, dont
its not neccasary. if you come up with a cool effect please share it.
|||||||||||||||||||||||||||||||||||||||||||||||||| |||||||||||||||||||||||||||||
-------------------------------------------------------------------------------
In the clientscript/lightbox.js file these lines you can config to suite your needs
__________________________________________________ _________________________________

Code:

var fileLoadingImage = "/images/loading.gif";                

var fileBottomNavCloseImage = "/images/closelabel.gif";



var resizeSpeed = 7;        // controls the speed of the image resizing (1=slowest and 10=fastest)



var borderSize = 10;        //if you adjust the padding in the CSS, you will need to update this variable

__________________________________________________ _________________________________
clientscript/vbulletin_css/lightbox.css

Of Course can also be edited to make it unique to your needs.

Thats All, Make sure you click install, and nominate for Hack Of The Month!

If you like and wish to see other cool releases please donate via paypal, marcia@secondhomekennel.com
or a simple link back will rock as well

Code:

<a href="http://www.FightRice.com" target="_blank">Fight Rice</a>

Thank You

CLICK INSTALL TO GET SUPPORT! also a nomination for hack of the month wouldnt hurt :D

THIS IS FOR THE IMAGE RESIZE VERSION - USE lightboxresize.zip DO NOT USE BOTH!

/////////////////////////////////////////////////////////////\
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ \\\\\\\\\\\/
Dynamic Lightbox auto resize - and image overlay.
/////////////////////////////////////////////////////////////\
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ \\\\\\\\\\\/

If using a previous version of this hack, please remove all instances, delete all old files
and undo any templae edits. easy way is to simply follow the old instructions, and simply remove
things instead of add.

This lightbox will automatically resize images to your screen, and all for full size viewing.
Feel free to edit as you see fit.

First Step. open lightbox_plus.js at the very end find

Code:

// === PLEASE EDIT TO MATCH YOUR SITE ===

addEvent(window,"load",function() {

        var lightbox = new LightBox({

                loadingimg:'http://www.YOURSITE.com/images/loading.gif',

                expandimg:'http://www.YOURSITE.com/images/expand.gif',

                shrinkimg:'http://www.YOURSITE.com/images/shrink.gif',

                effectimg:'http://www.YOURSITE.com/images/zzoop.gif',

                effectpos:{x:-40,y:-20},

                effectclass:'effects',

                closeimg:'http://www.YOURSITE.com/images/close.gif'

        });

});

Replace all YOURSITE.com with the actual address you will keep everything. pretty simple.
Save and close.

Create the zzoop.gif image to match your site,

Upload lightbox_plus.js to the /yourforumlocation/clientscript folder

Upload lightbox.css into /yourforumlocation/clientscript/vbulletin_css folder

Upload all images into http://www.YOURSITE.com/images

*MAKE SURE ALL PREVIOUS INSTALLATIONS ARE REMOVED AT THIS POINT*
Login to AdminCP -> Styles Templates -> headinclude template

add at the very end.

Code:

<link rel="stylesheet" href="clientscript/vbulletin_css/lightbox.css" type="text/css" media="screen,tv" />

Save and close

Next open the postbit_attachmentthumbnail

After <a add

Code:

rel="lightbox"

If you want the image overlay, also add (or if you changed the effectclass in lightbox_plus.js use what you changed it to)

Code:

class="effects"

Save, and close.

in the postbit_legacy or postbit, place this code at the very top

Code:

<script type="text/javascript" src="clientscript/lightbox_plus.js"></script>

This should produce similar results to the last one, there is no next or previous buttons though.

Enjoy it.

To Have This LightBox Effect for anything using the [attach]id[/attach] code please do the following file edit:

Open includes/class_bbcode.php, find (around line 1767)

Code:

                                                                        $replace[] = "<a href=\"{$this->registry->options['bburl']}/attachment.php?{$this->registry->session->vars['sessionurl']}attachmentid=\\1&amp;d=$attachment[dateline]\" $addtarget><img src=\"{$this->registry->options['bburl']}/attachment.php?{$this->registry->session->vars['sessionurl']}attachmentid=\\1&amp;thumb=1&amp;d=$attachment[thumbnail_dateline]\" class=\"thumbnail\" border=\"0\" alt=\""

Replace that with this

Code:

                                                                        $replace[] = "<a href=\"{$this->registry->options['bburl']}/attachment.php?{$this->registry->session->vars['sessionurl']}attachmentid=\\1&amp;d=$attachment[dateline]\" $addtarget rel=\"lightbox[attachment]\"><img src=\"{$this->registry->options['bburl']}/attachment.php?{$this->registry->session->vars['sessionurl']}attachmentid=\\1&amp;thumb=1&amp;d=$attachment[thumbnail_dateline]\" class=\"thumbnail\" border=\"0\" alt=\""

DEMO: Same as above link, post #14
*Tested on 3.5.4 Only So Far*

Add File Name Caption:
postbit_attachmentthumbnail, after

Code:

rel="lightbot[attachment]"

Add This after For filename, filesize and times Downloaded

Code:

title="$attachment[filename] - $attachment[filesize] - Downloaded $attachment[counter] times"

Other Variables to put in for a nice effect:
Not sure how to do it with the img code. If you can figure it out please share,

whoa, friggen way PiMp! installs

Quote:

Originally Posted by Kihon Kata

whoa, friggen way PiMp! installs

Dont forget to click install, and vote hack of the month.

Also i think i fixed the permissions to let guests view, if not let me know :D

Very Cool.

A warning to firefox users it will not show. I spent 10 min. Lookign at the site and thinking wht the heck does this do? Noting looks different to me. Then I went to IE and Wa La it was there. Be-U-Ti-Ful :banana:

Check screen

It does not watermark it by any chance does it. . . ;)

EDIT: I jsut tried it in firefox and it worked! Strange.

Anyway Nice Work!

we don't allow guests so no biggie.

The Next/previous images aren't showing up for me

Quote:

Originally Posted by ryancooper

No for watermark, search for the watermark hack released here by me.

Im using latest version of FireFox, and its all working fine,, not sure of the problem, i'll start investigating and see what i can turn up :D

Also thanks for the screen caps :D

works for me in FF with no problem but not in IE7 beta2.

as for the prev and next buttons, i couldn't find them initially either but if you move your mouse onto the pic you'll get the prev or next depending on which side of the image you're on.

Quote:

Originally Posted by Kihon Kata

we don't allow guests so no biggie.

The Next/previous images aren't showing up for me

make sure you move the mouse over toward the left or right side. images should be placed in the forum images directory like so http://www.yousite.com/forums/images/lightboximages.jpg

hope that does it

Quote:

Originally Posted by Ntfu2

I checked your zip and there is no image called lightboximages.jpg

EDIT: Sorry I see what you mean. I have the images in my forums/images directory. Still not next/prev images

WOW Everything works like a charm but no next and prev images either...

ie7 takes a minute to load the js files but works. this is awesome. nice work

Quote:

Originally Posted by Kihon Kata

I checked your zip and there is no image called lightboximages.jpg

EDIT: Sorry I see what you mean. I have the images in my forums/images directory. Still not next/prev images

hmm ok, do you have a link and possibly a test account so i can see attachments?

I also am seeing slow loading..FF and IE

give the js files a second or two to load,

Not sure how/if they get cached, but after that they should load faster

Quote:

Originally Posted by Ntfu2

hmm ok, do you have a link and possibly a test account so i can see attachments?

check PMs

something is messed up for me. See Pic...

when I clic kmanage attachemnbts iget the following:

Any ideas??

when i remove

Code:



<!--Light Box By Dave At FightRice -->

<script type="text/javascript" src="clientscript/prototype.js"></script>

<script type="text/javascript" src="clientscript/scriptaculous.js?load=effects"></script>

<script type="text/javascript" src="clientscript/lightbox.js"></script>

I do not get that error???

Works great!!! ;)
[high]* BANDiT600 Installed![/high]

Quote:

Originally Posted by ryancooper

something is messed up for me. See Pic...

when I clic kmanage attachemnbts iget the following:

Any ideas??

when i remove

Code:



<!--Light Box By Dave At FightRice -->

<script type="text/javascript" src="clientscript/prototype.js"></script>

<script type="text/javascript" src="clientscript/scriptaculous.js?load=effects"></script>

<script type="text/javascript" src="clientscript/lightbox.js"></script>

I do not get that error???

i see that now as well.

Wonder how i can get rid of it...off to testing

its somewhere in this peice of code
<script type="text/javascript" src="clientscript/prototype.js"></script>

so now i'm examing the protoype.js file, hopeful to have a fix soon

Quote:

Originally Posted by Ntfu2

i see that now as well.

Wonder how i can get rid of it...off to testing

good i am glad it is not just me! LOL

Anyone that can not view the next and previous images.

Please see first post with new CSS and directions

Uninstalled for now. I love this hack, it just slows down my site too much when I spent tons of time speeding it up. It's a pimp mod, but possibly just not for me.

works for me (except the manage attachments error that was noted. still works fine, just a visual thing).

*clicks install

not working

Same error

hmm also no matter what I do I can not get the next and previous images to show. In the attached pic my mouse is actuly at the very right of the pic.

did you view the second post, i actually put it to use.

I think i am going to release a version without the next buttons, and hopefully it doesnt cause all the bugs :d

Any idea about the other error? I am still getting a bunch of undefined (undefined) errors

I hope this get fixed. THis is one of my alltime favorite hacks! :)

open the includes\class_bbcode.php and find

PHP Code:


		
			
function handle_bbcode_img_match($link)

    {

        $link = $this->strip_smilies(str_replace('\\"', '"', $link));



        // remove double spaces -- fixes issues with wordwrap

        $link = str_replace('  ', '', $link);



        return '<img src="' .  $link . '" border="0" alt="" />';

    }

and replace it with

PHP Code:


		
			
function handle_bbcode_img_match($link)

    {

        $link = $this->strip_smilies(str_replace('\\"', '"', $link));

        // remove double spaces -- fixes issues with wordwrap

        $link = str_replace('  ', '', $link);

        if ($NLP = @getimagesize($link))

        {

            if($NLP[0] > 500)

            {

                $NLP_W = $NLP[0] / 2;

                $NLP_H = $NLP[1] / 2;

                return '<table width="' . $NLP_W . '" border="0" cellspacing="0" cellpadding="0"><tr><td style="border: 1px solid #ABABAB"><a href="' .  $link . '" rel="lightbox" title="picture width in its full size"><img src="' .  $link . '" width="' . $NLP_W . '" height="' .  $NLP_H . '" border="0" alt="press here to view the picture in its original size" /></a></td></tr><tr><td align=center><a href="' .  $link . '" rel="lightbox" title="view the picture in its full size"><img border="0" src="images/NLP_button.gif"></a></td></tr></table>';

            }

            else

            {

                return '<img src="' .  $link . '" border="0" alt="" />';

            }



         }

         else

         {

             return '<img src="' .  $link . '" border="0" alt="" />';

         }

    }

Quote:

Originally Posted by Barakat

open the includes\class_bbcode.php and find

PHP Code:


		
			
function handle_bbcode_img_match($link)

    {

        $link = $this->strip_smilies(str_replace('\\"', '"', $link));



        // remove double spaces -- fixes issues with wordwrap

        $link = str_replace('  ', '', $link);



        return '<img src="' .  $link . '" border="0" alt="" />';

    }

and replace it with

PHP Code:


		
			
function handle_bbcode_img_match($link)

    {

        $link = $this->strip_smilies(str_replace('\\"', '"', $link));

        // remove double spaces -- fixes issues with wordwrap

        $link = str_replace('  ', '', $link);

        if ($NLP = @getimagesize($link))

        {

            if($NLP[0] > 500)

            {

                $NLP_W = $NLP[0] / 2;

                $NLP_H = $NLP[1] / 2;

                return '<table width="' . $NLP_W . '" border="0" cellspacing="0" cellpadding="0"><tr><td style="border: 1px solid #ABABAB"><a href="' .  $link . '" rel="lightbox" title="picture width in its full size"><img src="' .  $link . '" width="' . $NLP_W . '" height="' .  $NLP_H . '" border="0" alt="press here to view the picture in its original size" /></a></td></tr><tr><td align=center><a href="' .  $link . '" rel="lightbox" title="view the picture in its full size"><img border="0" src="images/NLP_button.gif"></a></td></tr></table>';

            }

            else

            {

                return '<img src="' .  $link . '" border="0" alt="" />';

            }



         }

         else

         {

             return '<img src="' .  $link . '" border="0" alt="" />';

         }

    }

That didn't work???

this is the same hack with a small changes....
to resize the picture to a small view and after pressing on it it will open in its original size >

u can increase or decrease the size pic code

PHP Code:


		
			
if($NLP[0] > 500)

make it 800 or 400 and it will work perfect .

and about the picture u can do like it and write inside it

press here to view the picture in its original size or what ever u want to wirte inside it <>

you will save you style in a nice way

Great! I love it!

Doesn't work for me with FF on my site (although it did on the demo site).

tei727, did you give the js files time to load? i had the same issue but doing a control-F5 and letting the javascript fully load did the trick

I have returned with a fix..i think

Open your HeadInclude template.

Erase

Code:

<!--Light Box By Dave At FightRice -->

<script type="text/javascript" src="clientscript/prototype.js"></script>

<script type="text/javascript" src="clientscript/scriptaculous.js?load=effects"></script>

<script type="text/javascript" src="clientscript/lightbox.js"></script>

Go to Your Postbit Template (note i've only tested on postbit legacy)
At the very top add

Code:

<!--Light Box By Dave At FightRice -->

<script type="text/javascript" src="clientscript/prototype.js"></script>

<script type="text/javascript" src="clientscript/scriptaculous.js?load=effects"></script>

<script type="text/javascript" src="clientscript/lightbox.js"></script>

Save

*Note sure if this will save resources or not, but my thinking is it will not call upon the javascript files unless needed in postbit*
Use this code instead

Code:

<if condition="$show['thumbnailattachment']">

<!--Light Box By Dave At FightRice -->

<script type="text/javascript" src="clientscript/prototype.js"></script>

<script type="text/javascript" src="clientscript/scriptaculous.js?load=effects"></script>

<script type="text/javascript" src="clientscript/lightbox.js"></script>

<!-- / Light Box -->

<else />

<!-- Nothing To See Here Folks -->

</if>

Quote:

Originally Posted by Microstats With Attachments in post

Page generated in 0.37192 seconds with 12 queries [Server Loads: 18.55 27.73 : 23.86]

*Please note server load is not due to this hack, its from me running a gazillion sites at one time right now :D*

Quote:

Originally Posted by Microstats With-Out Attachments in post

Page generated in 0.19489 seconds with 11 queries [Server Loads: 24.73 26.15 : 23.72]

Hopefully that will speed things up for users
Report back

Well that got rid of the iundefined problem But now in forefox it shows the opening screen then jumps to the image. In IE it works great.

Did I miss something?

when you say it jumps to the image... it's opening the image where? in a new window?

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01630 seconds Memory Usage 1,895KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (20)bbcode_code_printable (5)bbcode_php_printable (11)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (2)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (40)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.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/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: