Shop Mobile More Submit  Join Login
deviation Quick View by electricjonny deviation Quick View by electricjonny
• 5/14/2011 - Updated to show scale in percent, not how many pixels cut off.

I initially got the idea for this script from this script here, and I loved it so much that I wanted to take the idea and improve it a bit (along with fix it, since that specific script is broken right now).

So this is what I came up with, and it's a tad nicer because of some jQuery goodness (so things fade in smoother), and because it works in more places (like deviation stacks and the chat rooms).

This works in Firefox, and sometimes in Chrome. I say sometimes since it just doesn't show the image everytime. I have no idea why. Chrome is funky like that. If anyone knows how to fix it, please, be my guest :lol:

Anyway, once you install this, you can go to any place that has thumbnails (the 150px width ones, or the 300px width ones), hold shift, then hover the thumbnail. You'll see the background darken and the text Loading... appear. Once the image is ready, it will fade in. The image will be centered on the page, and if it's wider or taller than your browser window, it will shrink to fit. If it gets scaled down, you'll see a message saying that it's been scaled down, and by how many pixels. That will only show for 3 seconds, then fade out. Also, if your mouse is over the image, it will change to a very small and faint dot. The idea is to have the mouse cursor not interfere with the artwork. You can also click the image to get to that deviation's page (although it's not a href, so you can't see it listed in your browser). To make the full view go away, just move your cursor outside of the thumbnail.

I made it fully download the image, then fade it in, since that's how I can center the image in your browser. I could show it loading (scanning down line by line, as is the case with most jpeg's), but that makes it harder to center, and it's just disorienting to have the image load in at the top left, then jump to the center.

It's sounds a bit complicated, but it's pretty simple and you should be able to figure it all out. Shoot me a comment if you have any questions :)

To Install


Tested in the latest Firefox with the latest Greasemonkey, and the latest Chrome.

Just copy this URL and paste it into a new tab to install the script. There's no settings or anything here, just press shift then hover a thumb. And you have to press shift first, then hover. You can't hover and press shift afterwards.

http://electricjonny.com/code/deviation_quick_view.user.js

As always, let me know what you think and if you have any suggestions for this :)

Add a Comment:
 

The Artist has requested Critique on this Artwork

Please sign up or login to post a critique.

:iconnati11184:
nati11184 Featured By Owner Nov 26, 2013  Hobbyist General Artist
Doesn't work for me :crying:
Reply
:iconelectricjonny:
electricjonny Featured By Owner Nov 26, 2013  Hobbyist Photographer
Heh, again, try redownloading this: http://electricjonny.com/code/deviation_quick_view.user.js

And be aware that this can conflict with the other hover help script.  Sometimes they'll both try to show, but this one tends to work before the other one.
Reply
:iconnati11184:
nati11184 Featured By Owner Nov 26, 2013  Hobbyist General Artist
Oh. It still doesn't work ;__;
Reply
:iconelectricjonny:
electricjonny Featured By Owner Nov 26, 2013  Hobbyist Photographer
Huh really?  Nothing happens when you shift+hover thumbs?
Reply
:iconnati11184:
nati11184 Featured By Owner Nov 26, 2013  Hobbyist General Artist
No, only deviation's title shows and dissapears fast :<
(And yes, I've turned off Hover Helper)
Reply
:iconelectricjonny:
electricjonny Featured By Owner Nov 26, 2013  Hobbyist Photographer
Hmm not sure :o

This is supposed to show the full image (scalled to your monitor size) when you shift+hover over a thumbnail.  Not sure what the problem is, sorry :hmm:
Reply
:iconnati11184:
nati11184 Featured By Owner Nov 26, 2013  Hobbyist General Artist
I've made a new account here, on Win 7, and ran Mozilla FF without any extensions and it worked. I was turning off nearly everything, but it still didn't worked here xD Oh well :lol:
Reply
:iconelectricjonny:
electricjonny Featured By Owner Nov 26, 2013  Hobbyist Photographer
Huh, wonder why it worked :slow:
Reply
(1 Reply)
:iconnati11184:
nati11184 Featured By Owner Nov 26, 2013  Hobbyist General Artist
:<
Reply
:iconnati11184:
nati11184 Featured By Owner Nov 26, 2013  Hobbyist General Artist
Okay, big thanks :D
Reply
:iconkittylivers:
kittylivers Featured By Owner May 27, 2011  Hobbyist Writer
This is such a handy script! I'm already starting to browse with my left hand hovering near the shift key. Thanks for sharing!
Reply
:iconelectricjonny:
electricjonny Featured By Owner May 27, 2011  Hobbyist Photographer
Yeah I do the same :nod:

I feel a bit bad, since I'm not adding to the almighty pageviews of that deviation, but honestly, if it's something I want to look at more, then I'll full view it in order to read the artists comments and all that.
Reply
:iconkittylivers:
kittylivers Featured By Owner May 27, 2011  Hobbyist Writer
I agree. If something is really that enticing to me, I'll click on it to really see the deviation and comment or look at more of their work.
Reply
:iconelectricjonny:
electricjonny Featured By Owner May 27, 2011  Hobbyist Photographer
Yup :nod:

It's a quick and easy way to get a better idea of what the art is.
Reply
:iconnamenotrequired:
namenotrequired Featured By Owner May 14, 2011  Student Interface Designer
Suggestion I forgot to mention earlier - have you thought of implementing it on slideshows too, besides thumbs? :D Like the 'photography' one on my page (I mean there's little point in doing it in a slideshow that's already pretty much full screen).
Reply
:iconelectricjonny:
electricjonny Featured By Owner May 14, 2011  Hobbyist Photographer
Hmm, that's an interesting thought.

I might be able to do something like that, but it would be a shit ton of work :slow: Since I would have to add in a way for people to get to some settings, to decide how long to play each image and every thing.

But it's a nice idea. I think it'd be a bit simpler and less of a headache than the sitback stuff too.
Reply
:iconnamenotrequired:
namenotrequired Featured By Owner May 14, 2011  Student Interface Designer
Ah, so you can't make the script just take the deviation it's showing, but it'll have to calculate for itself which deviation is supposed to be showing? ^^;
Reply
:iconelectricjonny:
electricjonny Featured By Owner May 14, 2011  Hobbyist Photographer
Oh wait. Did you mean, have it scroll through and show all the images in a gallery or widget one after another? Or, be able to hold shift and hover over any image in the Flash player? If it's the latter, then no, I can't do that, since I can't get any information about what image I'm trying to show from the Flash embed.
Reply
:iconnamenotrequired:
namenotrequired Featured By Owner May 14, 2011  Student Interface Designer
Yeah, the latter ^^; ah, I see.
Reply
:iconelectricjonny:
electricjonny Featured By Owner May 14, 2011  Hobbyist Photographer
Yeah, can't do that, unfortunately.
Reply
:iconrotane:
rotane Featured By Owner May 14, 2011  Professional
Sounds and works great! Thanks a lot! :thumbsup:

I do have a couple of suggestions though:
  • I'm a bit confused by the "scaled by 319px". Why not say "scaled down to 57%" instead - I think that would be easier to understand.
  • Instead of the "loading" text you could display a throbber. It has the benefit over being animated which suggests that things are being downloaded in the background. Again, use the established convention. :)
Reply
:iconelectricjonny:
electricjonny Featured By Owner May 14, 2011  Hobbyist Photographer
So do you think this [link] would make more sense and be easier to understand what's happening with the scale?

I think I almost prefer to see how many pixels aren't being shown, but that's because I've been working on this script so long and in so many different ways :lol:
Reply
:iconelectricjonny:
electricjonny Featured By Owner May 14, 2011  Hobbyist Photographer
Ah nice stuff, thanks :)

I added the "Image is scaled by 359px" stuff in at the very end. So I didn't think about it too much. Originally I just had it say "Image is scaled", but knowing how much it was scaled by seemed like a good idea. So the pixels is basically just how much bigger the image is. If it's 359px, it means that the image is 359px bigger than what is being shown. But yeah, I think showing it in percent would make more sense. I think it's that classic "do I code it to make more sense for the geek, or the typical user?" :lol:

As for the throbber, that was something I went back and forth on a lot. I even had a pretty slick APNG there ([link] if you view against a non-white background), but I found out that Chrome doesn't support APNG's :hmm: (another reason I can't stand Chrome…).

I tried it with an animated GIF file, but it was just kind of ugly. I'm not the greatest designer. Anyway, I tried a few things, but animating it was just a bit distracting. Yes, people like to see a throbber as something loads, but I just couldn't get anything I liked over the simple "Loading..." image. If you come up with anything better, please let me know :)



But I think I'll scale it by percent, since that might be easier for people to understand.

Thanks for your thoughts :)
Reply
:iconrotane:
rotane Featured By Owner May 16, 2011  Professional
Heh, I get where you're coming from, being often borderline between a geek and a normal user myself. Still, I'd indeed prefer the %-indicator (like on your screenshot in the other comment), as the pixel-one is just too unconventional.

About the animated throbber, well, I could try to make one (an animated gif that is), and you then put it in - I'm just a little short on time right now. In the meantime, how about animating the 3 dots at the end of "Loading..."? It would still hint at people that stuff is going on in the background, but I guess it'd be much easier to make than a spinning wheel.

No problem, glad to help - thank you again for making it :)
Reply
:iconelectricjonny:
electricjonny Featured By Owner May 16, 2011  Hobbyist Photographer
I thought about animating the dots :nod:

I might do that, since I think it's subtle enough and would let people know it's loading better. And don't worry about making anything. I can handle it all :)
Reply
:iconjurgendoe:
JurgenDoe Featured By Owner May 13, 2011  Hobbyist Digital Artist
Sounds neat and great and I have to try it out right now :)
Reply
:iconelectricjonny:
electricjonny Featured By Owner May 13, 2011  Hobbyist Photographer
Let me know how it works :)
Reply
:iconjurgendoe:
JurgenDoe Featured By Owner May 13, 2011  Hobbyist Digital Artist
It works fantastic .. I just hovered over the little thumbs just beside your image and it is awesome :)
Reply
:iconelectricjonny:
electricjonny Featured By Owner May 13, 2011  Hobbyist Photographer
Yup yup, works there too :nod:

It should work in most places. One area I find that is pretty nice is group messages, like submissions people need approval on. It's pretty fast, and has the bonus of not adding a pointless pageview to the art.
Reply
:iconjurgendoe:
JurgenDoe Featured By Owner May 13, 2011  Hobbyist Digital Artist
Yeppers and with the dark background faded you can see the image clearer :)
I have a script for you tube .. Turn Lights off .. it's doing the same and it's more enjoyably to watch movies on You tube :)
Reply
:iconelectricjonny:
electricjonny Featured By Owner May 13, 2011  Hobbyist Photographer
Oh nice. I had one for flickr too, but now flickr has it built in (at least I think. Been a while since I browsed flickr).

I thought about making the background a middle gray, but well, I just prefer a dark background :lol: But yeah, it really makes the art stand out better.
Reply
:iconjurgendoe:
JurgenDoe Featured By Owner May 13, 2011  Hobbyist Digital Artist
here is the link for the Firefox-addon

You did a fabulous job with that and now we can enjoy the images better :)
Reply
:iconelectricjonny:
electricjonny Featured By Owner May 13, 2011  Hobbyist Photographer
Oh cool, thanks :)
Reply
(1 Reply)
Add a Comment:
 
×
Download PNG 1302 × 867




Details

Submitted on
May 13, 2011
Image Size
1,017 KB
Resolution
1302×867
Link
Thumb
Embed

Stats

Views
1,265
Favourites
16 (who?)
Comments
35
Downloads
25

License

Creative Commons License
Some rights reserved. This work is licensed under a
Creative Commons Attribution-Noncommercial-Share Alike 3.0 License.
×