portfolio gallery i made starting from kirupa code

[imaginarylines]

http://imaginarylines.com we do digital retouching (photoshopping) for advertizements and such.

anyway, i started with kirupa's xml image gallery and then butchered the code up proper with a whole lot of help from posts on these forums. what we have is your basic scrolling thumbnails gallery with seperate click and rollover behavior.

tried to keep it as intuitive as possible. lemme know if you think it sucks or if anyone has any questions about how i got something to work or if something just doesn't work! :P

[Fl4SH'ER]

Hmm, well, let us say you want to load a pic that is larger then your stage, what happens then, will it resize ? I guess not... And i'm not really getting the rollOver thingie, because well, whenever i rollOver an image i can't see any data regarding that certain pic ( i get more info only after clicking on it.. ). You should display the info on rollOver and make some hints so that the user understand that he must click on one of the pics to see "more". I personally had no idea that after clicking on a pic i'll get more info, i press one accidentally... I won't comment upon the site layout because well, it need work.. lots of it... first get the gallery in a better shape ;)

[rondog]

dont do onRollOver..makes me feel out of control

[duncanhall]

Everything works quite nicely, except, as mrwicked said, the onRollOver just doesn't feel right. I agree it would seem like the logical method for displaying 2 sets of images from 1 preview, but it just doesn't feel very natural. Also, it means that when you are scrolling, you get a blank image area because every image trys to load but doesn't get a chance before the next one has scrolled round.
I would keep the thumbnails as they are, but remove the onRollOver event. Maybe change it to onRelease and have the prelimary images come up first. Then in that image have a rollover or a button to bring up the final image. Maybe super-imposing it in some cases where the original and the final match up.

I'm sure there's many other sensible options, but the way you have it now just feels a bit clunky and awkward and detracts from what could otherwise be a very nice gallery.

[imaginarylines]

Hmm, well, let us say you want to load a pic that is larger then your stage, what happens then, will it resize ? I guess not...

Our images are all HUGE (usually several hundred MB) TIFs when we ship them, so I have to prepare JPGs for our web porfolio at an arbitrary size. I don't understand why would I want to load a pic larger than my stage?


And i'm not really getting the rollOver thingie, because well, whenever i rollOver an image i can't see any data regarding that certain pic ( i get more info only after clicking on it.. ). You should display the info on rollOver and make some hints so that the user understand that he must click on one of the pics to see "more". I personally had no idea that after clicking on a pic i'll get more info, i press one accidentally

i'm a bit confused as to why you clicked one "accidentally" when it says underneath the thumbnails "rollover to display final image -- click to view campaign or preliminary images"


I would keep the thumbnails as they are, but remove the onRollOver event. Maybe change it to onRelease and have the prelimary images come up first. Then in that image have a rollover or a button to bring up the final image. Maybe super-imposing it in some cases where the original and the final match up.

that's a good idea. except we're showcasing our final images, not the preliminaries, so we'd still show the finals before the prelims, but, yeah, a button to bring up the prelims would prolly feel better than the rollover. i've never really liked the way the animation lags when scrolling, so i either have to convince the boss that we can do away with the rollover, or i need to come up with a sneakier (and prolly even less intuitive) control scheme. here's to hoping for the former. :)

thanks for the feedback!

[Fl4SH'ER]

i'm a bit confused as to why you clicked one "accidentally" when it says underneath the thumbnails "rollover to display final image -- click to view campaign or preliminary images"

LoL, that text is placed soooo badly ! I didn't even bather reading that text because i thought it's the usual copyright text... if you want people to actually see that then make it more obvious...

[tom314]

as said before, it needs a more intuitive feel. display image 1, let them scroll the navbar and show them the next pic when they click it, maybe you could add a button in that frame that says 'view preliminaries'..

[jakattak]

i'm a bit confused as to why you clicked one "accidentally" when it says underneath the thumbnails "rollover to display final image -- click to view campaign or preliminary images"

I think the issue is you were asking if everyone thought it was intuitive. Text instructions aren't a bad idea to help people who don't immediately realize how to navigate the gallery, but the whole point of making an intuitive interface is so people don't have to rely on said instructions.

As for me, it was easy enough to pick up on the fact that rollovers showed larger images, but I didn't realize until I read the text that clicking would bring up the additional info.I think the problem I had with it is I wanted it to be a click to get to the large image. When I visited the site, my initial impression was that clicking the thumbnails would do something. When the rollover did what I expected a click to do instead, I didn't bother trying to click it afterwards. I was also having some difficulty with the lack of rollout action (since there was a rollover, I then expected the image to disappear upon rollout.)

The last point I want to ask about is why go fullscreen on the browser, when the content is quite small? This is a preference thing for me, but whenever I go to a site that attempts to control anything as much as resizing my browser windows, etc., I almost always immediately leave. If it hadn't been the fact that this was a Kirupa user asking for critique and feedback, I would have closed it and never returned. Web users are accustomed to sites containing specific fonts or colors or text sizes and the like, but when you go outside those bounds you risk encroaching into a space that many users consider very personal, and you risk alienating visitors as a result. That's not to say it can never be done, or there is never a reason to do it, but when the content area of the gallery is so small, there doesn't seem to be a direct purpose from the perspective of the user.