WordPress hack/plugin이 DIV (갤러리)의 이미지 위에 표시됩니다.

Question

나는 아트 갤러리를위한 WordPress 사이트를 개발 중입니다. 클라이언트는 정확히 다음과 같은 아티스트 명부 이미지 갤러리를 원합니다. http://www.walkercontemporary.com/artists/

아티스트의 특정 콘텐츠에 대한 링크를 생성하는 사용자 정의 게시 유형을 생성했습니다. 이제 링크의 마우스 오버시 인접한 DIV에 샘플 이미지를 표시하는 효과가 필요합니다. 위 사이트의 소스 코드를 보면, 이것이 드림위버 기능이라는 것을 확신합니다. 내 솔루션을 WordPress의 CMS 기능을 사용하기 쉽게 통합하고 싶습니다. 그렇지 않으면 고객에게 다른 해결책을 찾도록 조언 할 것입니다. 그들은 수동 코딩을하는 많은 예술가들을 유지할 수있는 껍질을 가지고 있지 않으며 방문자들이 훑어보기를위한 미리보기 이미지 (다른 많은 솔루션들이 그것에 접근하는 방식)를 원하지 않습니다.

이상형으로, 사용자 지정 게시 유형의 각 아티스트와 연결된 추천 이미지를 호출하는 목록 항목에서 REL 값 또는 자동 생성 된 onmouseover 값을 생성하고 싶습니다. 이것이 가능한가? -x - 스티브

Answer 1

어떤 이유로 나는 예제를보기 위해 귀하의 웹 사이트에 액세스 할 수 없습니다.

하지만 잘 이해하면, 당신이 필요 jQuery를 3-4 라인입니다 ..

$('#thumbs img').click(function(){ 
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large')); 
    $('#description').html($(this).attr('alt'));// if you want to add description also 
}); 

DEMO

편집 I

영업 이익의 코멘트 후 -

내가 틀렸다는 것을 인정한다. 당신은 4 줄의 코드가 필요 없다 - 단지 2 개만 필요하다. :-)

하지만 동일한 코드가 마우스로 가리키고 클릭 할 때 모두 작동한다는 사실에 대해서는 틀리지 않았습니다. 그것은 본질적으로 동일합니다.

당신은 (다른 변경 한 것 아무것도 주) 단어 (기능) "호버" 에 "클릭"을 변경할 필요가

$('#thumbs img').hover(function(){ 
     $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large')); 
    }); 

나 또한 몇 가지 기본적인 능력을 부여 가끔 걸릴 것을 인정

, 나는 그렇게해서는 안된다. 내가 배우고있을 때, 나는 동일한 초심자 문제를 가지고 있었다. 그래도 여전히 의심이 들면 - 나는 3 개의 데모로 바이올린을 만들었습니다.

여기 모두보기 더미 링크 라이브 링크와 함께 엄지 손가락

는

1. 스왑
2. 스왑
3. 스왑 : Demo

   내가 분명히 지금 바랍니다.

   EDIT II

   MY GOD! 나는 다시 틀렸다. 코드는 더 짧아야합니다!

   $('#largeImage2').attr('src',$(this).attr('href')); 
   

   최종 Demo (짧은 코드)

   (그리고 BTW() (교체가 필요 없음) - 사이트가 서버에서 라이브 인 "드림위버 기능"같은 것은 없다 - Dreamweaver를 코드를 생성하는 UI 만 있습니다 .HTML/javascript/php가 될 수도 있고, 끝 부분의 TXT 파일 일 수도 있습니다. 코드의 실행과 관련하여 "기능"이 없습니다. 메모장 용 GUI로 :-). 당신이 보는 코드의 "MM"부분은 Dreamweaver를 통해 삽입되는 정상적인 JAVASCRIPT (그리고 최적의조차도 아닙니다)입니다. 그게 다야)