Version: 1.5, by Tralala
Developer Last Online: Mar 2015
Version: 3.5.4
Rating:
Released: 05-03-2006
Last Update: 06-21-2006
Installs: 137
Template Edits
Additional Files
No support by the author.
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.
Enjoy!!
Show Your Support
This modification may not be copied, reproduced or published elsewhere without author's permission.
VERY nice hack. simple and easy to install, and hardly any server load.
Thanks!
Quote:
Originally Posted by futuredood
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?
Quote:
Originally Posted by futuredood
also, how do you go about changing the opacity and height settings?
From the ReadMe:
Quote:
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"
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.
Avatar/Image Reflection Effect Details »»
About Developer
Template Edits 
No support by the author.
06-22-2006, 04:18 PM
