간단한 애니메이션 콘텐츠 대체?

Question

안정적인 플러그인/솔루션에 대한 권장 사항이나 권장 사항에 대한 조언이 필요합니다. 기본적

는 :

1. I 6 개 이미지 총 3 개 이미지 각각 2 개의 행을 갖는다.
2. 각 그림은 제품입니다.
3. 링크를 클릭하면 내용이 변경되어 제품에 대한 자세한 정보가 표시됩니다.
   1. 6 개 개의 이미지 중 하나를 클릭하면, 콘텐츠 영역 레이아웃이 다르기 때문에 변경해야

   이미지 아래 I 달성하려고하고있는 전후이다.

4. 새 레이아웃 : A. 상단에 콘텐츠 영역이 확대되었습니다. B. 하단에 축소판이 5 개 있습니다.

   1. 페이지로드에서 "전"상태 표시 :

   

   는 지금은 공상 아무것도 내가 좋아하는 것, 궁극적으로 할 수있다 필요하지 않습니다. 이미지 중 하나를 클릭하면이 상태로 돌아갈 필요가 없습니다.

5. "이전"상태에서 "후"상태로 전환하는 방법에 대해 설명합니다. 나는 그것을 숨기고있는 상태에서 div에있는 두 상태를 갖는 것처럼 간단 할 수 있다고 생각하고 있었고 "후"상태를 스크롤하거나 위로 올려 "before"상태를 덮거나 내용 영역 밖으로 밀었습니다. 이제 숨겨져 있습니다. 유사

   • 뭔가 : 그것의 상단에있는 상태 "후"제품 이미지를 클릭하면 그냥 사라질 수/아웃 콘텐츠 영역에 한 번 http://webdeveloperpost.com/Articles/Create-your-own-sliding-divs-with-jQuery.aspx

6. .

7. 표시되는 제품이 맨 아래에 나타나서는 안되기 때문에 6 장 대신 5 장의 이미지 만 표시하는 이유는 무엇입니까? 나는 바닥에있는 모든 6 개를 사용하면 더 쉽게 작업 할 수 있습니다.

---

참고 : 나는이 두 가지 튜토리얼을보고했지만, 실제로 페이지의 모든 내용을 변경

A.. http://css-tricks.com/dynamic-page-replacing-content/ - - http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/comment-page-1/#comments

B : 내 및/부하를 퇴색해야 할 내가 예제 이미지에 표시되는 내용의 왼쪽에있는 내용을 가지고 있기 때문에 이것은 나를 위해 작동하지 않습니다와 나는 이것을 원하지 않는다 .그것에 대해 생각하고 일을 일관되게 유지하는 것이 가장 좋을 수도 있습니다.

• "아래쪽"에서 "후"상태로 슬라이드하고 "이전"상태를 밖으로 밀어내는 것이 좋습니다.
• 일단 "after"상태가되면 제품 이미지를 클릭하면 왼쪽에서 오른쪽으로 제품 정보를 밀어 넣으면됩니다.
• 하단에는 5 개의 제품 이미지 만 표시되므로 현재 볼 수있는 제품의 div를 숨 깁니다. 그러나 나는 항상 모든 것을 보여주기 쉽다고 생각합니다.

위의 구현이 SEO에 어떻게 영향을 미치는지 확실하지 않지만 숨어있는 것 이외의 것을 성취 할 수있는 다른 방법은 없습니다. divs의 무리와 어떻게 든 jquery를 활용합니다.

Answer 1

이것은 어렵지 않습니다. 각 이미지의 데이터가있는 객체가 포함 된 배열로 이미지를 사용할 수있게하는 것이 좋습니다. 그런 다음 페이지로드시 모든 이미지에 대해 '타일'을 만들어 상자에 저장하십시오. 타일에 대한 클릭을 처리하고 원하는대로 이동할 수 있습니다. 제품 정보에 대해 div을 만들 수도 있습니다.

내가 사용하는 당신을 위해 jQuery를 작은 예를했다, 그래서 나는 지루했다

: Example on JSFiddle 주

---

: 만 크롬에서 위의 링크를 테스트 한 파이어 폭스에 불일치가있을 수 있으므로, 오페라 등