Adding Lightbox to Attachment thumbs

[imranbaig]

Adding Lightbox to Attachment thumbs
Overview
Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.

-This hack allows you to add the famous lightbox to attachment thumbnails.

- This makes users see attached images easilly, without having to open another page.

- It can be completly customised, to fit into your skin design, from css.

Installation - Very easy.

Download and upload the contents of upload folder into your forum root.

Template Edits.

Step1: Open headinclude, and insert this inside <heade></head>

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

click Save.

Step2: Now Open postbit_attachmentthumbnail

Find: <a href="attachment.php?$session[sessionurl]attachmentid=$attachment[attachmentid]&amp;d=$attachment[dateline]"<if condition="$show['newwindow']"> target="_blank"</if>><img class="thumbnail" src="attachment.php?$session[sessionurl]attachmentid=$attachment[attachmentid]&amp;stc=1&amp;thumb=1&amp;d=$attachment[thumbnail_dateline]" border="0" alt="<phrase 1="$attachment[filename]" 2="$attachment[counter]" 3="$attachment[filesize]" 4="$attachment[attachmentid]">$vbphrase[image_larger_version_x_y_z]</phrase>" /></a>
&nbsp;<if condition="$show['br']"><br /><br /></if>

Replace With: <a rel="lightbox" href="attachment.php?$session[sessionurl]attachmentid=$attachment[attachmentid]&amp;d=$attachment[dateline]"<if condition="$show['newwindow']"> target="_blank"</if>><img class="thumbnail" src="attachment.php?$session[sessionurl]attachmentid=$attachment[attachmentid]&amp;stc=1&amp;thumb=1&amp;d=$attachment[thumbnail_dateline]" border="0" alt="<phrase 1="$attachment[filename]" 2="$attachment[counter]" 3="$attachment[filesize]" 4="$attachment[attachmentid]">$vbphrase[image_larger_version_x_y_z]</phrase>" /></a>
&nbsp;<if condition="$show['br']"><br /><br /></if>

Thats it Enjoy The hack.

Demo: http://forums.winkeyfinder.com/showthread.php?p=1502

Note: It doesn't work if I click an image link before the page has finished loading.
The script is activated only after the page has finished loading.
Thank you!

All the Credit goes to huddletogether.com (http://www.huddletogether.com/projects/lightbox2/), for devloping such a beautifull script.

[Terminatoronly]

installed ;) its really good i love it :)

[Benj]

wicked i will be installing

[Oddjob]

Where exactly are you supposed to put that in the headinclude template? At the very top?

Im also a little confused where the files are uploaded to.....

[effectica]

Thanks for this. I installed it, it's great. :)

When I installed it though, it didn't work.
I think that the second edit should be

<a rel="lightbox" ....

Note the lightbOx

instead of

<a rel="lightbpx" ....

[effectica]

Where exactly are you supposed to put that in the headinclude template? At the very top?

Im also a little confused where the files are uploaded to.....


EDIT: imranbaig has a better solution

[imranbaig]

Sorry for that typo error.
In the headinclude template Paste it below this.
<!-- CSS Stylesheet -->
$style[css]
<if condition="is_browser('opera') AND !is_browser('opera', '8.0.1')">
<style type="text/css">
ul, ol { padding-left:20px; }
</style>
</if>
<!-- / CSS Stylesheet -->

[effectica]

Thanks imranbaig.

One question. As with the other lightbox mods that can be found on this site, also yours gives the problem that the quick edit does not work. It saves the data but it doesn't close the quick edit box. Would you happen to know how to fix this?

[imranbaig]

Well this is due the the script, I think the author of the scriipt has few tips for Collision of scripts, Here is the link = http://www.huddletogether.com/projects/lightbox2/ Look into support part.

Also If you want to have it like gallery where it shows Next and Prev Links in lightbox, just change rel="lightbox" to rel="lightbox[whatever]"

[Holidazed]

Well, I followed the instructions to the letter, yet it does not work. I uploaded all the files and made the edits. When I click on the thumbnail in my forums, it just displays it like it always did b4.

See for yourself.
http://www.pcinfoman.com/vbb350/showthread.php?p=193#post193
Username: testing
Password: testing

Ideas?

[effectica]

Well, I followed the instructions to the letter, yet it does not work. I uploaded all the files and made the edits. When I click on the thumbnail in my forums, it just displays it like it always did b4.

See for yourself.
http://www.pcinfoman.com/vbb350/showthread.php?p=193#post193
Username: testing
Password: testing

Ideas?

Make you sure you used:

<a rel="lightbox" ....

instead of

<a rel="lightbpx" ....

[imranbaig]

Hey man, You have it like <a rel="lightbpx" , pls change it to <a rel="lightbox" this happend while I was typing it. Sorry about it.
I cant edit the above post to correct it, If any mod can it will help many others who will implement this.
Thanks.

[Allan]

Thanks for this hack :)

it work for me if i put this: <a rel="lightbox" .... .... and no <a rel="lightbpx" ....

Click install ^^

[Allan]

There are a problem

Under FF, Attachment thumbs, it's ok, but with IE, Attachment thumbs don't show

and looking this:

https://vborg.vbsupport.ru/ (http://img409.imageshack.us/my.php?image=opussjf4.png)

[Holidazed]

Make you sure you used:

<a rel="lightbox" ....

instead of

<a rel="lightbpx" ....
D'Oh!! Thanks. That fixed it.

[effectica]

There are a problem

Under FF, Attachment thumbs, it's ok, but with IE, Attachment thumbs don't show

and looking this:

https://vborg.vbsupport.ru/ (http://img409.imageshack.us/my.php?image=opussjf4.png)

Yes, same problem here. I guess it is not an easy thing to fix :surprised:

[mvigod]

We looked at this lightbox script awhile ago but the filesize payload on those .js files is way too heavy. Take a look at them and decide if you want members to pay that download hit when viewing your site. I wouldn't use it on high traffic site or for sites where users are not on broadband

[imranbaig]

Yes, same problem here. I guess it is not an easy thing to fix :surprised:
This problem is nothing to do with hack, You are effectively adding one rel tag to yur anchor tag, thats all and nothing.
Try removing the hack, and see if it still has the same problem.

Can you give me access to your admincp, I will try and fix it?

mvigod, You can easilly creat a Conditional statement which will enable this hack only for a certain group of members.
If you want help in this pm me.

[effectica]

This problem is nothing to do with hack, You are effectively adding one rel tag to yur anchor tag, thats all and nothing.
Try removing the hack, and see if it still has the same problem.

Can you give me access to your admincp, I will try and fix it?

mvigod, You can easilly creat a Conditional statement which will enable this hack only for a certain group of members.
If you want help in this pm me.

Hi imranbaig,
thanks for the help, but I've tried your mod (installed it from scratch twice) as well as other similar mods. The result has always been the same. I've also seen in the threads of these other hacks, people having the exact same problems.

You are effectively adding one rel tag to yur anchor tag

I know it is not a problem of how you coded the hack. I love it and I appreciate the time you put on this, but I can only imagine that the javascript that comes with lightbox is causing problems with some vb javascript.
There are obviously problems with the way lightbox integrates with vb, since lightbox wasn't written for vb originally. So when I said "I guess it is not easy to fix" I didn't mean that as in fixing your hack. I was just saying that it is probabily not easy to modify the lightbox code so that it doesn't break certain vb features.

Try removing the hack, and see if it still has the same problem.

Yes, by removing the hack everything turns back to normal.

Support on the lightbox authors site, about various issues, is not helpful in this case.

Anyway, thanks for the hack and support. I didn't mean to be unappreciative towards your work.

[Allan]

No fix bug ?

[Ntfu2]

My version from 3.5 still works perfectly with 3.6, and even has some extra options and info in the thread, and doesnt have the undefined error if you are looking for a fix for that.

https://vborg.vbsupport.ru/showthread.php?t=115701

[effectica]

My version from 3.5 still works perfectly with 3.6, and even has some extra options and info in the thread, and doesnt have the undefined error if you are looking for a fix for that.

https://vborg.vbsupport.ru/showthread.php?t=115701


Hi,
does inline editing work with your hack installed?

[Ntfu2]

yes,

everything works perfect. This version of the hack is missing a few vBulletin specific items it needs to function correctly.

While mine works perfectly within the vBulletin pages

[aycan555]

Verry shine thank you...

[mahakala]

what does this plugin do when the attachment is ".rar", ".zip" or else?

[ForumDog]

Hi imranbaig,
thanks for the help, but I've tried your mod (installed it from scratch twice) as well as other similar mods. The result has always been the same. I've also seen in the threads of these other hacks, people having the exact same problems.

I know it is not a problem of how you coded the hack. I love it and I appreciate the time you put on this, but I can only imagine that the javascript that comes with lightbox is causing problems with some vb javascript.
There are obviously problems with the way lightbox integrates with vb, since lightbox wasn't written for vb originally. So when I said "I guess it is not easy to fix" I didn't mean that as in fixing your hack. I was just saying that it is probabily not easy to modify the lightbox code so that it doesn't break certain vb features.


I know that a modification I did, which used javascript interaction with Quick-Reply, didn't work in Internet Explorer. I tried four methods of doing the same thing, same result every time. Code validated, no errors or issues. It just didnt work. IE seemed to have problems with the textarea being the target of two javascript functions from different places. It is, to be fair, a very bugged browser and it worked perfectly in every other browser for every method I tried so I could only conclude that it was some kind of issue with IE and I ended up restricting the modification with a conditional that barred it from loading in IE.

Might have been some kind of browser-specific shennanigans in the forum code itself I suppose.

[imranbaig]

.rar and other files work fine with out a problem,..
Check it here: http://forums.winkeyfinder.com/showthread.php?t=1199

[upsetter]

There are a problem

Under FF, Attachment thumbs, it's ok, but with IE, Attachment thumbs don't show

and looking this:

http://img409.imageshack.us/img409/776/opussjf4.th.png (http://img409.imageshack.us/my.php?image=opussjf4.png)

I have the exact same problem on my forum, but my attached file shows at the bottem, and when I submit it the thumb. on the forum works perfectley but I got the same problem as you, says " undefined (undefined) "

http://www.boostconcept.com/forum/WTF.png

[tappedout]

Works Great thanks!! I had the same script on my home page it ties in great now to have it on the forums! Thanks a ton!!

*Clicks install!

www.sectionviiiclan.com

[P.Jackson]

im getting that undefined problem aswell :(

[webgroup]

Well this is due the the script, I think the author of the scriipt has few tips for Collision of scripts, Here is the link = http://www.huddletogether.com/projects/lightbox2/ Look into support part.

Also If you want to have it like gallery where it shows Next and Prev Links in lightbox, just change rel="lightbox" to rel="lightbox[whatever]"

Installed and working perfectly.
Could you please explain a little more how to exactly add the gallery style function(next/prev)?

Thanks! :)

[Snake]

Thanks for the hack! I'll install it right away... :)

[43082448]

quick edit does not work,how do i?

[Lionel]

Once I removed the javascript in the headinclude, that undefined all over problem mentioned many times in this thread disappeared

[Kanustep]

I'm getting an error on vBulletin editor in font size.
This is a great plug-in, but need a little bit of improvement. Working with version 3.6.0.

[Mr_Devlin]

Sorry, but I can't get this to work.

Did all edits and uploads as described and nothing happened. btw: does it take affect when using custom styles? If so, other upload locations may be required.

Please be more precise where the file have to be uploaded. I loaded all files to forum root and several other folders and get always same result - nothing changed, no lightbox. It depends NOT on browser, because FF won't do it also. I tried IE, FF, Netscape and Deepnet without any success. Have to change back to default attachments.

[Kanustep]

In some cases you need to rebuilt forum cache or forum information.

[dodgeboard.com]

I'm getting an error on vBulletin editor in font size.
This is a great plug-in, but need a little bit of improvement. Working with version 3.6.0.


Same here!!! Plus the UNDEFINED error mentioned earlier. I wished it worked cause I love this hack and so did my members.

Reverted template headinclude and that fixed it but of course, removed lightbox.

[Kanustep]

Is there any fix to this? It shouldn't be hard since it doesn't change anything relevant.

[dodgeboard.com]

Is there any fix to this? It shouldn't be hard since it doesn't change anything relevant.


Dunno.....I don't think it is actually the script in the headerinclude so much as it is the js files in the js directory. I think this because I was able to correct the problem by renaming the js folder to js.whatever which effectively renders the files in that folder unusable to lighbox.

Me thinks one of the .js files is the problem.

I run 3.6.0 and only experience issues in advanced or wysiwyg editor modes, which of course are the only modes that use those drop-down menus.

Dodgeboard.com clicks *uninstalled*

[Kriminal]

Unfortunately, this hacks causes a malfunction in Quick Edit and Multiquote.
I'm sorry but I have to uninstall it.

[PixelFx]

any chance of getting update for this hack, to fix known bugs?

[Logician]

Same here!!! Plus the UNDEFINED error mentioned earlier. I wished it worked cause I love this hack and so did my members.

Reverted template headinclude and that fixed it but of course, removed lightbox.
To avoid the errors, apply installation step 1 to SHOWTHREAD template only (before </head> tag) , rather than headerinclude template. This should fix your problems..

[oberheimhaven]

Where are they? Zero just says to install in root forum??? Anyway an you please be a tad clearer as to where these files actually go? I will wait to install sounds like a lot of bugs in her, however great /hack,and ideal If Ican get her to work

Peace
MarkAnthony

[Quarterbore]

I am trying to work with lightbox for another reason and it led me here as I am strugling with the "quick edit" error too...

I know that the problem seems to be with the <body$onload>

See: http://www.huddletogether.com/projects/lightbox2/

It says:


Support:
It doesn't work at all. The image opens up in a new page. What's wrong?
This is commonly caused by a conflict between JS scripts. Check your body tag and look for an onload attribute. Example:
<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;">
A quick fix to this problem is to append the initLightbox() to the onload attribute as so:
<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()">

So, I tried it....

Open "editpost"

Find <body$onload>

Replace with: <body onload="MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()">

BUT THAT DID NOT WORK!!!

I also removed the whole <body+extra stuff... and replaced it with a normal <body>. What I discovered is that with that gone the post opens and you can edit but when you click save the window does not return to a viewthread view... (remains with the editor)

I will recode that edit page if I need to or I will recode my forums so everybody on my site has to use the advanced editor if this is the only fix!

I also tried to edit the "showthread" and the "showthread showpost" templates and that didn't help either...

[effizienz]

To avoid the errors, apply installation step 1 to SHOWTHREAD template only (before </head> tag) , rather than headerinclude template. This should fix your problems..
Won't work. Even if included only in SHOWTHREAD you will get problems with quick edit!

[Sean S]

Here is what you guys have to do to get rid of those errors that you have been getting, put an if condition around the script,


<if condition="THIS_SCRIPT == 'showthread'">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /></if>

[hnjco]

Installed and worked perfect..

The one thing i want is..if there are 5 pictures and i click on first one which show in new lightbox window..now if i want to see 2nd picture i have to close lightbox window and click on 2nd or any other picture...any way to add previous and next option in lightbox window so we can see next picture then closing lightbox and click on other picture??

[hnjco]

First BUG.
When you do Quick EDIT of post you can't save post when you click on SAVE but you can save post in Go To Advance option of EDIT POST.

I'm having this trouble since i install this mod but after uninstall it was fine and again i install then same thing again.

[imranbaig]

First BUG.
When you do Quick EDIT of post you can't save post when you click on SAVE but you can save post in Go To Advance option of EDIT POST.

I'm having this trouble since i install this mod but after uninstall it was fine and again i install then same thing again.

There seems to be a conflict with these to jscripts, I will let the author konw abut this and let's see what he can do to over come this problem.

[hnjco]

thanks imranbaig saab ;)

Hope this can be sorted soon and we can use.

[radarhunter]

workin` now thankx

[shadow smith]

Hey guys, before I install this, does it work with quick editting? I thought I'd ask before I went tinkering.

Thanks,
Steve

[Natalie@Club]

Great hack, I can confirm it works in Firefox and Safari :D

[Noctavia]

Im also a little confused where the files are uploaded to.....

Same, where exactly do we upload the CSS, Images and JS folders to?

[Funky Diver]

Same, where exactly do we upload the CSS, Images and JS folders to?

You upload them to the folder where your forum sits.

e.g. /www/forum or if your forum sits on your www/ (or public_html) then put them in there.


On a seperate entity, this really is a sweet hack... IF it would work properly.

I have the greyed out loading thing... that works fine. No problems editing attachments... BUT when I do click on the image, it doesn't appear in the box, it goes through the loading thing, looks very nice... then new page with the image, aligned to the left. This ONLY happens in Firefox... it works fine in IE. What have I done wrong, because I just cannot figure it out? :confused:

[Noctavia]

You upload them to the folder where your forum sits.

e.g. /www/forum or if your forum sits on your www/ (or public_html) then put them in there.

Thankyou very much, I thought that might have been it, but wasn't 100% sure because I couldn't get it to work properly.

No problems editing attachments... BUT when I do click on the image, it doesn't appear in the box, it goes through the loading thing, looks very nice... then new page with the image, aligned to the left. This ONLY happens in Firefox... it works fine in IE. What have I done wrong, because I just cannot figure it out? :confused:

I am having this problem as well, although mine doesn't work in Explorer ><

[PixelFx]

the only issue I'm having with this after applying it is that, if I do a quick edit of a post, it won't save. Unless I'm in advanced mode.

Other than that, using the conditionals above, fixed all problems I had before when I tried this hack.

[Atachi]

it's the prototype.js, btw.
it's conflicting with vbulletin's own JS-framework.

tried doing the same a few days ago (didn't know there were already hacks) and ran into the same problem.

[PixelFx]

anyone found fix for this? and thanks :D

[Kihon Kata]

bump! any fixes?

[nul7]

This mod has caused me many headaches. lol The actual mod worked great... attachments opened with lightbox, but for the last few days we've had this problem:

https://vborg.vbsupport.ru/external/2007/02/2.jpg

It was like that in both the font selector and the size selector. I've been hunting the cause relentlessly trying to figure out wtf is causing it. Then I remembered this mod and "uninstalled" it. Now it's back to normal. Good idea... poorly executed.

[vietConnecting]

This mod has caused me many headaches. lol The actual mod worked great... attachments opened with lightbox, but for the last few days we've had this problem:

https://vborg.vbsupport.ru/external/2007/02/2.jpg

It was like that in both the font selector and the size selector. I've been hunting the cause relentlessly trying to figure out wtf is causing it. Then I remembered this mod and "uninstalled" it. Now it's back to normal. Good idea... poorly executed.
Aha, you need clear in headinclude:
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Open Main CSS and paste to below of Additional CSS Definitions box:
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

End!

[Lord Kirken Mor]

Whats the reasoning why someone would add this? The demo link shows something else.

[imranbaig]

The Demo site went through lots of upgrades and changes.
Probably I will update this with slimbox.

[honestdave]

i think about 20% of our members can't see the attachments. so we will probably try to make this an additional option that members can switch on.

[MR.BOSS]

i need help please! royal_spirits@hotmail.com

[Land]

Lovely mod! :D Installed. :up:

[Land]

Here is what you guys have to do to get rid of those errors that you have been getting, put an if condition around the script,


<if condition="THIS_SCRIPT == 'showthread'">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /></if>



This fixed editor wysiwyg problems! :up:

[Land]

I found new issues... unistalled.
It's a pity, it could be a nice mod.

[sleeper99]

To avoid the errors, apply installation step 1 to SHOWTHREAD template only (before </head> tag) , rather than headerinclude template. This should fix your problems..

This worked for me!! Thanks :)

[tiredoff]

I am using vbulletin 3.6.8 and i dont find <heade></head> in headinclude
any solution?

[Andyucs]

is there any way to make the images open up at say 600px x 600px

and have an enlarge button

i installed it and some members images are massive and blow full size

i need to control this

uninstalled till i get some info

nice work by the way

[utw-Mephisto]

I am using vbulletin 3.6.8 and i dont find <heade></head> in headinclude
any solution?

Same here ...

[k007]

you dont need to put it between <head></head> just place anywhere in the headerinclude, here is what my code looks like..

<if condition="THIS_SCRIPT == 'showthread'">
<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" /></if>
if you want place the css file under the vbulletin_css directory just change the start of every image url to "../../images.."

[Edward S]

The Demo link for this says I have to post at least 'two' messages to be able to see the any attachments?

Uh... pass!

[darkakira]

Apparently this also makes it so IE users can't post. At least that's what it does on vB3.6.8. PL2.

I'm looking into fixing it, but for now I must uninstall it from my main site.

[RFViet]

MQuote doesn't work with this Mod !!!!

[mrusdy]

problem to my VB Editor (https://vborg.vbsupport.ru/showthread.php?t=175618) :)

[donnie_ogm]

Hi I'm not sure this is the right place to post but I've got a problem...
I'm running now the 3.7 on my forum and this version should have this wonderful hack integrated.
It seems to be so since I found and activated this option in ACP.

But even if it's turning on it doesn't work and if I click a thumbnails in attachment it still load in a different page.

What could be the problem, please let me know something....

bye