Controlling the position of an image section within a container

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.

I’m not too sure why I have not received replies for this. Is it because of how I formulated my request? Am I breaking any rules?

Anyways, I believe what I’m looking for can be found in the realm of image slideshows/galleries as the closest possible info I’ve found is simply called image panning… Not sure how that fits into my questions but any pointers or feedback would be greatly appreciated, specially on the “no response” end.

Thanks

No problem with any rules as far as I can see.
Maybe it would help to post your code so we can see how far you got with this and have a better idea what you are working with.
JS is not my thing, but from what I understand about what you are doing, I don’t think it will be too difficult.
The hover part could be pure css, then the click state would be a simple js show/hide toggle.
But without seeing a page, it’s hard to give specific advice.

No you are not breaking any rules but I guess the reason the thread remains unanswered is because it reads like a wishlist of ideas but with no concrete examples to work or comment on. Your requests seem so specific that only a custom build is likely to achieve the result you want. I guess you are talking about a masonry type of layout where each item also has a slider attached but you are also very specific about the behaviour you want.

Threads that get answered quickly usually have one specific point and are accompanied by code that attempts to do what is required and provide a basis for others to comment and to work on.

Unless someone has done or seem something similar then you may have to wait a while for a reply. However, if you make a start yourself and then get stuck along the way I’m sure someone will try and help.

It may help if you can put up a demo of the old site you mentioned so people can see what you are attempting and may elicit better replies than mine (JS isn’t my area anyway). :slight_smile:

1 Like

@SamA74: thanks for replying! I really appreciate it. I’ll try to do something about the code, maybe a mini JSFiddle version. As I had mentioned, the code is a mess, the ID10T I gave this to made it seem like he was a pro and I trusted him considering I was in a pickle and I think I lost some of my hair :unamused:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.