我需要一些关于前进的最佳方式的建议或关于稳定插件/解决方案的建议。
基本上：
- 我有 2 行，每行 3 张图像，总共 6 张图像。
- 每张照片都是一个产品。
- 单击链接将更改内容以向您显示有关产品的更多信息。
下图显示了我尝试完成之前和之后：
- 单击 6 个图像之一时，内容区域应更改，因此布局不同。
- 新布局是：A.顶部放大的内容区域。B.底部有 5 个缩略图。
现在我不需要任何花哨的东西，我最终想做的是：
在页面加载时显示“之前”状态。一旦单击其中一个图像，我们就无需返回此状态。
一些如何从“之前”状态过渡到“之后”状态。我在想它可能就像在一个 div 中同时显示两个状态一样简单，其中一个被隐藏，只是让“之后”状态向上滚动或反弹，这样它要么覆盖“之前”状态，要么将其推出内容区域，所以它现在被隐藏了。
一旦处于“之后”状态，单击产品图像可能会淡入/淡出其顶部的内容区域。
虽然显示的产品不应该出现在底部，因此为什么它只显示 5 张图片而不是 6 张......我绝对可以将所有 6 张图片都放在底部以使事情变得更容易。
笔记：
A. 我在看这两个教程，但它们实际上改变了所有的页面内容。这对我不起作用，因为我在示例图像中显示的左侧有内容，我不希望它必须淡入淡出/加载：-http: //css-tricks.com/动态页面替换内容/ - http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/comment-page-1/#注释
B. 考虑一下，也许为了保持一致，也许最好：
- 从底部向上滑动到“之后”状态，将“之前”状态推开。
- 一旦处于“之后”状态，只需单击产品图像后从左向右滑动产品信息即可。
- 所以底部只显示5个产品图片，隐藏当前可见产品的div。但是，我认为总是显示所有 6 个可能会更容易。
我不确定实现上述内容将如何影响 SEO，但我知道除了隐藏一堆 div 并以某种方式使用 jquery 之外，我没有其他方法可以完成我正在做的事情。