Topic awaiting preservation: Masking over a list of images with JQuery

Hello It's been... ... a while since I last posted here! Growing up etc nothing that important happening!

Getting to business I'm working on a way to mask images with JQuery. I'm not talking about simply covering an image I know that can be done with the API but what I'm looking for is a little complicated (at least for me :/)

What I've got is a list of images side by side little square previews, the magic is when you hover over one all the other thumbnails get masked and you have the image you hovered over in place of all of them just a fade in fade out. Seemed simple at first with a little transparent PNG and all but the problem I'm facing is that this is a portfolio site and all the images are uploaded via a CMS so the thumbnails aren't necessarily going to be in the exact same place as before with each new thumbnail taking the space of the last etc. Also since this is going to be dynamic I don't think using a PNG to mask the whole area would be that wise as the whole thing will be managed with CSS (though a mask on top of all the other images could work).(I hope this is getting through)

So that's my dilemma, I've got a few ways of approaching it but I'm still confused as to how I should set up the markup! Let's say I have all the images load together that means all the images will be placed one on top of the other and I'll be calling the image I need to be on top when I need it. But here's another thing, the layout is set to show 72 squares if I were to upload 50 squares then the rest would be shown as blank but when I were to hover they have to be covered with the image as well ergo they have to be mask items as well. And to add to that... loading 72 images... wise decision?

Another idea was to scratch the 72 square thing and just mask the images that were uploaded as thumbnails so if I had 20 squares the image would be shown in that much area and if I later on had 50 squares the rest of the image would be shown as well this time.

I'm sure I've confused anyone reading this as well :/... help?

Soft Kitty Warm Kitty, Little Ball of Fuuuuuur
Happy Kitty Sleepy Kitty Purr Purr Purr

(Edited by templar654 on 01-17-2012 16:04)

I don't get it

Hmmm how about now?

http://imgur.com/t3lJa

It's a bit crude but I hope this better explains

Soft Kitty Warm Kitty, Little Ball of Fuuuuuur
Happy Kitty Sleepy Kitty Purr Purr Purr

ok... so where is the problem with show/hidding() the img elements themselves?
(Which bottoms out to set display:hidden in css, but jquery has helpers that also do the fading etc for you)

So have, two states, a) all the thumbnails being visible,
and b) one image being visible, and having a grid of (ugly ugly) divs above them that also trap your onmouseover to switch back from b) to a?

When you hover over something in a), hide all the thumbnails, show the image. When the mouse hovers over the bars,
hide active image and display thumbnails if you were in b).

Heck this even sounds like a table might be the right data structure...

Hmmmm, I'll do a few runs and show the results if I get stuck. Either way I would still have to preload all the images right?

------------------------------------------------
Soft Kitty Warm Kitty, Little Ball of Fuuuuuur
Happy Kitty Sleepy Kitty Purr Purr Purr

yeah, they'd be 'preloaded' all right.

Alright after relentless tries and several curses directed at jQuery and CSS in general I got the markup and clipping working none of my other efforts worked so I settled for a mixed jQuery and CSS solution but now I'm facing the next step of this problem. Here's the gallery so far:

http://haiderali.heliumhost.tk/site/

What you're seeing would be the hover state of one block (I'm only using one image right now as a test) I can't seem to get the hover state to work did a couple attempts but nothing gave me anything fruitful . Right now I've got the JS to arrange the styling accordingly so no matter where the preview box is in the grid the correct portion of the image is shown. This is working so I've got to figure out some way of getting the mouse hover state to show the image as you can see it now.

Ideas?

------------------------------------------------
Soft Kitty Warm Kitty, Little Ball of Fuuuuuur
Happy Kitty Sleepy Kitty Purr Purr Purr

Update

I got it running last night though with some extremely ugly code :/ I'll put that whole bit in a loop counter any suggestions how to make dual counts in one loop? I have two classes changing in one string

------------------------------------------------
Soft Kitty Warm Kitty, Little Ball of Fuuuuuur
Happy Kitty Sleepy Kitty Purr Purr Purr

The concept seems unusable to me. What if I wanted to hover over a picture located at the center of your grid ? I'd have to avoid all the other pictures since they would expand and hide the picture I wanted to see.

I set up a more realistic working example of what I understood you wanted to achieve on jsFiddle.
Even though I set up the full preview to trigger on click, you can try to modify it to suit your needs.

----
If wishes were fishes, we'd all cast nets.



(Edited by Moon Shadow on 01-30-2012 18:07)

(Edited by Moon Shadow on 01-30-2012 18:08)