2011-02-22 5 views
0

저는 shopp 판매 제품이라는 워드 프레스 플러그인을 사용하고 있습니다. shopp의 한 측면은 이미지 렌더링입니다. 기본적으로 동일한 제품의 두 이미지, 즉 하나의 축소판 이미지와 하나의 큰 이미지를 반환하도록 shopp에 지시하려고합니다. 두 이미지는 서로 바로 옆의 페이지로 되돌아갑니다. 완전한!두 개의 동적 이미지를 Jquery 링크로 바꿉니다

jquery를 사용하여 큰 이미지를 숨기고 큰 이미지 (라이트 박스 스타일)에 대한 링크로 미리보기 이미지를 설정해야합니다. 아래 예를 참조하십시오 !! example

이미지가 동적으로 생성되고 shopp에 "이미지 링크"기능이 없기 때문에 순수 HTML 및 CSS에서이 작업을 수행 할 수없는 이유가 있습니다. 다시 말하지만이 두 이미지를 가져 와서 jquery를 사용하여 위 이미지의 마크 업을 사용하여 작은 이미지의 링크로 큰 이미지를 설정해야합니다.

어떻게하면이 아이디어를 얻을 수 있습니까?

+0

코드 예제를 살펴보면 대부분의 라이트 박스에서 사용하는 마크 업과 같습니다. 뭐가 문제 야? – Sonny

답변

1

어떤 이미지가 jQuery에 있는지 확인하는 방법이 필요합니다. SHOPP를 사용하는 경우 이러한 목표를 달성하기 위해 노력하고 추가 코딩을 할 필요가 없습니다 http://jsfiddle.net/kJEGd/2/

+0

감사합니다. 이것은 완벽합니다. – JCHASE11

0

-

그런 다음이 코드를 사용할 수 있습니다 (A 클래스는 가장 좋은 방법이 될 것이다).

먼저, class = "shopp-zoom"이 설정된 모든 (이미지) 링크는 클릭하면 원본 이미지가있는 라이트 박스를 자동으로 엽니 다.

다음으로 작은 이미지 (미리보기 이미지)를 사용하려면 WP-admin -> Shopp 설정에서 쉽게 지정할 수 있으며 setting="name-of-my-setting"을 링크가있는 템플릿 파일의 옵션 (대부분 collection.php 또는 product)에 추가하십시오. PHP하지만 cart.php도 작동합니다.

관련 문제