앵커 태그가 없을 때 이미지에 Colorbox를 사용할 수 있습니까?

Question

Colorbox로 슬라이드 쇼를 만들려고합니다. 안타깝게도 이미지를 만드는 방법을 제어 할 수 없으므로 이미지에 앵커 태그 또는 rel =을 사용할 수 없습니다.

내가 할 수있는 최선은,이 같은 것입니다 : 이미지 태그 높이, 폭, 고도 태그를 가질 수 것

<div id="cbImg" class="slideshow"> 
    <img src="file1.png" />  
    <img src="file2.png" /> 
    <img src="file3.png" /> 
    <img src="file4.png" /> 
</div> 

...하지만 동적으로 생성합니다. 내가 제어 할 수있는 것은 이미지를 둘러싼 DIV 태그뿐입니다. 이미지를 둘러싼 다른 태그 (p, div, span)가 있거나 없을 수 있습니다.

이

<div id="cbImg" class="slideshow"> 
    <a href="file1.png" rel="slide" class="pop"><img src="file1.png" /></a> 
    <a href="file2.png" rel="slide" class="pop"><img src="file2.png" /></a> 
    <a href="file3.png" rel="slide" class="pop"><img src="file3.png" /></a> 
    <a href="file4.png" rel="slide" class="pop"><img src="file4.png" /></a> 
</div> 

예, 이것은 CMS에서오고있다 ... 아니, 나는 그것이 렌더링하는 방법을 수정할 수 없습니다 :

나는 이런 식으로 뭔가를 할 수 있습니다. 가능한 경우 슬라이드 쇼를 만들려고합니다.

Answer 1

기본적으로 JQuery를 사용하여 동적으로 IMG 태그 주위에 앵커 태그를 만들었습니다. 그런 다음 클래스를 추가하고 rel = ColorBox 옵션을 사용해야했습니다.

는 여기에 내가 앵커 태그를 생성하는 방법에 대한 도움말에 사용되는 답변 중 하나입니다

jQuery: Easiest way to wrap an image tag with an A anchor tag

Answer 2

블로그 문서를 변환하는 XSLT를 통해 것이 작업을 수행하는 또 다른 방법. 그러나 이미지가 블로그 게시물 내용에 포함되어 있다면 쉽지 않습니다 (특히 Ektron이 정규 표현식을 지원하지 않는 XSLT 1.0을 사용함에 따라).

이 서버 측에서 수행하려는 경우 컨텐츠를 가져 와서 문자열을 교체해야 할 수 있습니다. 또는 jQuery 솔루션을 사용하여 NodeJS를 사용하여 서버 측에서 실행할 수도 있습니다.