Simple Animated Content Replacement?
I need some advice on the best way to move forward or recommendations on stable plugins/solutions.
1. I have 2 rows with 3 images each for a total of 6 images.
2. Each pic is a product.
3. Clicking on the Link will change the content to show you more information on the product.
The image below shows the before and after I am attempting to accomplish:
1. When clicking one of the 6 images, the content area should change so the layout is different.
2. The New layout is:
A. An enlarged content area on the top.
B. 5 thumbnails on the bottom.
Now I don't need anything fancy and what I would like to ultimately do is:
1. Show the "Before" state on page load. Once one of the images is clicked on, we never need to go back to this state.
2. Some how transition from the "before" state to the "after" state. I was thinking it could be as simple as having both states in a div with one being hidden and just have the "after" state either scroll up or bounce up so it either covers the "before" state or pushes it out the content area so it is now hidden.
- Something similar to: http://webdeveloperpost.com/Articles...th-jQuery.aspx
3. Once in the "after" state, clicking on the product images could just fade in/out the content area on top of it.
4. Although the product being shown should not appear on the bottom, hence why it is only showing 5 images instead of 6... I can definitely work with all 6 being on the bottom to make things easier.
A. I was looking at these two tutorials, but they actually change all of the page content. This won't work for me because I have content to the left of what is shown in the example image and I don't want this to have to fade/load in and out:
B. Thinking about it, maybe to keep things consistent, maybe it would be best to:
- slide in the "After" state from the bottom UP, pushing the "before" state out the way.
- Once in the "after" state, just sliding in the product information from left to right once a product image is clicked on.
- So the bottom only shows 5 product images, hide the div of the currently viewable product. However, I am thinking it might be easier to just always show all 6.
I am not sure how implementing the above would affect SEO, but I know no other way I can accomplish what I am doing aside from hiding a bunch of divs and utilizing jquery somehow.