는 참고 ImageName 얻기 및 jQuery를 함께 jQuery를

와 에서 링크를 만들어, 나는 사이트 클릭에 특정 경로에서 모든 이미지을하고 jQuery를위한 lighbox 변형 플러그인입니다 Fancybox를 사용하여 큰 이미지를 보여주는 싶다.는 참고 ImageName 얻기 및 jQuery를 함께 jQuery를

내 작은 이미지가 에서 "작은 이미지/제품 /", 큰 것들의 아래에있는 "이미지/제품/큰"과 참고 ImageName은 항상 페이지 이미지를 보여주는 같은

입니다 다음 코드 :

<a href="images/products/big/hat.jpg" class="fancybox"><img src="images/products/small/hat.jpg" alt="Nice hat"></a>

<img src="images/products/small/hat.jpg" alt="Nice hat">

내가 원하는 것은이 점을 만드는 몇 가지 jQuery를 스크립트입니다

아마도 링크 태그에 클래스를 설정하는 부분은 생략하고 $ (elm) .fancybox();로 직접 요소의 fancybox를 활성화 할 수 있습니다.

내가 좀 둘러보고되고는 jQuery를 기능 "ATTR" 및 "포장"이 유용 할 수 있습니다,하지만 내 현재 제한의 jQuery 기술을 정말 연결할 수없는 점처럼 보인다.

출처

2010-12-27 Bulan

당신은 모든 이미지를 찾으려면, 당신은 의심으로 당신이 정말로 구조가 변경되도록하려면 다음, 당신은 wrap를 사용할 수 있습니다

$('some_parent_selector img[src*=/small]').wrap(function() { 
    return "<a href='" + this.src.replace("/small", "/large") + "' class='fancybox'/>"; 
});

Live example (이 버튼을 클릭하면, 요소를 감싸기 될 것입니다, 이것은 시각적으로 즉시 명백하지 않을 수 있지만 Firebug 또는 Dev Tools를 사용하거나 심지어 클릭 만하면됩니다.).

당신은 BTW, attr으로 궤도에 있었다,하지만 src 속성이 HTMLImageElement DOM 객체에 속성으로 반영 사용자들은 그 중 하나입니다 발생, 그래서 당신은 attr를 사용할 필요가 없습니다.

출처

2010-12-27 14:50:29

정상화하려면 항상 attr()을 사용하는 것이 더 좋습니다. 어떤 미친 브라우저가 이상한 방식으로 DOM을 변경하기로 결정할 때 당신은 결코 알 수 없습니다. 어쩌면 나는 단지 편집증 일 뿐이다. xD –

@Mike :'id'와'src'는 안전하며 앵커 태그에는'href'가 있고 ('input'에는'value') 안전하지 않습니다. 당신이 편집증 환자 일지라도, 당신은 그것들에 의지 할 수 있습니다. :-) –

고마워요! jQuery 함수에서 * this *를 사용하여 요소를 참조 할 수 있는지 여부를 몰랐습니다. 그것은 내 두뇌에서 빠진 점이었습니다! :) – Bulan

는 참고 ImageName 얻기 및 jQuery를 함께 jQuery를

답변

관련 문제