OZONE Asylum
Forums
DHTML/Javascript
Masking over a list of images with JQuery
This page's ID:
32518
Search
QuickChanges
Forums
FAQ
Archives
Register
Edit Post
Who can edit a post?
The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.
Your User Name:
Your Password:
Login Options:
Remember Me On This Computer
Your Text:
Insert Slimies »
Insert UBB Code »
Close
Last Tag
|
All Tags
UBB Help
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](I hope this is getting through)[/i] 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 [small](Edited by [url=http://www.ozoneasylum.com/user/4554]templar654[/url] on 01-17-2012 16:04)[/small]
Loading...
Options:
Enable Slimies
Enable Linkwords
« Backwards
—
Onwards »
Maximum Security
OZONE
DHTML/Javascript
Server-Side Scripting - Oh my!
CSS - DOM - XHTML - XML - XSL - XSLT
Stupid Basic HTML
Visual Therapy
Photoshop
Photoshop Pong, Anyone?
***WARNING*** BIG SIG APPROACHING
Photography
3D Modelling & Rendering
Multimedia/Animation
Print Graphics
Holding Pens
Philosophy and other Silliness
Outpatient Counseling
Site reviews!
Mad Scientists' Laboratory
Getting to know the Grail