Category tab/image slider for home page in wordpress

PHP
1

Hey guys,

Any assistance or suggestions on this would be hugely appreciated.

I’m looking for a slider type thing for a home page that will display 6 main category names in tabs on the right, then on the left will have a large image linked to each category tab.

When you mouseover a category on the right I would like to have the corresponding images come up on the left, and when you’re not mousing over it I would like the left to scroll through the different images.

When someone clicks on the tab on the right or an image on the left I would like it to go to a page linked to each specific image/tab.

Here’s a mock-up of what i’m thinking:

I’ve seen this sort of thing on a lot of pages so just wondering if anyone knows of a similar plugin or the code required for it??

I’m able to do some php, html, css, (bit of jquery) coding etc. so if there’s something close then please let me know and I’ll try working with it. But really not looking forward to having to do it all from scratch.

Thanks so much for your help.

Peter

2

I am afraid I am really not very familiar with coding for Wordpress sites. However if I were doing it on a standard site I shouldn’t imagine it be too difficult.

Are you able to code the html and css to create that sort of outline? From there it would just be a case of using jQuery to flick the image on hover, and obviously you would use a tags to create the link.

So first things first, do you think you would be able to code the html/css for the real basic static version of this? (if not obviously we can help from here)

3

Hi Tribal,

Thank you for the help and quick response.
I could definitely make up a static html/css version of it. My main concern is that I would really like to have the images on the left cycled through when people aren’t mousing over the images/tabs, then have them stop and revert to the tab function (or just have the image freeze if someone mouses over the image) once the mouse does go over it. Ideally as the images are scrolled through, the corresponding tab on the right would change it’s look to the mouseover image. this could all be done with jquery? I’ve done some tweaks with it but I’m not entirely familiar with it’s integration with css and html.

If that’s the case I’ll get working on the html/css look right away and any help after that would be greatly appreciated.

Thanks again!

Peter

4

Yes you could defiantly do it in jQuery.

You would have to do the following:

  1. Use setInterval to make the automatic change function occur every N number of seconds
  2. If a user hovers over an item stop the setInterval and then change the necessary image
  3. After a user has moused out of the item, restart the setInterval from the last hovered item

If this still doesn’t make sense post the static html css code and we can help further with the jQuery code.

Might be worth someone moving this post into the javascript forum?

5

Great thank you very much I’ll get working on it and do some jquery research and post if there are any snags (there likely will be) or developments.

Sorry moderators for posting in the wrong section. I wasn’t sure what this project would entail. I’ll post to the thread with developments good or bad so it might be worth moving.

Thanks again Tribal

6

No worries best of luck.