vBulletin Attachment Lightbox

[Ntfu2]

//////////////////////////////////////////////////////////////////\
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ \\\\\\\\\\\\\\\\/
****LightBox for vBulletin Attachments By: Dave @ FightRice.com****
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ \\\\\\\\\\\\\\\\/
//////////////////////////////////////////////////////////////////\
Ogrinal Version: (http://www.huddletogether.com/projects/lightbox2/) 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
id 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

<!--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

rel="lightbox[attachment]"

Save and close

3. Next Open the headinclude template Find

<!-- / CSS Stylesheet -->


Replace with

<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
__________________________________________________ _________________________________

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

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

Thank You

CLICK INSTALL TO GET SUPPORT! (https://vborg.vbsupport.ru/vborg_miscactions.php?do=installhack&threadid=115701) 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

// === 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.

<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

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)

class="effects"


Save, and close.

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

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

[Ntfu2]

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

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

$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

$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

rel="lightbot[attachment]"

Add This after For filename, filesize and times Downloaded

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,

[Kihon Kata]

whoa, friggen way PiMp! installs

[Ahsin1]

Kool should be HTM

[Ntfu2]

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

[ryancooper]

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!

[Kihon Kata]

we don't allow guests so no biggie.

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

[Ntfu2]

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!

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

[Dr.Viggy]

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.

[Ntfu2]

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

[Ahsin1]

not working for me

[Mr Chad]

Holy Shit :)

[Kihon Kata]

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

[ryancooper]

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

[Dr.Viggy]

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

[DJ XtAzY]

Awesome Effect!

[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


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

[Kihon Kata]

I also am seeing slow loading..FF and IE

[Ntfu2]

give the js files a second or two to load,

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

[Kihon Kata]

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

[ryancooper]

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

when I clic kmanage attachemnbts iget the following:

Any ideas??

when i remove

<!--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???

[BANDiT600]

Works great!!! ;)
* BANDiT600 Installed!

[Ntfu2]

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

when I clic kmanage attachemnbts iget the following:

Any ideas??

when i remove

<!--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

[ryancooper]

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

[Ntfu2]

Anyone that can not view the next and previous images.

Please see first post with new CSS and directions

[Kihon Kata]

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.

[Dr.Viggy]

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

*clicks install

[Ahsin1]

not working

Same error

[ryancooper]

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.

[Ntfu2]

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

[ryancooper]

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! :)

[Barakat]

open the includes\class_bbcode.php and find


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

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="" />';
}
}

[ryancooper]

open the includes\class_bbcode.php and find


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

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???

[Barakat]

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

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

[tei727]

Great! I love it!

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

[Dr.Viggy]

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

[Ntfu2]

I have returned with a fix..i think

Open your HeadInclude template.

Erase

<!--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

<!--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

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



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*

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

[MentaL]

cool O_o

[ryancooper]

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?

[Dr.Viggy]

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

[ryancooper]

It opens the images in the same window.

see here:

http://www.talkdisney.com/forums/showthread.php?p=339416#post339416

[Dr.Viggy]

you don't have guests set to view attachments so i get a login screen...

[ryancooper]

Duh. Sorry about that. Changed. . . ;)

[Ntfu2]

still working good in firefox for me on your site.

Try pressing CTRL+F5

[Dr.Viggy]

and i tested in ie7 with no problems

[Impreza04]

Working for me.. and strangly I was planning to request this soon but this does exactly what I wanted.

* Impreza04 Nominates for HOTM

Anyway you can reduce the size of the JS files & get thumbnails shown via BBCode to display like this :)

Good Job

[sensimilla]

Does it work with your previous hack https://vborg.vbsupport.ru/showthread.php?t=115076 ?

TIA

[Ntfu2]

Yes it should, but i dont have both installed at the same time right now

[ryancooper]

still working good in firefox for me on your site.


Try pressing CTRL+F5


I will have to take your word. for the life of me i cant get it to work on firefox at work. I deleted cache, cookies, did the F5.

Must be something with my borwser at work.


THanks!!

[TeddyKGB]

Hopefully someone can kindly assist me. I followed the steps on the first post of the thread (instead of the attached txt file), then uploaded the files to the appropriate folders. I then attached a sample thumbnail but when I click on it all it does is open the image on a white page, no cool effects.

Here is the sample

Sample thumbnail (http://www.theclemsonboard.com/showthread.php?p=11476#post11476)

Thank you in advance for any help.

[bashy]

This is brill and works well in FF 1.5 and IE 7 beta :)
Well done m8, if i see it it will be voted for :)

[bashy]

Your jpg is not showing as a thumbnail, also i cannot see the image as a guest...so i cant look to see whats happened sorry!!


Hopefully someone can kindly assist me. I followed the steps on the first post of the thread (instead of the attached txt file), then uploaded the files to the appropriate folders. I then attached a sample thumbnail but when I click on it all it does is open the image on a white page, no cool effects.

Here is the sample

Sample thumbnail (http://www.theclemsonboard.com/showthread.php?p=11476#post11476)

Thank you in advance for any help.

[TeddyKGB]

Guests now should be able to see what I see.

Here is a screen shot of what I see.
47599

Thanks

[Ntfu2]

Its not set up to parse directly from the post like that yet, did you use the [attach] code for that?

Works good here: http://www.theclemsonboard.com/showthread.php?p=11485#post11485

I'm going to investigate the [attach] bbcode and see what i can add to it :D

[Gizmo5h1t3]

got mine working in IE6 with seemingly no problems.....

but its weird...some work, and some just open as normal...lol

[Ntfu2]

gotta give it some time to load the first few times.

After that you'll be good to go :D

[TeddyKGB]

Yeah I uploaded a file from the desktop and then used the paperclip bbcode icon which uses the [attach] code. But your post worked beautifully.

What did you do?

Thanks!

[Ntfu2]

i used the manage attachments button, then simply uploaded thru the popup window and dont use the [attach] code to put it in the post.

Soon though you'll be able to use the attach code ;)

[Gizmo5h1t3]

Shame The Prev And Next Buttons Cant Be Got To Work Properly, That Would Just Set It Off Nicely....

Hack Is Excellent Btw...

[TeddyKGB]

NtFU - thank you for your hard work I really appreciate it.

[Ntfu2]

Shame The Prev And Next Buttons Cant Be Got To Work Properly, That Would Just Set It Off Nicely....


Hack Is Excellent Btw...


check the second post

[bashy]

Hi

Since installing this, when i submit a quick reply it posts the reply but gives a blank screen, I have to click back then refresh to see it :(

Any ideas please?

[bashy]

Hi again...

Its deffo this hack, As soon as i removed

<!--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 -->
From the postbit_ip the quick reply is perfect again, is this 100% correct postbit_ip and not just postbit?

[Ntfu2]

Bashy,

Do you have any other mods that do a template edit to the postbit?

[Lady Divus]

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

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
Interesting, i was going to ask how to make the image open in a smaller size. I need to know, exactly where does this little piece of code go?
if($NLP[0] > 500)
Which template and where? Also, i need to know if you are referring to resizing the image, not the thumbnail?

For instance: My thumbnails are set at 100x100, this is just how i want them, but when i click the thumb, the hack works perfectly, but the image is showing in its original size of 1024x740. I want the image to show as 624x340 and then have an option inside there to view original size. Is this what your code change does? Please inform, and if not, how can i make it do the way i want? Thank you for your help.

Ntfu2, this is indeed the best hack thus far i have seen. I will be voting for it. Thank you -

Lady Divus

[Ntfu2]

Hi

Since installing this, when i submit a quick reply it posts the reply but gives a blank screen, I have to click back then refresh to see it :(

Any ideas please?

You should be all fixed up right now.

I've found small bug in instructions, and will be updating them tonight when i get home :D

[bashy]

Thank you very much for ya help m8...

Just a small note, I did do the instructions in the 2nd post yet in that admin thread in my place your images did not show the other buttons?

Is this actually not working yet?

[Dr.Viggy]

i have the prev and next buttons working fine

[bashy]

oh...perhaps me missed sommat then...best go check me thinks :o

[Ntfu2]

I have to update the first post and install instructions, This became a mess when it got some what popular.

If you cant get it working, check back later tonight when i have time i'm going to tidy everything up

[bashy]

ooo...just notice Ntfu2 is in there again, best leave it alone...

I have just clicked the image and it automatically goes to the next image
but it aint showing the buttons :)

EDIT: ok Ntfu2, cheers for all ya help m8, its much appreciated :)

[bashy]

Does anyone else find this in Firefox...
When you 1st view the image its just normal (as it was before)
then when you refresh the page it shows it as its meant with this hack?

This only applies to Firefox and is 100% in IE
Also the page is still pretty slow to load for me Ntfu2 (that thread you started)

[babynino]

This is awesome! perfect for a mac discussion forum with aqua-soft theme... It's just perfect! Will vote for hack of the year! ;) Thanks for porting this to vB.

Installed.

[Dr.Viggy]

Does anyone else find this in Firefox...
When you 1st view the image its just normal (as it was before)
then when you refresh the page it shows it as its meant with this hack?

This only applies to Firefox and is 100% in IE
Also the page is still pretty slow to load for me Ntfu2 (that thread you started)
i have this issue. it's just that the js files take a second to load. if you wait (give it like 10 seconds to be generous) and THEN click, it should load the hack properly immediately

[bashy]

Ah so i see, me just being impatient :o
Cheers for that m8 :)

i have this issue. it's just that the js files take a second to load. if you wait (give it like 10 seconds to be generous) and THEN click, it should load the hack properly immediately

[Lady Divus]

Does anyone else find this in Firefox...
When you 1st view the image its just normal (as it was before)
then when you refresh the page it shows it as its meant with this hack?

This only applies to Firefox and is 100% in IE
Also the page is still pretty slow to load for me Ntfu2 (that thread you started)
It also does it in IE bashy. But it is a matter of being patient to allow the js to load...Be well -

Lady Divus <----Isnt patient either ;)

[LincolnForums]

Installed, thanks

[Oddjob]

Im kinda confused on how to update this from the one released yesterday.

Which template edits do i re-do?

The instructions are rather vague.

[Dr.Viggy]

Ntfu2 will be updating the instructions this evening to make everything clear and concise. hang in there for his update

[Ntfu2]

Working on the right now,

expect the neat and formated post in 30 minutes

[Kihon Kata]

Working on the right now,

expect the neat and formated post in 30 minutes
WIll the update be a faster loading one? (sorry to bother)

[Ahsin1]

not working!!!

[Ntfu2]

WIll the update be a faster loading one? (sorry to bother)


Yes i beleive it loads faster for myself, however i can not confirm that it does as only 2-3 others have the code right now


Updated First Post for better install instructions

[Ntfu2]

not working!!!


Can you provide a link to your site please.

[BANDiT600]

When I try to edit any post and after try to save nothing happens, it's after I've installed your hack. Any idea what's wrong??? It's second time I try.

IE says me "style" - is null or no object.. Something like this... Sorry I have Russian Windows

[Ntfu2]

When I try to edit any post and after try to save nothing happens, it's after I've installed your hack. Any idea what's wrong??? It's second time I try.


Bashy had this same problem, make sure you got the latest instructions from the first post.

If that fails, press CTRL+F5 to reload everything and give it a couple seconds to load back up.

[BANDiT600]

I have downloaded your update hack, same problem!

[Ntfu2]

Link to your site please

[iSpanish]

Hi

i see this before in this site:
http://www.huddletogether.com/projects/lightbox2/
and there is anther one:
http://www.huddletogether.com/projects/lightbox/

Q:
can you make it worke with images in the posts?

[Ntfu2]

Hi

i see this before in this site:
http://www.huddletogether.com/projects/lightbox2/
and there is anther one:
http://www.huddletogether.com/projects/lightbox/

Q:
can you make it worke with images in the posts?


Yes i know thats where i got the main js files. I had that in my original post, but forgot to put it in the updated one.

Q:
By images do you mean ones that pepole post from off site sources using the [img] tag or do you mean ones posted using [attach] tag.

[iSpanish]

Yes i know thats where i got the main js files. I had that in my original post, but forgot to put it in the updated one.

Q:
By images do you mean ones that pepole post from off site sources using the [img] tag or do you mean ones posted using [attach] tag.
Thanks for replay

i mean that image using [img] tag.

[Ntfu2]

Thanks for replay

i mean that image using [img] tag.


Yes thats coming next, just got it working for the [attach] code Check 2nd post shortly.

[Dr.Viggy]

what else is being updated in the new revision that's coming? i don't allow offsite hotlinking of images. will that be the only update?

[Ntfu2]

what else is being updated in the new revision that's coming? i don't allow offsite hotlinking of images. will that be the only update?


??????????????? Im lost on this one doc?


Second post has a small update to it :D other then that its about coming to an end i belive

[Dr.Viggy]

oh ok. thought you were updating again to make it work for [img] tags as well

[Ntfu2]

Im trying, its not going so hot :D

[cd1986]

Nice mod. Lightbox Plus has a few nice extras like dynamic resizing to fit the current window and the option to expand the image:

http://serennz.cool.ne.jp/sb/sp/lightbox/

Any chance you could work something like that in too. ;)

[Ntfu2]

I can implement them all...maybe not at the same time but let me start testing :D

[TeddyKGB]

Great work and I really appreciate it. Just one minor suggestion though, I would do some sort of version control so people know what it is they need to update.

I installed mine earlier and you have tweaked a few things so I am not sure which part I will need to update (without going thru it all again).

It might make it easier on you and everyone who enjoys your work.

Thanks again! Nominated for HoTM

[sensimilla]

I have done all step by step and nothing happens..
Still attachments opens in new window.. :(

btw I have vbseo installed does it have influence ?

[Barakat]

just in the headinclude template put this code at the end of it


<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>
<link rel="stylesheet" href="clientscript/vbulletin_css/lightbox.css" type="text/css" media="screen" />

and u will have the effect on the pictures on ur forum aslo

with the code which i included it before

[Barakat]

and u can leave the postbit_legacy or the postbit templates without changeing

[Impreza04]

Thanks for getting [attach] to work..

On problem with the template edit is that it causes the [attach] to not work (for me at least, i thinks its my settings)

However <if condition="$show['attachments']"> works perfectly :)

[Lady Divus]

just in the headinclude template put this code at the end of it


<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>
<link rel="stylesheet" href="clientscript/vbulletin_css/lightbox.css" type="text/css" media="screen" />

and u will have the effect on the pictures on ur forum aslo

with the code which i included it before
I placed this code in the headinclude at the very end. I dont see anything different with the pics on my forum. I even placed a new image using a url to test and nothing happened. Am i doing something wrong?

Also, could you tell me how to resize the view of the attached images once the thumb is clicked. I dont want it to open in the original size but rather in a predefined size. Is this possible? Anyone? Thanks in advance -

Lady Divus

[wtrk]

nice.

[Ntfu2]

I placed this code in the headinclude at the very end. I dont see anything different with the pics on my forum. I even placed a new image using a url to test and nothing happened. Am i doing something wrong?

Also, could you tell me how to resize the view of the attached images once the thumb is clicked. I dont want it to open in the original size but rather in a predefined size. Is this possible? Anyone? Thanks in advance -

Lady Divus

Im trying to figure that out for ya, but not having much luck with this version,

Maybe one day though, im just a n00b :D

[ryancooper]

dont forget the final " in
title="$attachment[filename] - $attachment[filesize] - Downloaded $attachment[counter] times"

[Ntfu2]

Thank you

[Barakat]

"Lady DIVUS" Coz iam useing my phone i cant make copy paste . But go up to page 3 and u will find a code that i put 'it a small changes on class_bbcode file . Without it the code in the headinclude is useless . Try it and i will work

[JohnBee]

Installed, running great.
I installed and applied to one forum only "showcase forum" my members love it!

thanks for this great hack

[Gizmo5h1t3]

still not seeing the button images....apart from that...sweet hack!!

edit - seein em now....lol

[Ntfu2]

still not seeing the button images....apart from that...sweet hack!!

edit - seein em now....lol


Great to hear, dont forget to click install and nominate for hack of the month :D

[Jason McConnell]

Killer hack!!

* Jason McConnell clicks Install! :D

[JohnBee]

I still love the hack, however after seeing the demo "with buttons and exit" hehe I wish I had that on my own site :p

[Ntfu2]

dont your buttons show up?

[JohnBee]

hmm No buttons here, I uploaded the dir structure as it was setup in the archive, is it possible the /image/ folder belonged under the /forum/ dir or was it meant to go to the dir above that?

Also I tested it with ie to see if perhaps FF was not acting up but on ie 6.2 it was not rendering any effects at all.
Not sure whats going on here

[JohnBee]

Update...

I test ie on your demo site and it did the same thing :)
So theres no problem with the script there.

However I do not see the navigation buttons and /or the exit buttons
If I hit the image at either side it does progress through the slidshow though.

clicking away returns to the forum.

[Ntfu2]

the images folder belongs above the forums folder

ie
www.site.com/forums <--location of forums
www.site.com/images <-- location of images.

If that fails you can always open the lightbox.css file, and edit the paths by hand (should only be 3 image paths), and i beleive lightbox.js (inside clientscript) folder has two image paths near the top that may need to be edited.

[JohnBee]

the images folder belongs above the forums folder

ie
www.site.com/forums <--location of forums
www.site.com/images <-- location of images.

If that fails you can always open the lightbox.css file, and edit the paths by hand (should only be 3 image paths), and i beleive lightbox.js (inside clientscript) folder has two image paths near the top that may need to be edited.

Okay I will have a look into that.
One thing I noticed... on your demo forum, I see the java initialisaton icon as the .js is loading on the images. But not on my own though...

Is this an additional feature or could it all be linked to the missing navigation icons?

[JohnBee]

Alright those spots you mentioned worked :D
It is very odd that I am unable to use any internal paths to these images.

I did however sucessfully drop the images in the /clientscript/ dir and load the previous and next buttons there. However the close and loading images are nowheres to be seen.

I will keep working at it though.

I wish I could understand why the paths are not registering.

[JohnBee]

Success!

I dropped the imageload.gif /forum/ dir and remove the external paths from the script and it now works just like the demo!

Looks great!
Hope this helps someone else gat passed the lost navigation buttons :D

The last itty bitty thing I noticed is that your demo has the image name and some attributes :)
How did you get this?

[Ntfu2]

Check the second post, it has tons of extra features you can implement :D

hope that helps as well

[JohnBee]

Thats awesome Ntfu2, I did the mod and its perfect!
I totally love this hack.. can't say it enough

Heres a few small performance tips for all you fans out there.

The biggest single performance hit you can receive with this MOD is if "show similar threads" is enabled in the same forum as this mod. Turning it off for the assigned forum will greatly increase performance.

Additionally if you have a dedicated forum for images and media, you can create a child template, reserve the template changes to that template and assign it to your specified forum.


Hope this helps and good luck with this great hack!

[grains]

I've been looking for something like this for about a year now.....HOTM

[Kanustep]

Any change to make this working with inserting images and not just for attach images?!

[Ntfu2]

not yet, it does work with [attach] tags now though check the second post.

[SkyCatcher]

hmmmmm

When I add


<!--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 -->


to the top of my postbit_legacy template I can't quick edit posts anymore.

I click edit (the little quick edit box pops up) and both save and cancel (abort) buttons don't function anymore.... this only happens in threads where there's an attachment...

When I remove the code from postbit_legacy the quick edit buttons function again, regardless of attachments or not so it's got to do with the javascript.

Any ideas before I spend hours troubleshooting this?

[Ntfu2]

I have no clue, I havent experienced that on my own forums yet :-\

[vibe]

Danggggggggggg installed!!!

[Ntfu2]

dont forget to click it ;)


Thanks
-Dave

[SkyCatcher]

Well I can't can't figure it out right now, same thing happens anywhere within the postbit template, perhaps I can add it to one of the header templates to make it work properly.

BTW - the only complaint I've received from users is that the images do not resize. If someone adds a 2048x2048 pic and users click the thumbnail, they have to scroll all over the place and can't really make anything out because the original size is just too big. Normally a browsers automatic image resizing takes care of this but it seems to be disabled when using your hack. Any plans to get this working again somehow?

Overall it's a beautiful hack and I'll continue to use it once the images can be automatically resized or the image resizing for browsers works :)

[Ntfu2]

I have a version coming that resizes images automatically, but sadly the next and previous buttons do not work at the same time with it. because there is the option to view the image in full size.

When adding the javascript into the headinclude template it calls them every time the page is loaded and can have an effect on performance sometimes.

[Lady Divus]

Maybe one day though, im just a n00b :D
If you are just a n00b, i cant wait to see what you produce when you are an oldie ;) Very nice work. Thank you for your reply, and thank you for looking into the resize issue. Be well -

Lady Divus

[Ntfu2]

Updated first post to include instructions for image resize and a overlay.

here is a demo: http://www.fightrice.com/forums/site-status-testing-forum/t-test-197.html

My sites running like poo right now, if you go there and its down, just check back

Quick edit also seems to work fine in this version, someone else will need to confirm that for me please :D

[Lady Divus]

Ntfu2, i did everything you said to do for this new resize release, but for the life me i cant get it to work. It just stopped working altogether and opens the images in a seperate window with a white background, (vB Default view)...

I undid all the previous template edits, i deleted all the previous files from my server, i edited the new js file to point to my site images, i did the new template edits, i uploaded all the new files to my server. Am i doing something wrong? Thank you for any help in advance -

Lady Divus

[Ntfu2]

did you change the rel="lightbox[attachment]" to simply rel="lightbox" ?

[Lady Divus]

did you change the rel="lightbox[attachment]" to simply rel="lightbox" ?
Yes i did.

[Tulsa]

When I load up the three pics on your demo site I simply get the pic with a nice border around it and a small x in the upper right hand corner. Anywhere I click on the pic once it's loaded, it goes away. No prev or next. The name size and number of times loaded shows as a tooltip and that's it.

Now on my site I get the annoying prev/next with a flashing line right in the middle of the pic where each click side is separated. I get the animation of the box and the sliding down with the name,size and loaded times but only on the pics without bbcode [attach].

I love the way the demo site works, clean and simple. Load the pic, close the pic, click on the next pic to see it.

What is different about your demo site and the instructions you have provided here?

Also I do have it loaded the bbcode pics on 3.5.3 since you said you'd only tested in 3.5.4.

[Ntfu2]

The demo site is now running the 2nd version "lightboxresize.zip"

Simply undo all template edits from previous version, and follow instructions in the second part of the first post -
/////////////////////////////////////////////////////////////\
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ \\\\\\\\\\\/
Dynamic Lightbox auto resize - and image overlay.
/////////////////////////////////////////////////////////////\
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ \\\\\\\\\\\/

From there down to get the same version as on demo site now.q

[Tulsa]

Perfect! :)

Are you adding the bbcode support to the second one?

[Ntfu2]

bbcode as in attach?


on the php edit, instead of rel="lighbox[attachment]" make it simply rel="lightbox"

I'll change the code tomorrow. for now sleep :D

[Tulsa]

That worked like a champ. :)

[Tulsa]

Now I noticed a heck of a delay in loaded the thread with this active. About twice as long. So I moved the .js to the showthread template instead of the postbit. It appers to be working fine and the speed is back.

So my question is, what is wrong with this idea? I mean, Murphy is bound to rear his ugly little head...

[Ntfu2]

Nothing as long as all works.

I never tested it in the showthread. I had it in the headinclude which was causing MAJOR performance issues and putting it in the postbit was the next logical thing i came up with.

thanks for the tip ;)

[Cybertims]

I have found a problem which only happens when this mod is installed....

The Quick Reply box gets messed up..as in below.
It happens to the Fonts drop-down and the sizes drop-down.



https://vborg.vbsupport.ru/external/2006/05/4.jpg

Cheers.

[Ntfu2]

i cant even get the advanced editor in my quick reply to show up, where do i enable this so i can try to fix

[Lady Divus]

i cant even get the advanced editor in my quick reply to show up, where do i enable this so i can try to fix
Ntfu2, i dont think there is a way to get the Advanced Editor to show in the Quick Reply box. You can only get it when clicking Reply rather than using Quick Reply. Someone please correct me if i am wrong...Be well -

Lady Divus

Edit: Hmm, guess i should have looked at the big screenshot huh? I never knew there was an Advanced Editor for Quick Reply...I would also like to know how to enable it...Or is that screenie of Quick Edit? Interesting...

[dan35]

Thank you, Ntfu2! :)

[Lqd]

Ntfu2, if you want the next and previous images to show up you need to use:

rel="lightbox[photos]

this will group the images.

ps. Is that the sound of a Photopost hack with lightbox I hear coming?!

[Ntfu2]

for what version.

The first version already includes that.

[nymyth]

this thing is beautiful....great work...

Peace

[DirectPixel]

Cool, I was wondering when this would get ported to vB. :)
* DirectPixel installs.

You might want to give some credit to the guy who actually wrote the lightbox script (http://www.huddletogether.com/projects/lightbox2/). ;)

[Ntfu2]

Cool, I was wondering when this would get ported to vB. :)
* DirectPixel installs.

You might want to give some credit to the guy who actually wrote the lightbox script (http://www.huddletogether.com/projects/lightbox2/). ;)


updated :)


forgot to put it back in when i updated it with another version ;)

[d8tabyte]

Awesome works great - http://digitalet.net/forum/showthread.php?goto=newpost&t=2681

[sdenike]

I changed one part on this script. I change the rel="lightbox[attachment] to rel="lightbox[attachment$post[postid]]" that way if you have a bunch of attachments in a post it wont cycle through the entire topic of attachments, only the ones in THAT post.

[Ntfu2]

Cool Good tip.

thanks

[nymyth]

NTFU, is there anyway we can use imagemagick to autoresize the image?? So if someone uploads a huge image, imagemagick will shrink it and then lighbotx kicks into action???

Peace

[sdenike]

Cool Good tip.

thanks
Not a problem. I was trying to think of other ways to impliment this as well... I will keep you posted.

[Ntfu2]

NTFU, is there anyway we can use imagemagick to autoresize the image?? So if someone uploads a huge image, imagemagick will shrink it and then lighbotx kicks into action???

Peace


this wont work with anything posted with the [img ] tags anyway.

[Icheb]

Am I doing something wrong or is saving the images with Firefox impossible? Whenever I do a right click on the image the only options I see are "Save Page as" or "Save Link as", but not "Save Image". If I do it in IE I have to hit the area where there are no "previous" and "next" links.

Other than that, I can't put it in words how wonderful this looks. :D

[Icheb]

Tried to install it on 3.6 Beta 2 but it breaks inline editing of posts. New version gets saved but you won't be redirected.

[Ntfu2]

to answer your first question, im not sure, I havent tried saving images using it yet.

Second Question: Im not sure either. I'll update it to work with 3.6 when it goes Gold, or if anyone does, feel free to post it in this thread

[Tulsa]

I'm using the auto resize version of this on Firefox and am able to save the pic with a right click.

[d8tabyte]

Why is this tagging some of my members images with an obnoxious fightrice.com message? I think I would have like to have been told I was going to be advertising for your site with every use of this mod, as it is not appreciated with out my knowledge.

Supporting a hack is one thing - basicly watermarking all the images with your domain is another.

Is there a way to remove this, or am I going to have to uninstall this mod? :mad:

[Ntfu2]

you change the image to one of your own. i beleive it is this on zzoop.gif simply make one of your own and it'll overlay your image.

[d8tabyte]

Thanks - I just didn't see that.

[Ntfu2]

not a problem, i forgot to put it in there, and you're the first to mention it

first time writting a hack release :D

[offline]

I have installed this mod on 3.5.4 and it doesn't seem to work, I click on an attached thumbnail and it shows it to me like it normaly does nor lightbox effect at all. Any ideas? I am using a different style than the default style.

Thanks!

[Ntfu2]

make sure you did the couple template edits for which version you selected.

After that, make sure you've uploaded the files to the correct locations

[offline]

Actually it works, but I have to wait for the entire post to load before clicking on the thumbnail, if I don't wait it will then show it the orginal way.

[Ntfu2]

I'll work on finding a way so that doesnt have to happen, I'll see what i can come up with

[maf1973]

You said in another thread (https://vborg.vbsupport.ru/showthread.php?t=1232... (https://vborg.vbsupport.ru/showthread.php?t=123235&page=2&highlight=lightbox)) your version works correct with 3.6 but thats not true. I have the same error with your hack. The inline edit function does not work.

[Ntfu2]

inline edit function works just fine on all my boards 3.5 and 3.6 testing boards

I dont have a board this is installed on right now thats public, but when i go i'll provide a test login for everyone.

[upsetter]

I heard this works for the 3.6.0 version; has any one here tried it yet on there 3.6.0 version, and can vouch for this ???

[bondjetta]

I heard this works for the 3.6.0 version; has any one here tried it yet on there 3.6.0 version, and can vouch for this ???
i have it installed on 3.6 but it's not working. I've tried everything I could but i just get the rotating "waiting" image but nothing loads

EDIT: Ok...not sure why or how, but now it works...i re-uploaded lightbox_plus.js and weeeeee

[Samarande]

Works perfectly on vb 3.6.0
Thank you :)

[43082448]

quick edit does not work,how do i?

[Zas]

Ive installed this on 3.6.1 and it doesnt work. It opens the attached images normally and quick edit does not work.

[dude154]

Hey Ntfu2,

Did you ever figure out a way to resize the images?

____________________
Jordan
http://www.kingstonforsale.com

[ztempuser]

i have 3.6
i did it all but*resize*
and it didn't do anything just opens image normal

what should i do first to find my error?

[JohnBee]

Is it possible to have the image resize option as well as the previous/next buttons?

[yoyoyoyo]

awesome!

[smoknz28]

Is this ---> https://vborg.vbsupport.ru/showthread.php?t=123235 the 3.6.x version of this hack?

[alfaowner]

Goes over to one side, how can this be adjusted please? (Ignore the arrow, its just a screen shot I laid my hand on to upload to my own site)

[alfaowner]

nope, i give up I just dont know whats wrong :(

[centralss]

not working at all for me. I don't know what I'm supposed to be seeing. I added everything just like instructions say. vbgarage looks no different to me.

[rolfw1]

Thought that it wasn't working, but eventually realised that it doesn't work if you have set the thumbnail in the post using the attach button. :)

Really like it though, now want to see if I can get it working in standalone photopost Pro. :)

Thanks

[rolfw1]

Sorry, put this in the wrong version thread. :)

[TWTCommish]

I have two quick questions; one, you mentioned in the "other" vB/Lightbox thread that this version didn't break the Quick Edit, but I see some people here saying it does. Any idea why?

Also, can the JS includes be put somewhere else other than postbit? It seems a bit inefficient to have them loaded on every single post.

[TWTCommish]

*bump* Any fix for this?

[Gsmdenis]

perfect for this

[TWTCommish]

Does anyone have this working without breaking the Quick Edit feature?

[evannn]

Does anyone have this working without breaking the Quick Edit feature?


I concur. Noticed it too.

Any inclusion of prototype.js also breaks the internal vbulletin's js iteration.

Eg: if you attempt to del thread and such, under the Go() button, the counter does not update correctly.

On Firefox, the QWSIWYG editor also behaves weirdly.

[ryancooper]

Anyone know how I can put the image filename at the bottom between Image 2 of 2 and the close button? Also if possable to strip the extention?

[Annapurna]

Does or does it not work with 3.6.8?
How's about 3.7.x?

[Twin_Turbo]

Did you modify the lightbox plus code? In the original the effects are called effectable however when I change it it gives a scripting error in IE. Also, I can't get the zzoop watermark to work, paths are correct. For the rest it's working in 3.6.8 without glitches in quick reply & multiquote but I also can't click to resize the pics (I see the js is missing the resizable:true statement but adding that gives that same scripting error again) What gives?

[LilSniper]

oops nvm

[Twin_Turbo]

I got it all working but found a little issue.

When someone attaches pics the lightbox works fine and the anchor gets the rel"lightbox" like it should.

However when someone uses the attachment manager in the vb editor toolbar to place the attachments in his post and surround it by text or whatever, then all of a sudden it doesn't work anymore.

Checking the code results in it getting rel="lightbox[attachment]" like in the postbit_attachmentthumbnail edit for the normal version. I checked it and the code I entered is the other one (rel="lightbox") anyone know where the other one comes from? If I can find it i can remove [attachment] to make it work in all instances.

[Twin_Turbo]

never mind, fixed it, was in bbcode class.

[Reef Man]

How much will cost me if you implement this on my site and let it work fine?
Send me a PM