About This Page: This is a discussion on Avatar/Image Reflection Effect within the vBulletin Add-ons forums, part of the Free vBulletin Modification Releases category, at vBulletin Modification Discussions. 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
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.
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 for the reflection.js code. Shared and distributed freely under MIT-style License.
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)
Installed it..
Though the modifications in template were not identical in my style, so I had to copy out the part needed to add the reflect and add it in the part similar of my style, and it works nice
So for others, if I could, you can
this would look great on my site.
let me push the limits a bit. is it passable to use this code with videos? It would be kind of cool. My site deals with the polishing of natural stone. I think it would look great, it would look as if it is on a granite table.
Hi.
Can please somebody help me implement "reflect" to my vBulletin forum. I hope it works with avatars too.
I'm just a gig...beginer. Somebody, please?
File is in the right directory, but what template should I edit, I didn't get it. How, I know, but what and where? It's not clear to me. thx
I have a question, what happens on animated avatars ?
Animated images get the reflection effect too, in all the major browsers. Only in Internet Explorer 5.5+, however, does the reflection animate as well. (In the other browsers, the reflection is static.)
let me push the limits a bit. is it passable to use this code with videos?
The javascript code doesn't handle video files I'm afraid. As mentioned above, though, it does work with animated GIFs, if you could get by with that...
Hi.
Can please somebody help me implement "reflect" to my vBulletin forum. I hope it works with avatars too.
I'm just a gig...beginer. Somebody, please?
File is in the right directory, but what template should I edit, I didn't get it. How, I know, but what and where? It's not clear to me. thx
Start with the basics. First edit the "header" template (as the ReadMe states.)
Then to get the effect for your forum's avatars, depending on which template you use, edit either the "postbit_legacy" or "postbit" template. See how that works before taking it further.
(Is that what you mean, or is your question more general, as in, how to edit templates in the first place?)
I don't believe Tralala supports this mod anymore so don't expect answers to your questions.
Oh no, I'll certainly do my best to answer questions. I've been super busy lately with other projects. So unfortunately I doubt I'll have time to update the mod or incorporate suggestions. The good news though, is it's working fine for those who've chosen to install it.
thanks for sharing it.. I clicked install but haven't set it up anywhere yet 
