Seemed that Chrome 6 had an issue loading the same image file (I’ve used the same images more than once for the demo). By first emptying src (attr(“src”, “”)) and then apply the new data fixed the problem (although in a real gallery we wouldn’t even notice since there would be no duplicate images).

Hi, i like your gallery very much. I’m trying to make it a template within pixelpost.org. I run into some problems when i want to load the new picture with the click. It does not transport it as a new background, i think this is the problem with jQuery. Do you have a solution?

Hi Maarten,
Thanks for your comments. I have updated the script a bit so if you have time, download it again to see if your problem is solved. I see that you load the images via php (e.g. index.php?showimage=31) and I haven’t checked the script in conjunction to php yet. I’ll need to check it further and let you know.

Thanks for your quick reply. I tried the new download, but it is not working :-(. The problem is that jquery does not see that there is new data i think. I tought when i publish the tumbnails the same way you do the output will be the same. But somewhere i must let jquery know there is data to click on and then refresh the url bar. If i make the bgimg <a href" then it works but every click will put on the slidebar and that's not the nice way.

if you have the time to look into it i will appreciate that. But now i called it the night because it's here 1:35 am in the netherlands

i love this – i use a jquery script to fullscreen the image on my portfolio homepage, but a full gallery is outstanding! i just wish a small bit of the sidebar remained on the screen when it minimized, i don’t know that it’s intuitive enough for the average user to know to drag the mouse pointer off the screen to call it back. plus, like ben mentioned, filling the screen immediately when clicking on a thumbnail was unwanted – i wanted the sidebar to remain onscreen while i clicked through a couple thumbnails then i could manually minimize it when i found the one i wanted to study. that artwork was amazing too, btw!

You do have a point Ray.
I mostly wanted to make a bit different gallery control-wise. Your suggestions are good and I’ll probably make a second version of this script that’ll rely more on clicking and be better suited for touch devices (as stated earlier).

You’re so absolutely right 🙂
I made this script in a relatively short time (implementing some code I’ve done sometime ago) so I didn’t really optimize the code. I wanted mainly to see what people think of it as a gallery. I’ll revamp the code as soon as possible!

Great concept!
Some nitpicking crits: Movement in the interface is generally “choppy”, especially when scrolling down through the images, or switching back and forth between “thumbnail” and “big” views. Filling the screen as soon as you click an image without any instruction was an unwanted surprise. Also, I’m not really a fan of some things being rollover and others click. In my opinion, everything should be click, so that it is obvious to users what causes something to happen. I guess I’m just not a fan of rollover in general, haha.
Just my 2¢ anyway. Some of this may be browser/rendering engine related.
(Chrome 6.0.472.55, Mac OS X 10.6.4)

The “choppy” movement is indeed browser’s js engine related issue. Javascript performance is heavily depended on browser engine as well as memory, tabs already open etc. That’s why sometimes a script performs very well and other times more or less “choppy”.

Unfortunately javascript animation drops in performance when you try more advanced stuff than fading a tab or sliding a div (especially when animating a fullscreen images or a containers of 20 thumnails, texts etc.).

In general, I try to keep a balance between effects/animation and performance but sometimes the dark side gets over 😛 I hope I’ll get better 🙂

This gallery is a lot about mouse movement (that was the idea) and was made primarily for big screens (desktops, laptops etc.) with a pointing device. The only thing that works on click is when you select an image to load which I think is logical. I was thinking to make another version of this gallery (more compatible with touch devices) that works only on click, so I guess I might try it 😉

Regarding your screenshot, I can’t really tell what’s wrong but looks like viewing the image in “FIT” mode (there’s a button over the thumbnails that changes the view mode).

I get the feeling that its performance on my machine does have to do with Webkit, as well as my RAM and processing power. Especially after seeing how many commenters called it “smooth” 🙂

I really like the idea of a gallery suited to large screens and presentations. I hadn’t even thought of that.

RE: Screenshot, I was in full mode, not fit. The problem was that when the thumbnails moved offscreen, the image didn’t move with it (of course this would fix itself as soon as I resized my browser window or clicked on the image to display the next one). But what you are seeing is all of the image I was able to see – half of it. I can’t replicate it now, oddly enough, but it was definitely full mode since when I resized my browser window even by one pixel, it immediately fixed itself.

I think it happened when I was playing around with moving my mouse left and right to toggle full-screen and half-screen. At some point that happened, and then it started happening every time I toggled back and forth (the image wouldn’t move, staying at half-screen). I didn’t think to refresh the page to see if it stopped, so I’m not sure if it was something I did in that session to screw it up.

Ha I have a question why make a gallery in javascript at all, wouldn’t it be easier just to do it with <a href='http://everythingfla.com/'flash you would have so much more control over making it as slick as you want while with js you need to mainly worry about it working in a list of browsers 😛 ? and i mean it with total respect as i love it that your sharing and i know how much more work it is to reproduce things in JS and then worry about it working on a million browsers.

Yes I could do it in flash much faster and easier as I’m way more proficient in actionscript and animation. I made this gallery with jquery mainly to explore js potential and just cause it’s fun! I work a lot as flash developer, so doing stuff with other scripting languages feels like holiday to me 😛

As far as performance goes, the more effects-the better the flash, but this gallery doesn’t have that many 😉

If you’re interested in flash, you can check some posts I’ve made like FluidGrid gallery and flash image slideshow.

On this script, the thumbs panel opens on mouse over (jquery hover function) so it’s not really optimized for touch (although changing hover to click should work fine on such a device).

From what I’ve seen, “hover” state on touch devices acts as “mouse down” (at least in Flash and CSS) so I thought that it should do the same for js… Guess that’s one of the reasons behind jQuery Mobile Project.

the link when I try to scroll down the thumb images everything goes up and it’s frustrating how I can’t resolve this issue. I know it is something defo to do with css and it is very easy to fix but i can not get it work.. Please help someone!!!

the link when I try to scroll down the thumb images everything goes up and it’s frustrating how I can’t resolve this issue. I know it is something defo to do with css and it is very easy to fix but i can not get it work.. Please help someone!!!

«Free software» means software that respects users' freedom and community. Roughly, the users have the freedom to run, copy, distribute, study, change and improve the software. With these freedoms, the users (both individually and collectively) control the program and what it does for them. — GNU, The Free Software Definition