Avatar/Image Reflection Effect

[Tralala]

https://vborg.vbsupport.ru/

This modification dynamically adds a subtle "reflection" effect underneath avatars and/or images on your forums. The reflection will automatically fade into your forum's background color, whatever it might be. You can also offer this effect as an option for your members' uploaded images via a BB Code.

https://vborg.vbsupport.ru/

This effect uses unobtrusive javascript to keep your code clean. It doesn't require additional server work. It works in all the major browsers - Internet Explorer 5.5+, Mozilla Firefox 1.5+, Opera 9+ and Safari. On older browsers, it'll degrade and your visitors won't notice a thing. Best of all, it's under 5KB!

"Simple. Unique. Classy. Thank you!"
- Forum admininstrator, JoeSixPack

"This mod gives my forum a slick, almost 3-D look!"
- Forum administrator, Tralala


Details:
1 file upload ("reflection.js") to forum's clientscript directory

1 template edit to "header" template

Optional edit: 1 for avatars in thread view ("postbit_legacy" template)
Optional edit: 1 for avatars in thread view ("postbit" template)
Optional edit: 1 for avatars in member profile ("MEMBERINFO" template)
Optional edit: 1 for profile picture in member profile ("MEMBERINFO" template)
Optional edit: 1 for avatars in Members List ("memberlist_resultsbit" template)
Optional edit: 1 for new BBcode (AdminCP -> Custom BB Codes -> BB Code Manager)
Optional edit, not recommended: 1 for ALL images posted inline via standard IMG BBCode ("includes/class_bbcode.php" file)

(All of the above optional edits involve simply inserting class="reflect" to the image HTML code, which adds the reflections. The code to replace for each edit is included in the .zip archive.)

See screenshots to see it in action...


My very first vBulletin hack! Kudos to the fine coders at vBulletin.org whose work inspires me.

Special thanks to Cow's Blog (http://cow.neondragon.net/) for the reflection.js code. Shared and distributed freely under MIT-style License.

Enjoy!!

[Tralala]

Avatar/Image Reflection Effect (aka "AIRE")

Version History

1.5 - (Upgraders, simply overwrite reflection.js in your forum's clientscript folder!)
-Added ability to vary height and the opacity of the reflections
-Fixed issue with Safari and landscape images
-Made reflection of images with specified dimensions better
-Removed wholeimage class
-Added scriptable reflections - Reflection.add(), Reflection.remove() - allowing for interactivity and flexibility. Reflections can respond to user actions (e.g. changing the reflection opacity when the image is hovered over or clicked.) For more information, see info and files at http://cow.neondragon.net/stuff/reflection/
-Added instructions for postbit template.

1.02
-added another optional edit, this time a BB Code available for your members to invoke on an image-per-image basis

1.01
-added one optional edit, for profile picture in member profile
-tweaked the display for avatars in member profile and Members List (removing 1px border to line up reflection better)

1.0
-initial release

[Boofo]

On the older browsers when it degrades, even though you can't see the reflection, does the avatar reduce to the original size or is it still elongated and looking like it has a space underneath is where the reflection should be?

[Tralala]

On the older browsers when it degrades, even though you can't see the reflection, does the avatar reduce to the original size or is it still elongated and looking like it has a space underneath is where the reflection should be?

On older browsers, there is no reflection under images, and no extra "space underneath." (In other words, images display exactly as they did before this modification was installed.)


Also note that this mod doesn't "elongate" the original image nor change it's dimensions or modify it in any way; it merely adds a reflection effect underneath. In fact, the original image is still right-clickable to download (or display in a new window or tab) in its original form.

[Boofo]

On older browsers, there is no reflection under images, and no extra "space underneath." (In other words, images display exactly as they did before this modification was installed.)


Also note that this mod doesn't "elongate" the original image nor change it's dimensions or modify it in any way; it merely adds a reflection effect underneath. The original image is still right-clickable to download in it's original form.

I meant the space where the reflection is, sorry about that. ;)

[Tralala]

I meant the space where the reflection is, sorry about that. ;)

Gotcha. So yeah, on older browsers... there is no reflection. And no "space" where the reflection would have been. It just displays the original image normally, as it always had been displayed (before this mod.)

[Boofo]

Gotcha. So yeah, on older browsers... there is no reflection. And no "space" where the reflection would have been. It just displays the original image normally, as it always had been displayed (before this mod.)

Thank you, sir. I will give this a shot then. ;)

[Ziki]

Installed Maestro!

[OrangeFlea]

What does this hack do to animated avatars?

[wizardan]

Installed.
Unfortunately, my old favorite, Netscape 7.2, doesn't seem to pick it up.

[Snake]

Pretty nice. Works fine on Firefox!

[Tralala]

What does this hack do to animated avatars?

Reflections of animated images only work correctly in Internet Explorer.

[Tralala]

Update 1.01

-added one optional edit, for profile picture in member profile
-tweaked the display for avatars in member profile and Members List, removing 1px border to line up reflection better

[The Chief]

Will give this a shot :)

[firstrebel]

Tried this on my dev site using steps 1 -3 and it didn't work. I am using the current version of IE.

Bob

[Tralala]

Tried this on my dev site using steps 1 -3 and it didn't work. I am using the current version of IE.

Hmm... it should...
Do you have javascript turned on in IE?
Does the effect display in other browsers for you, like Firefox?

[firstrebel]

Javascript is on, and it does not show in FF either. I will try it on my live site later and let you know.

Bob

[TruthElixirX]

Awesome looking! clicked install.

[Tralala]

Reflections of animated images only work correctly in Internet Explorer.

Actually, allow me to clarify: animated images will reflect in all the major browsers. Only in Internet Explorer 5.5+, however, does the reflection animate as well. (In the others, it is just a static reflection.)

And as mentioned previously, if the visitor's browser happens to not be compatible... avatars and images display normally, just as before. The visitor wouldn't even know this effect was installed.

[Ziki]

Your zip is corrupt

[Tralala]

Your zip is corrupt

I've just re-uploaded it, and removed the screenshot samples (since they're on display in the first post.) Let me know if that works for ya.

[Ziki]

Nope still doesn't

[Tralala]

Nope still doesn't

Weird; others have downloaded it fine...

Anyway, I just zipped it on a different computer using a different app. Please try downloading again, thanks!

[Barakat]

installed and working fine >

[Tralala]

Pretty nice. Works fine on Firefox!

Thanks, Lil Ripsta. Please click Install. :cool:

[Tralala]

Javascript is on, and it does not show in FF either. I will try it on my live site later and let you know.

Sounds good. I've tested it and confirmed it works over here, as have quite a few others... so am curious to hear feedback after you've tested on your live site.

[whitetigergrowl]

Working awesome. Great job. Thank you!

[Tralala]

I just made a slight tweak to the installation procedure, and that is putting the reflection.js file into the clientscript directory instead. (It's more appropriate there, than loose in the forum's parent directory.) I then updated the "header" template change to match this new location.

Other than that, the modification is exactly the same. Such a minor change, not worthy of a new version number.

[Boofo]

LOL I did that when I first installed it. Better to keep the js files together. ;)

[board.trash]

thank you, a very nice mod!

[GrendelKhan{TSU]

way cool! works great too!

:D

<< clicks install

[Tralala]

installed and working fine >

thank you, a very nice mod!

way cool! works great too!

:D

<< clicks install


You're welcome and thanks for the compliments! :banana:

[Tralala]

Update: 1.02
-added another optional edit, this time a BBCode available for your members to invoke on an image-per-image basis



To create a BB Code that your members may choose to invoke when they want to add the reflection effect to their linked, inline images... go to AdminCP -> Custom BB Codes -> BB Code Manager.
Click "Add new BB Code." Enter in the following and then "Save."

Title: Image with reflection

Tag: imgreflect

Replacement: <img src="{param}" class="reflect" />

Example: http://www.google.com/images/logo_sm.gif

Description: Adds reflection effect to images.

Use {option}: No


Note that the "Example" will not display with a reflection there, because the javascript isn't linked in the AdminCP pages. However, the example will display properly on your forum's FAQ/BB Code page: http://www.yourforumname.com/forums/misc.php?do=bbcode

[babynino]

Thanks for this cool hack. Installed :)

[Nachtfalke]

Nice one. Fits my design perfectly and works like a charm

[C_P]

I added this but does not seem to work? Wonder where I may have went wrong.

[Tralala]

I added this but does not seem to work? Wonder where I may have went wrong.

Due to postbit's horizontal orientation, adding this effect to avatars on forums using that layout will make it look very strange, and wasteful of space. Therefore I didn't include those instructions with the hack. It makes much more sense on the postbit_legacy (vertical) layout.

I checked your site and it looks like you are using postbit and not postbit_legacy.

So, which of the edits did you apply?

The easiest one to test with, I think, would be the BBcode. You can just add that in and make a test post with an embedded image (wrapped inside the new [IMGREFLECT] tag) and see if the reflection effect works for you.

If so, then you can start editing the templates/codes.

[Boofo]

Due to postbit's horizontal orientation, adding this effect to avatars on forums using that layout will make it look very strange, and wasteful of space. Therefore I didn't include those instructions with the hack. It makes much more sense on the postbit_legacy (vertical) layout.


That's why I only installed it for the profile. ;)

[C_P]

I did get this to work fine. I was adding it to the wrong section and did not follow all the instructions.
I also wanted to say this is a VERY nice hack and really add a nice look to your site.
I just found out this is the first hack for Tralala and for it to work flawlessly as it is, not a bad one I must say!

[Tralala]

I did get this to work fine. I was adding it to the wrong section and did not follow all the instructions.
I also wanted to say this is a VERY nice hack and really add a nice look to your site.
I just found out this is the first hack for and for it to work flawlessly as it is, not a bad one I must say!


Thanks C_P!

And yes, it is definitely looking very nice on your site...

With your permission, here are screenshots so everyone can see the reflection effect in action:

http://homepage.mac.com/joshr/trl/reflectionsamples/screen1.jpg

http://homepage.mac.com/joshr/trl/reflectionsamples/screen2.jpg

[C_P]

No problem. They look great!

[pcoskat]

Wow! How nice is THIS mod?!?!

I can't wait to get this going on my board!

Ok..off to find a coder :)

[Tralala]

Most of the samples posted have been against a white or light background... here are some examples against some other colors.

I think the effect really shines against darker, or black backgrounds:

http://homepage.mac.com/joshr/trl/reflectionsamples/whitesample.jpg

http://homepage.mac.com/joshr/trl/reflectionsamples/blacksample.jpg

http://homepage.mac.com/joshr/trl/reflectionsamples/greensample.jpg

[Uncle Buck # 2]

This is very cool.

We have just added it and it looks GREAT!!

Thank you for your work, it is much appreciated.

Buck

[kall]

Have a look here (http://www.nzboards.com/forums/news-views-issues/telecom-forced-unbundle-local-loop-27842/) please .. see how my avatar (transparent .gif) has jaggies on its reflection?

Also, the avatar of extremeslick looks a bit weird..

[Tralala]

Have a look here (http://www.nzboards.com/forums/news-views-issues/telecom-forced-unbundle-local-loop-27842/) please .. see how my avatar (transparent .gif) has jaggies on its reflection?

Also, the avatar of extremeslick looks a bit weird..

They look great on my end, actually. Here are screenshots:

http://homepage.mac.com/joshr/trl/reflectionsamples/kall.jpg http://homepage.mac.com/joshr/trl/reflectionsamples/extremeslick.jpg

What browser are you using?

[kall]

You are quite right!

Ahh. It looks fine in IE, but bad in FF 1.5.0.3, like the attached.

[Tralala]

Ah, okay, I see. It seems Firefox 1.5.x has an issue with reflections of transparent GIFs. Let me look into that...

[Code Monkey]

Any new developements on this project?

[Tralala]

Any new developements on this project?

Yep, a few improvements on the way soon. As well as some code-tightening, thanks to a friend... :cool:

[phkk]

Nice

[icare]

I think my forum uses postbit not postbit legacy.. ?

i tried editing postbit legacy but I didn't work in in thread..
please help

[Tralala]

I think my forum uses postbit not postbit legacy.. ?

i tried editing postbit legacy but I didn't work in in thread..
please help

No problem icare, I will update the instructions shortly for use in postbit.

[icare]

No problem icare, I will update the instructions shortly for use in postbit.


Thanks! You are so sweet!:banana:

[Tralala]

icare:

To add the reflection effect underneath avatars in thread view, FIND in "postbit" template:


<if condition="$show['avatar']"><td class="alt2"><a href="member.php?$session[sessionurl]u=$post[userid]"><img src="$post[avatarurl]" $post[avwidth] $post[avheight] alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" /></a></td></if>
<td nowrap="nowrap">


REPLACE THAT WITH:

<if condition="$show['avatar']"><td class="alt2"><a href="member.php?$session[sessionurl]u=$post[userid]"><img src="$post[avatarurl]" class="reflect" $post[avwidth] $post[avheight] alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" /></a></td></if>
<td nowrap="nowrap">

[Tralala]

Updated to version 1.5

-Added ability to vary height and the opacity of the reflections
http://homepage.mac.com/joshr/trl/reflectionsamples/varyheightandopacity.jpg

-Fixed issue with Safari and landscape images
-Made reflection of images with specified dimensions better
-Removed wholeimage class
-Added scriptable reflections - Reflection.add(), Reflection.remove() - allowing for interactivity and flexibility. Reflections can respond to user actions (e.g. changing the reflection opacity when the image is hovered over or clicked.) For more information, see info and files at http://cow.neondragon.net/stuff/reflection/
-Added instructions for postbit template.


To upgrade, simply overwrite reflection.js in your forum's clientscript folder.

[kall]

The jaggies are still visible using Firefox..

[Tralala]

The jaggies are still visible using Firefox..

Yes, as mentioned in the readme.txt, reflections of curved / transparent GIFs do not render well in Firefox 1.5. It's a bug in Firefox's canvas support, and there's not much I can do about it.

[kall]

Your update didn't mention to read the readme. ;)

(I see it there now.. ahh well, waiting on Mozilla to release a fixed one.) :)

[futuredood]

VERY nice hack. simple and easy to install, and hardly any server load. one thing you can do is clean up the readme.txt file, for some reason it's really messy (bunch of square symbols).

also, how do you go about changing the opacity and height settings?

[Tralala]

VERY nice hack. simple and easy to install, and hardly any server load.

Thanks!

one thing you can do is clean up the readme.txt file, for some reason it's really messy (bunch of square symbols).

Fixed. I've replaced the attachment... please download and let me know if it looks better?

also, how do you go about changing the opacity and height settings?

From the ReadMe:

Customizing height and opacity of reflections
------------------------------------------------
The reflection effect, by default, will be half the height of the original image. Thus, the height of the image, plus reflection, will be 1.5x the image's original height.
You can vary the height of a reflection by adding rheight followed by the desired height (in percent) to the CSS class list.
To use a reflection 33% the height of the original image: class="reflect rheight33"

The default opacity of reflections is 50%.
You can vary the opacity of a reflection by adding ropacity followed by the desired opacity (in percent) to the CSS class list.
To use a reflection with 30% opacity: class="reflect ropacity30"

You can combine these two options. To create a 80% height 40% opacity reflection use:
class="reflect rheight80 ropacity40"


Hope this helps.

[futuredood]

looks better, nice job!

[oberheimhaven]

Man I love this thanks, anyway to get my banner to reflect if so let me know how!!

Thxs again
Ober:banana:

[Danny Diamond]

Does this work for 3.5.3?

I can't get it to work for some reason.

*goes and criees in corner*

EDIT - Nevermind. I installed the clientscript file to the wrong spot.

YOU ROCK !!!

[Tralala]

Man I love this thanks, anyway to get my banner to reflect if so let me know how!!



Simply add

class="reflect"

to the HTML code for that specific image, to add a reflection.

[oberheimhaven]

<!-- logo -->
<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center"> class="reflect"

Im new is this correct

Ths again for the hack and the help!!!

[Tralala]

Im new is this correct

Ths again for the hack and the help!!!

In your "header" template, find this:

<td align="$stylevar[left]"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td>

and replace it with this:

<td align="$stylevar[left]"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" class="reflect" border="0" alt="$vboptions[bbtitle]" /></a></td>


Although, let me add this... this reflection script is good for avatars since they are varied and always changing. Since your logo is a static image though, it probably would make more sense to generate a similar reflection (say, in an art application like Photoshop) and upload that complete image instead. Yes, it's only one javascript call, but it'll be on every page of your forum, and it may effect page-loading performance on the user side.

[R.Solutions]

Thanks for the hack, installed.

[Tralala]

You're quite welcome!

[edeline]

thanx... work fine :)

[Tulsa]

Is anyone else having a issue when you go to new posts, the newest post you've not read is no longer showing at the top of the screen? I'm finding that it's taking me back 3 or 4 posts at times. I've moved the reflection javascript around a bit with no change, but remove the javascript and everything is normal.

[Deimos]

Has anyone else had problems with their browser freezing when loading pages with the reflection mod added?

When it's on my forum, if you load a large thread or forum listing, it freezes poeple's browsers momentarily (3-5 seconds)
When removing the code from the header template, it doesn't do it.

[Tralala]

Has anyone else had problems with their browser freezing when loading pages with the reflection mod added?

When it's on my forum, if you load a large thread or forum listing, it freezes poeple's browsers momentarily (3-5 seconds)
When removing the code from the header template, it doesn't do it.

I've gotten sporadic reports about this too, and in every case it was specific to Internet Explorer (6 and 7.) I think IE just has a hard time with this specific javascript code.

The momentary freeze does not happen with Firefox, Netscape, Safari, Camino, etc. Just IE. I'm not proficient enough with Javascript to be able to fine-tune or troubleshoot this, and my free-time is limited, but am open to any outside assistance.

[Deimos]

Yea, it was with IE that it kept freezing, I can't say I noticed it when using Firefox.

Darn :P

[I||usi0nz]

nice bro, i'll try this out when i get a chance.

[Renmiri]

lovely addition to pictures!

[rweber93]

Is there any way to reflect the signatures? :)

[Ziki]

Tralala this doesn't work by me :D

[Tralala]

Tralala this doesn't work by me :D

In what way? No reflection at all? Have you tried other web browsers?

[TTG]

Works well on 3.6.1
Clicked install .. nice addition

[Ziki]

Yes I tried IE 6 and mozilla firefox 1.5

[Tralala]

Yes I tried IE 6 and mozilla firefox 1.5

I'm thinking you didn't install it correctly then. Too many folks have installed without any issues.

Review the instructions and try again.

[Ziki]

I tried it like 5 times. :S

[Tralala]

Sorry, Ziki. I'd need more specific details to be able to help you.

[Ziki]

Ok the file reflection is in clientscript folder.Then I just added class="reflect" to postbit,_legacy and memberinfo.

[Ziki]

And also if the bbcode doesn't work I think it is a problem with the file

[Tralala]

You also have to edit the "header" template.

[Ziki]

I did.I also tried it with headinclude but none did work!

[Tralala]

Not sure what to say. If there was something wrong with the file, I think any one of the other 71 folks who've installed this would've chimed in.

You've installed it incorrectly, I'm willing to bet on it. If you'd like to give me an admin login, I'll fix it for you.

[Ziki]

Look dude.I am a coder,I am not stupid :D

I uploaded the script to clienscript and added the code to header.Then class="reflect" to all the image codes.Does this crash with some hacks?

[Tralala]

Does this crash with some hacks?

Not that I'm aware of. Do you have other hacks installed that tread on similar ground (ie: image resizing, manipulation, etc.)?

[Ziki]

No.But please double check the file because neither the bbcode doesn't work so I don't think it was caused by me

[Tralala]

Checked, double-checked, triple-checked. Also checked 4 friends' forums and see it's working on their sites, too.

Here's another check. TTG posted above (https://vborg.vbsupport.ru/showpost.php?p=1083557&postcount=80):
Works well on 3.6.1
Clicked install .. nice addition

So go on and visit his site (http://www.techguyscafe.com/forums/). Sample thread here. (http://www.techguyscafe.com/forums/showthread.php?t=5700) I see reflections underneath every avatar in postbit_legacy... do you?

[kall]

Checked, double-checked, triple-checked. Also checked 4 friends' forums and see it's working on their sites, too.

Here's another check. TTG posted above (https://vborg.vbsupport.ru/showpost.php?p=1083557&postcount=80):


So go on and visit his site (http://www.techguyscafe.com/forums/). Sample thread here. (http://www.techguyscafe.com/forums/showthread.php?t=5700) I see reflections underneath every avatar in postbit_legacy... do you?
Given that "reflection.js" is nowhere to be found in Ziki's source, it's pretty unlikely. ;)

Ziki, is there any reason you have not once provided a sample link to where the reflection *should* be working? If not, do post one, so it can be more easily troubleshot.

[Shazz]

Is anyone else having problems besides Ziki?
Has anyone tried this for the 3.6.x...

[Tralala]

Is anyone else having problems besides Ziki?

Other (browser specific) issues have been mentioned and I've answered them all in this thread. No one yet has said it just "doesn't work" like Ziki has. I contend he hasn't installed it properly, or has Javascript off in his browser or something. Time will tell. I'm eager to hear if he can see the reflection effect on other sites (where it is known to be properly installed.)

Has anyone tried this for the 3.6.x...
Yes, also covered in this thread. It works fine.

[Shazz]

When you click refresh on the page.. Its slow on reacting to the reflection , because its the last thing that loads on the page, But its pretty sweet
*clicks install

To See a WORKING VERSION on a site visit

http://vbshazz.com/showthread.php?t=31

Account:
User:test
Password:test

[Ziki]

<a href="http://www.zikihideout.com/forums/showthread.php?p=1589#post1589" target="_blank">http://www.zikihideout.com/forums/sh...=1589#post1589</a>

But you have to use the default style because I am still working on the new one.

[Tralala]

To See a WORKING VERSION on a site visit

http://vbshazz.com/showthread.php?t=31

Account:
User:test
Password:test

Or here, no registration required, more colorful avatars:
http://www.techguyscafe.com/forums/showthread.php?t=5700

[Ziki]

Or here, no registration required, more colorful avatars:
http://www.techguyscafe.com/forums/showthread.php?t=5700


Either I am blind or the reflection is invisible.No reflection for me there

[Shazz]

Lol me too, Tralala I can't see yours either

[Ziki]

EDIT: Now it shows up

[kall]

http://www.zikihideout.com/forums/showthread.php?p=1589#post1589

But you have to use the default style because I am still working on the new one.
Unfortunately, that page results in a no permission message.

[Ziki]

Oh yeah.Username : Test
password : test

[devilrulez]

Excellent one.........

*installed*

[Tralala]

EDIT: Now it shows up

What did you do differently? Clear your cache? Use a different browser?

Here's another sample page...
http://cow.neondragon.net/stuff/reflection/
(this is the source of the original javascript.)

[Ziki]

What did you do differently? Clear your cache? Use a different browser?

Actualy nothing :D

[Ziki]

Now I realized something.Could it be because of the staff avatars things installed?

[Tralala]

Now I realized something.Could it be because of the staff avatars things installed?

I suppose, anything's possible. Specifically what add-on are you referring to? Link please?

Of course you could try disabling it and see if this hack starts working. Let us know.

[Ziki]

<a href="https://vborg.vbsupport.ru/showthread.php?t=122623" target="_blank">https://vborg.vbsupport.ru/showthread.php?t=122623</a>

But I think it should work anyway because I added class="reflect"

[Tralala]

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

But I think it should work anyway because I added class="reflect"

Try disabling that one and see if this one starts working.

[Tralala]

Any progress, Ziki?

[AMG021]

does it work for 3.6.2?

[Shazz]

does it work for 3.6.2?
Yes.

[bolly.beats]

Well its not working for me :(, where i m going wrg can someone help me?

Like u told in tutorial, in step 3(a):

Step 3a (optional, for forums using postbit:) To add the reflection effect underneath avatars in thread view, FIND in "postbit" template:


<if condition="$show['avatar']"><td class="alt2"><a href="member.php?$session[sessionurl]u=$post[userid]"><img src="$post[avatarurl]" $post[avwidth] $post[avheight] alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" /></a></td></if>
<td nowrap="nowrap">


REPLACE THAT WITH:


<if condition="$show['avatar']"><td class="alt2"><a href="member.php?$session[sessionurl]u=$post[userid]"><img src="$post[avatarurl]" class="reflect" $post[avwidth] $post[avheight] alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" /></a></td></if>
<td nowrap="nowrap">

But i dnt have that so what i did is changed it to :

<if condition="$show['avatar']">
<div class="smallfont">
&nbsp;<br /><a href="member.php?$session[sessionurl]u=$post[userid]"><img src="$post[avatarurl]" $post[avwidth] $post[avheight] class="reflect" alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" /></a>
</div>
</if>

Same thing with i changed it in postbit_leagacy tempelate. I think that should work. But dunno, wat's wrong?

[Tralala]

Try changing it to

<if condition="$show['avatar']">
<div class="smallfont">
&nbsp;<br /><a href="member.php?$session[sessionurl]u=$post[userid]"><img src="$post[avatarurl]" class="reflect" $post[avwidth] $post[avheight] alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" /></a>
</div>
</if>

If that doesn't work... I dunno.

Do you have any other hacks installed that modify the avatar appearance, like usergroup frames or glow/color effects? Those may be interfering.

[Panagioths]

I have a custom theme called "Aria" and I can't find the <!-- content table --> that you mention at the installation. Any ideas how I can insert it in the template's header?

[Lord Kirken Mor]

This work on 3.6 at all?

[Shazz]

This work on 3.6 at all?

:up:

[Tralala]

This work on 3.6 at all?

Yes it does.

[Lord Kirken Mor]

ok cool whats the difference between the edits for postbit & postbit_legacy?

[Shazz]

ok cool whats the difference between the edits for postbit & postbit_legacy?

postbit=horizontal
Postbit_legacy = Verticle
depends which one you use

[Lord Kirken Mor]

Thanks, it's working now.

[Panagioths]

I have a custom theme called "Aria" and I can't find the <!-- content table --> that you mention at the installation. Any ideas how I can insert it in the template's header?

anyone? :confused:

[Tralala]

Just put that line at the very top of your template header, it should work there too. Let us know if not.

[Lord Kirken Mor]

how would I make this work for the Admincp?

[Tralala]

how would I make this work for the Admincp?

What image in particular are you hoping to enhance in the AdminCP? And why? (Just curious)

[Shazz]

What image in particular are you hoping to enhance in the AdminCP? And why? (Just curious)

LOL
Yes Im very curious too..
Theres only one image in the admincp and modcp I know of...

[Lord Kirken Mor]

well, the ACP logo of coarse, because i like the effect so much, I want to use it in other places too.

[Tralala]

Glad you like it. For static images like the ACP logo, you are better off rendering the effect in a graphic editor. (Or just use the reflection.js files and making it work in an "offline" web page, then take a screenshot.) Basically, save it as a GIF or JPEG with the reflection instead. That way you don't need to mess with changing the ACP or invoking javascript on that page.

The point of this mod is that is reflects "on the fly" avatars and images, which are constantly changing on your forum. There'd be no way to do it otherwise.

[Doc31]

Is there a way to make a check box in say the vb options page in the usercp to enable/disable this feature? :confused:

Im gonna have a look and see if i can make it work for me using some modz if not a bit of code to do this would be cool as some people have animated avatars that can be a bit of a strain on the javascript code. :(

Thanx :D

[Tralala]

Is there a way to make a check box in say the vb options page in the usercp to enable/disable this feature? :confused:

Im gonna have a look and see if i can make it work for me using some modz if not a bit of code to do this would be cool as some people have animated avatars that can be a bit of a strain on the javascript code. :(

Thanx :D

There's no more or less strain on the javascript code; it either works or it doesn't. Animated avatars reflect nicely in IE, and with a static image in any other browser. But there's no delta of "strain." Sure, Javascript in general can bog down a user's old/slow computer, but that would have nothing to do with whether or not an image to be reflected is animated.

That said, I'm sure you could whip up lots of checkboxes...
AdminCP: Reflect all avatars? (perhaps make it usergroup based)
AdminCP: Reflect THIS avatar? (ie: on a per user basis)

Or...
UserCP: Reflect MY avatar?
UserCP: Reflect avatars of OTHERS?

I don't have time to incorporate any of this, but if you do, it would be great if you could share it here.

[Doc31]

No problems thanks for the reply.. you have given me some good pointers if i come up with any additions i will let you know and be glad to share.

thanks :)

[Ekremxx]

i have setup that but all images to be that how i can fix that?
http://homepage.mac.com/joshr/trl/screenshots/sample.jpg

[Tralala]

i have setup that but all images to be that how i can fix that?

Huh?

Sorry, I've read your question a few times now and have no idea what you are asking.

[Dotara]

Hi,

This is a wonderful modification and installed it for vB 3.6.7 on postbit_legacy. Seems like it's just working fine but reflection avatar showing a little bit left than normal avatar. You'll understand if you take a look at my attachments. How to make reflection avatar in middle like normal avatar? I'm using ForumThemes Galaxy skin.

Many thanks :)

[Shazz]

Seems like you removed the <div align="center"> or <center>

[Dotara]

Seems like you removed the <div align="center"> or <center>

Hi Shazz,

Thank you very much. I've done it. :)

[AnT0NiuS]

I have couple questions.

1. I have Opera 9.21 and I have a problem with animated images. It doesn't reflect in Opera 9.21 browser. IE and Firefox works fine , but Opera not.

2. Is it possible to make this feature optinal for users. Can user choose by himself the avatar reflection?

Thank you very much.

[Shazz]

Hi Shazz,

Thank you very much. I've done it. :)

Great! :)

[Stefano Virgill]

Doesn't work at all here.

vb 3.7 neighter Opera nor Firefox

Unistalled

[Tralala]

Sorry to hear that Stefano, but just FYI, the latest release of vBulletin is 3.6.8. Not sure how you're running 3.7. Still, the hack is working for everyone that has installed it properly on 3.6.x.

So either you didn't install it properly, or it's not compatible with some pre-release of vBulletin 3.7 wyou've got your hands on.

[Stefano Virgill]

Hi tralala,
I know it's very strange cuz look like I'm the only one reporting it.
I just uploaded the .js file in the folder you wrote in the install instructions, then changes added the class for the reflections changing the code you wrote.
Anything else to do?

Thanks

Stefano

[Tralala]

Did you do the edit to the "header" template?

Which other templates did you edit?
For avatars in thread view?

[Stefano Virgill]

Hi,
I didn't edit the header cuz I don't need the reflection on my logo.
I tried with the modifications number 2, 3 and 4 in the instructions.
Nothing is changed in the forum, checked with opera and firefox.

Bye

Steve

[Tralala]

Editing the header is necessary for this hack to work (that's why it's in the instructions,) and it has nothing to do with adding a reflection to your logo.

Just follow the instructions as written, and the hack will work.

[Stefano Virgill]

It works man!
Me stupid :(

Thank you very much!
Excellent mod!

Steve

[Deaz]

Nice, this hack is very beautiful :) thanks man ;) good job

[Katafraktos]

This is an excelent mod, i have it on my forum for some time now, and its great.
But, today, i upgraded my personal browser firefox 2.0.0.10 and from now on, it does not work anymore on firefox!

is there anyway i can make it work, not on my browser only, but in general, i thing that the automatic upgrade of firefox will be installed in more than one users of our forum.

thank you again ;)

[Tralala]

This is an excelent mod, i have it on my forum for some time now, and its great.
But, today, i upgraded my personal browser firefox 2.0.0.10 and from now on, it does not work anymore on firefox!

is there anyway i can make it work, not on my browser only, but in general, i thing that the automatic upgrade of firefox will be installed in more than one users of our forum.

thank you again ;)

Thanks for the kind words.

I've confirmed this is a bug with Firefox 2.0.0.10. There's not much I can do to address it, I suspect it'll be fixed by them in 2.0.0.11.

(It's working fine in a newer Mozilla nightly build: http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/2007-11-27-14-mozilla1.8/)

So... hang tight. :)

[Flygye]

Hi you guys.

I have installed this hack on my forum, and it looks realy nice :)
But i have a little problem, when the forum loads it freeze by 3 seconds and then after the 3 seconds it works fine.

I have commented the code for the script in header template , and the forum works normaly, but if i put the script in the header template it freeze by 3 seconds.

What it's the problem, anyone knows?

[Tralala]

Thanks for the kind words.

I've confirmed this is a bug with Firefox 2.0.0.10. There's not much I can do to address it, I suspect it'll be fixed by them in 2.0.0.11.

(It's working fine in a newer Mozilla nightly build: http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/2007-11-27-14-mozilla1.8/)

So... hang tight. :)

As predicted, this is now working again, with the new release of Firefox 2.0.0.11.

[Tralala]

Hi you guys.

I have installed this hack on my forum, and it looks realy nice :)
But i have a little problem, when the forum loads it freeze by 3 seconds and then after the 3 seconds it works fine.

I have commented the code for the script in header template , and the forum works normaly, but if i put the script in the header template it freeze by 3 seconds.

What it's the problem, anyone knows?

I've heard this issue come up before and I believe it's older-browser-specific. That is, whatever browser you are in is struggling to run the javascript that renders the reflection.

What browser/version/platform are you using? Does the same 3 second delay happen when you try a different browser?

[DigitALL2]

I have read all posts here and results are various, for some it worked this hack for some not.
I have installed it under two skins (one bright and one dark) and for one moment I could see the reflections. Then it was just not there and nothing was changed.

I noticed that once I log out (as admin) and go see some threads the reflexion is back and every time with no problem! As soon as log back in, the reflexion disappears.
I asked one moderator to check and it was the same, when logged did not see it and when logged out the reflexion was there.
I followed the installation to the letter for avatars in thread view (postbit template and header).

Any idea why this problem? :confused:

[Termi]

hi, all

is it possible to make a refleciton on header image ?

i have vb 3.6.8

and this header template ;)

<META http-equiv=Page-Exit content=BlendTrans(Duration=0)>
<META http-equiv=Page-Enter content=BlendTrans(Duration=0)>
<!-- Start vBGuides Season -->
<if condition="$vboptions[guidesvbs_onoff] == 1">
<if condition="$vboptions[guidesvbs_area] == 0">
<script type="text/javascript" src="season/$vboptions[guidesvbs_type].js"></script>
</if></if>
<!-- End vBGuides Season -->
<script type="text/javascript">
<!--
function openRadioAndTV(){
radioAndTVWindow = window.open('radioandtv.php', 'radioandtv', 'directories=no,height=500,width=700,location=no,m enubar=no,resizable=yes,status=no,scrollbars=yes,t oolbar=no');
}
//-->
</script>

<!-- logo -->
<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td><img src="$stylevar[imgdir_misc]/logo.gif" border="0" alt="" /></td>
</tr>
</table>
<!-- /logo -->
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td><a href="index.php"><img src="$stylevar[imgdir_misc]/homepage_nav.gif" border="0" alt="" /></a></td>
<if condition="$show['member']">
<td><a href="usercp.php"><img src="$stylevar[imgdir_misc]/youraccount_nav.gif" border="0" alt="" /></a></td>
</if>
<td><a href="memberlist.php"><img src="$stylevar[imgdir_misc]/memberlist_nav.gif" border="0" alt="" /></a></td>
<td><a href="calendar.php"><img src="$stylevar[imgdir_misc]/calendar_nav.gif" border="0" alt="" /></a></td>
<td><a href="search.php"><img src="$stylevar[imgdir_misc]/search_nav.gif" border="0" alt="" /></a></td>
<td id="usercptools"><a href="$show[nojs_link]#usercptools"><img src="$stylevar[imgdir_misc]/quicklinks_nav.gif" border="0" alt="" /></a><script type="text/javascript"> vbmenu_register("usercptools",true); </script></td>
<td><a href="faq.php"><img src="$stylevar[imgdir_misc]/faq_nav.gif" border="0" alt="" /></a></td>
<td width="100%"></td>
</tr>
</table>

<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td><img src="$stylevar[imgdir_misc]/extralinks.gif" border="0" alt="" /></td>
<td width="100%" style="padding-left:10px;">
<a href="/forum.php" class="sublink">Forum</a>
<a href="/halloffame.php" class="sublink">Halle der Champions</a>
<a href="/gamemenue.php" class="sublink">Spielhalle</a>
<a href="/guthaben.php" class="sublink">Bank</a>
<a href="/credits.php" class="sublink">Kredit</a>
<a href="javascript:openRadioAndTV()" class="sublink">TV und Radio</a>
</td>
</tr>
</table>

<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td><img src="$stylevar[imgdir_misc]/top-left.gif" border="0" alt="" /></td>
<td width="100%" style="background-image:url('blueevolution/misc/top-bg.gif'); background-repeat:repeat-x;"></td>
<td><img src="$stylevar[imgdir_misc]/top-right.gif" border="0" alt="" /></td>
</tr>
</table>

<!-- content table -->
<script type="text/javascript" src="clientscript/reflection.js"></script>
$spacer_open

$_phpinclude_output

can you help me pls thanks

regards Termi

[crakker56]

Is there a way to make a check box in say the vb options page in the usercp to enable/disable this feature? :confused:

Has anyone been able to make this??

[dancue]

Can we get the installation instructions revised for the latest versions of vbulletin? Some of the coding has changed.

I managed to figure out postbit legacy for those of you interested...
Step 3 (optional, for forums using postbit_legacy:) To add the reflection effect underneath avatars in thread view, FIND in "postbit_legacy" template:



<div class="smallfont">
&nbsp;<br /><a href="member.php?$session[sessionurl]u=$post[userid]"><img src="$post[avatarurl]" $post[avwidth] $post[avheight] alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" /></a>
</div>


REPLACE THAT WITH:



<div class="smallfont">

&nbsp;<br /><a href="member.php?$session[sessionurl]u=$post[userid]"><img src="$post[avatarurl]" $post[avwidth] $post[avheight] class="reflect" alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" /></a>

</div>

[ka81]

whould you please port it for vB 3.7.x (3.7.0) ??
or it's already created somewhere here??

[TimberFloorAu]

Made my day mate Thanks.

http://www.yobromofo.com/forum/attachments/notices/569d1217044958-relection-reflected_avatar.gif

[columbusgeek]

Easy to add, works great. thanks.

[itsheinz]

pretty nice ..bu i got a little prob with this.its like it isnt centered,well im talking about the avatar.

[Tralala]

Hi all. I noticed this reflection stopped working with Safari 4 and Google Chrome. To fix this, replace reflection.js (in your clientscripts folder) with the new version, available for download here. (http://cow.neondragon.net/stuff/reflection/)

[m!dn!ght]

hi
can you port this nice mod for 3.8.x please ?

[MagicThemeParks]

Works great with 3.7.4 and 3.8.4

Simply follow the instructions to download the latest javascript here: http://cow.neondragon.net/stuff/reflection/

And, follow dancue's instructions in this post for the postbit changes: https://vborg.vbsupport.ru/showpost.php?p=1471979&postcount=157

[ka81]

Works great with 3.7.4 and 3.8.4

Simply follow the instructions to download the latest javascript here: http://cow.neondragon.net/stuff/reflection/

And, follow dancue's instructions in this post for the postbit changes: https://vborg.vbsupport.ru/showpost.php?p=1471979&postcount=157

i uploaded http://cow.neondragon.net/stuff/reflection/reflection.js
i added to header <script type="text/javascript" src="clientscript/reflection.js"></script>
i added to postbit_legacy class="reflect"

in IE it's changed (but wit visual problems) - reflected picture is wider and has border - http://files.ka81.com/pic/reflectioner.jpg
in Opera - no changes.
vB 3.8.2
:(

[SorentoUltimate]

Very good Mod !!! Thanks Tralala !!!

I make all the changes you said to instruction to have reflection effect to my forum.
I download the latest jevacript from here http://cow.neondragon.net/stuff/reflection/

After all that i have Reflection Effect don't apper to PostBit_Legacy and Meet Our Staff (in all other places work perfect).

After a lot of hours searching the problem i can say that the problem exist into JavaScript.

If i see the source code of the page (CTRL + U at Firefox) the javascript exist and the image class are reflect.

I don't know a lot about javascript to find the problem and solve, for that reason i need your help.

if you need more information or something else contact with me.

SorentoUltimate

[Fluke667]

I want this work on my vbulletin :(