Bevel.js

fysicsluvr

Take a look at bevel.js. Someone could make an addon that does some nice beveling to embedded images, users' icons, account photos (flickr photostreams?), etc.

(be sure to keep it from doing this to certain images such as advertisements or banners.)

Wanderer

Shouldn't be too hard to do, I'd attempt it myself if I had the time.
Nice find.

fysicsluvr

it was posted on del.icio.us

fysicsluvr

**bump

anyone?

fysicsluvr

****I'm gonna bump this again****

jimw

I started looking at this yesterday.

Wanderer

Although it would be interesting to see how such a feature is implemented, from an aesthetic perspective, those bevel effects are really ugly.

fysicsluvr

you think? I always thought they were nice.

Wanderer

Maybe "nice" if you are displaying colorful candy as in the examples but in any case, rounded corners, especially to the extent shown, have always been regarded as trite, kitsch and unsightly.

When the frame or border of an image takes over the contents so prominently one must ask the question, what are you trying to achieve and why?

As I said, I am more interested in how jimw implements the control.

fysicsluvr

Yea, i do think the example corner rounding, colors, and beveling were a bit too much; but a subtle corner 'softening,' a simple shadow, and a slight bevel would make the uploaded photos look nice.


The other one I just saw on the same site, was glossy.js. It adds a gloss to the photos like web-2.0 graphics. (I like glossy better)

jimw

I've made something which will be a user-controlled option. I've added 3 choices - no image style, glossy image style, or bevel image style. I haven't figured out how to only limit the user to one choice. So, if he chooses all 3, no style will be applied.

Or should this be a forum level option, regardless of whether you are a registered user or not?

In my testing, it seems to work on some images all the time and on some images in the sidepanel, some of the times. I'm not sure why this is. I'm still testing.

Edit: I've implemented this on my forum for your viewing pleasure. You don't have to be logged in to see. Right now it's set for glossy.

jimw

Having read the js author's license, it seemed like his scripts could not be a part of any other script that others developed. So, what that would mean is that each person using an extension I would develop would have to download his scripts separately and then place them in the appropriate spot in the extension's folder. I have emailed the author to confirm.

I can work on such documentation to include and also add some error checking for his files.

Should I proceed? I've learned some more javascript doing this, so I am pleased with this little task.

Wanderer

Yes jimw, go for it.

Although I thought it was going to be an option for the user who puts a picture in a comment.

Anyway, I am impressed that you actually read the license agreement!

fysicsluvr

comment attached pics and/or user icons. Possibly in the future you could expand the extension to work in other places.

EDIT:

here's another one from the same site. It simulates a "coverflow" effect. reflect + perspective

jimw

I will proceed and add a hook for a lot of his styles. I'll document what ones can be used.

What I did to create the extension seemed to be the easiest way of using this "applying of image formats". It should work on any img tag that it can find on any page. However, it doesn't seem to and I don't know why. So, at least it will be a start and we can go from there.

The logic is just a simple js to add the appropriate className to the img tag. Then, once this is done and the bevel or glossy or reflex js is loaded, that js takes over.

Wanderer

jimw I had the same problem with Dplayer which is supposed to locate every occurrence of the href tag containing ".mp3" but it didn't work properly if I linked to the .js file in the head section.

I linked to it at the very end before the closing body tag and it works perfectly.

I suspect such scripts assume the entire page has loaded when they do their thing so anything we can do to ensure the page has fully loaded before calling the script will only help?

jimw

I'll give that a try. Thanks.

Maybe there's some delegate or procedure to use that could help out in this kind of a situation. Maybe the dev experts could advise us. I certainly would appreciate it.

Wanderer

Have a look at Dinoboff's last comment here on this subject (sorry it won't let me give you a direct link to the comment).

Also see my reply to him.

I wish I had time to play with this.

jimw

I tried Dinoboff's suggestion and changed my code to use a class and page render like dplayer. However, nothing changed. Then, I decided to test out all 4 styles I've implemented. Each one probably works but maybe you can't visually see the result. For example, the bevel displays images in the sidepanel nicely and it displays sticky and sunk Discussion images I have next to the Discussion title fine and it display a user icon next to the Discussion Title fine. However, in the Discussion grid, it does not put a bevel around the CategoryIcons I have.

On the Categories page, it displays sidepanel images fine. But it doesn't display images I have next to the Category titles.

It displays the gallery images fine. However, on the Search and Account page, it does not display the sidepanel images or the user image.

Then, I tried with the curl style. The images in the Discussion grid did not visibly show the curl. Maybe too small.

So, the bottomline is that results will differ with each Vanilla site, I'm afraid.

I've got the bevel, glossy, curl and reflection implemented now. I'll do some more testing and try to upload this weekend.

Hamed

pretty nice idea that is pretty cool good job jimw