Register Members List Search Today's Posts Mark Forums Read

Reply
 
Mod Options
Avatar/Image Reflection Effect Details »
Avatar/Image Reflection Effect
Mod Version: 1.5, by Tralala (Member) Tralala is offline
Developer Last Online: Mar 2015 I like it Show Printable Version Email this Page

This modification is in the archives.
vB Version: 3.5.4 Rating: (13 votes - 4.46 average) Installs: 137
Released: 04 May 2006 Last Update: 22 Jun 2006 Downloads: 895
Not Supported Template Edits Additional Files  


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

Download Now

Only licensed members can download files, Click Here for more information.

Screenshots

Click image for larger version

Name:	threadview_reflection.jpg
Views:	1430
Size:	78.2 KB
ID:	46917   Click image for larger version

Name:	profile_reflection.jpg
Views:	711
Size:	32.1 KB
ID:	46924   Click image for larger version

Name:	image_reflection.jpg
Views:	1023
Size:	166.1 KB
ID:	46925   Click image for larger version

Name:	image_reflection2.jpg
Views:	658
Size:	75.4 KB
ID:	46926  

Click image for larger version

Name:	whitesample.jpg
Views:	588
Size:	76.8 KB
ID:	47049   Click image for larger version

Name:	blacksample.jpg
Views:	467
Size:	73.3 KB
ID:	47050   Click image for larger version

Name:	greensample.jpg
Views:	387
Size:	137.1 KB
ID:	47051   Click image for larger version

Name:	varyheightandopacity.jpg
Views:	409
Size:	33.3 KB
ID:	48437  

Show Your Support

  • To receive notifications regarding updates -> Click to Mark as Installed.
  • This modification may not be copied, reproduced or published elsewhere without author's permission.
Similar Mod
Mod Developer Type Replies Last Post
Add image fade effect to attached thumbnails Ntfu2 vBulletin 3.5 Template Modifications 19 27 Aug 2007 04:54
Hover Links and Image Effect krvaricp vBulletin 3.5 Template Modifications 5 06 Nov 2005 17:19

Comments
  #2  
Old 04 May 2006, 05:43
Tralala's Avatar
Tralala Tralala is offline
 
Join Date: Jan 2006
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

Last edited by Tralala; 28 May 2006 at 22:53.
Reply With Quote
  #3  
Old 04 May 2006, 06:05
Boofo's Avatar
Boofo Boofo is offline
 
Join Date: Mar 2002
Real name: Rob
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?
Reply With Quote
  #4  
Old 04 May 2006, 06:14
Tralala's Avatar
Tralala Tralala is offline
 
Join Date: Jan 2006
Originally Posted by 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?
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.

Last edited by Tralala; 04 May 2006 at 17:03.
Reply With Quote
  #5  
Old 04 May 2006, 06:15
Boofo's Avatar
Boofo Boofo is offline
 
Join Date: Mar 2002
Real name: Rob
Originally Posted by Tralala
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.
Reply With Quote
  #6  
Old 04 May 2006, 06:18
Tralala's Avatar
Tralala Tralala is offline
 
Join Date: Jan 2006
Originally Posted by Boofo
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.)

Last edited by Tralala; 04 May 2006 at 06:21.
Reply With Quote
  #7  
Old 04 May 2006, 06:22
Boofo's Avatar
Boofo Boofo is offline
 
Join Date: Mar 2002
Real name: Rob
Originally Posted by Tralala
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.
Reply With Quote
  #8  
Old 04 May 2006, 11:30
Ziki's Avatar
Ziki Ziki is offline
 
Join Date: Nov 2005
Installed Maestro!
__________________
My free mods~click here
Reply With Quote
  #9  
Old 04 May 2006, 12:30
OrangeFlea OrangeFlea is offline
 
Join Date: Aug 2004
What does this hack do to animated avatars?
Reply With Quote
  #10  
Old 04 May 2006, 12:31
wizardan wizardan is offline
 
Join Date: Jan 2006
Installed.
Unfortunately, my old favorite, Netscape 7.2, doesn't seem to pick it up.
Reply With Quote
  #11  
Old 04 May 2006, 13:23
Snake's Avatar
Snake Snake is offline
 
Join Date: Mar 2005
Location: Cleveland, OH
Real name: Josh
Pretty nice. Works fine on Firefox!
Reply With Quote
  #12  
Old 04 May 2006, 13:55
Tralala's Avatar
Tralala Tralala is offline
 
Join Date: Jan 2006
Originally Posted by OrangeFlea
What does this hack do to animated avatars?
Reflections of animated images only work correctly in Internet Explorer.
Reply With Quote
  #13  
Old 04 May 2006, 14:05
Tralala's Avatar
Tralala Tralala is offline
 
Join Date: Jan 2006
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
Reply With Quote
  #14  
Old 04 May 2006, 14:41
The Chief's Avatar
The Chief The Chief is offline
 
Join Date: Aug 2005
Will give this a shot
__________________
Think Hype Networks | MeandIsis
Reply With Quote
  #15  
Old 04 May 2006, 16:09
firstrebel's Avatar
firstrebel firstrebel is offline
 
Join Date: Dec 2005
Real name: Robert Isaac
Tried this on my dev site using steps 1 -3 and it didn't work. I am using the current version of IE.

Bob
Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Mod Options

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 19:48.

Layout Options | Width: Wide Color: