Hello everyone,
I’m newly registered but not really new to this place as I’ve come to read on many topics before as I’ve found answers to my questions. This time around it’s a bit different as I’m at a loss. Having spent many (maaaany!!!) hours researching something I had previously found but can’t seem to anymore, I finally decided to take the plunge… so enough of the intro, let’s get cracking and I hope I’ll be coherent!
A while back, I designed a website for a buddy of mine and to have the content be a bit more dynamic and involving for his visitors (considering he barely had any to begin with!) I decided to go with an isotope grid and sortable content for the home page and the rest is basically articles he’d post in his blog. So far so good, I got the items to display where I wanted them and to sort them with some buttons. Here comes my predicament… It’s the how to display the items that’s got me running around in circles… Each item in my grid has 3 views, if i can call them that, Basically, the visitor would mouse over an item, it should have some kind of hover effect to let the visitor know there’s more and when clicked, the item content changes, clicked again, it would change once more and one more click should bring it all back to the first “section”. I had seen it in action someplace online and got inspired to do it in this fashion. In essence, all sections in one image, javascript for shifting the image on click… a sort of javascript controlled image slider within a container, kind of like CSS sprites, well kind of.
And that’s where it stopped. As my time shrunk, I had to outsource the work (shame on me) and the result, as you might have guessed, is less than desirable. It’s a crackpot of long dirty code that essentially should be rewritten or rethought from scratch as it would take longer to try to fix.
The reason I’m posting all this is not in hopes of handouts or for someone to do it for me but merely for insight and advice as to options I might have not heard of or reference to similar concepts/projects
Here’s a recap of how some of my grid items should behave
- onHover indication (I have a little “+” overlay image that shows up in a corner
- onClick image slides but viewing frame remains giving illusion of transition (some easing). once at the end frame, a click would slide image all the way to the beginning.
- onMouseOut returns to 1st frame
This website has been revamped since but I still have the old version that I found while rummaging through my backups and thought of a resurrection for my own curiosity and maybe it can help the community somehow.
So thanks for taking the time to read this and I hope this makes some sense.
Feel free to ask away if it’s unclear at some level and I could also arrange for access to code or implementation since it was designed as a wordpress template page.