이것은 처음에는 이상한 질문처럼 보이지만 문제를 해결할 다른 방법을 찾지 못했습니다. 이것이 장황한 경우 사과드립니다.하지만 제가하려는 일을 정확히 설명하고 싶었습니다!
기본적으로 라이트 박스를 사용하여 클릭하면 이미지를 확대하는 이미지를 표시하고 있습니다 (라이트 박스가 수행하는 작업입니다 ..!) 잘 작동하지만 라이트 박스가 실제로 수행하는 작업은 다른 이미지를로드하는 것입니다. 두 개의 파일을 가질 수 있으므로 유용합니다. , 작은 하나 (썸네일)와 큰 하나. 두 위치에 동일한 이미지를 배치하고 CSS / html을 사용하여 작은 이미지의 크기를 조정할 수도 있습니다. 여기에있는 것처럼 관련 라이트 박스 코드는 아래와 같습니다.
<a href="image1.gif" rel="lightbox" title="Project one image">
<img src="image1.gif" width="200px" alt="small version of image" /></a>
(로드 시간 등을 위해 두 개의 개별 파일을 갖는 것이 바람직하다는 것을 이해하지만이 경우에는 작동하지 않습니다)
그러나 내가 가진 문제는 이미지 태그의 이미지를 다른 아무것도 변경 하지 않고 ( 완전히 다른 이미지로) 변경할 수 있어야 하므로 라이트 박스 링크에 대한 href를 업데이트하지 않아도 된다는 것입니다. 그러나 라이트 박스는 이미지 태그가 가져 오는 것과 동일한 이미지를 표시해야합니다.이 작업을 수행하려면 img 태그와 태그를 모두 변경해야합니다. 이 경우 a 태그를 편집 할 수 없습니다. 다른 사람 (상당히 기술을 싫어하는 사람)이 CushyCMS (콘텐츠 편집기)를 사용하여 이미지를 대체 할 수 있도록 설정하고 있습니다. 이것은 현실적으로 이미지를 변경할 수있는 기능 만 제공합니다. 이 사람에게 a 태그를 업데이트 할 수는 없기 때문입니다 (이것은 절대 옵션이 아닙니다!).
내가 알아야 할 것은 a 태그에서 참조 된 이미지를 img 태그에서 참조한 이미지와 자동으로 동일하게 만드는 방법이 있다는 것입니다. 지금까지 연구를 통해 jquery / javascript가 여기에 해결책이 될 것이라고 믿습니다.
내가 찾은 다른 자바 스크립트 코드를 수정하려고 시도했지만 내 자신의 부적절 함으로 인해 작동하지 못했습니다.
누군가가 해결책을 가지고 있다면, 그들이 나를 위해 바보를 증명할 수 있다면 크게 감사 할 것입니다. 스크립트 태그가 포함 된 자바 스크립트를 성공적으로 사용했지만 그 이상으로는 거의 성공하지 못했습니다!
시간을내어 읽어 주셔서 감사하고 누구든지 도와 주셔서 감사합니다!
이 질문에 여전히 혼란 스럽지만 그게 당신이 원하는 것이라고 생각합니다. imgsrc 속성은 CMS하지만으로부터 변경할 수 있습니다 a. 이를 수정하려면 다음을 시도하십시오.
$(document).ready(function(){
var $a = $('a[rel=lightbox]');
$a.each(function(){
$(this).attr('href', $(this).find('img').attr('src'));
})
})
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다