Jquery ColorBox : 갤러리와 같은 인라인 컨텐츠 표시

Question

ColorBox (http://colorpowered.com/colorbox/)라는 Jquery 라이트 박스를 사용하려고하는데 문제가 발생합니다.

라이트 박스를 사용하여 인라인 컨텐츠를 표시하고 싶지만 다음 및 이전 버튼이 나타납니다. 이렇게하면 사진 갤러리에서와 같이 다음 및 이전 버튼과 동일한 id 속성을 공유하는 모든 항목을 탐색 할 수 있습니다. 템플릿에 하드 코드를 넣으면 작동하지만, 게시물의 끝에 붙여 넣는 것처럼 자동화하면됩니다.

자주 새 요소를 추가하므로 초보자에게 새로운 요소를 추가하는 데 시간이 오래 걸립니다. 그래서 나는이 과정을 자동화하고 생성 된 코드는 (게시물에서) 당신의 것과 똑같아 보이지만, colorbox는 작동하지 않습니다. 이제 누구나 그것을 고칠 수 있습니까 (가능한 경우)? 도움말 크게 감사하겠습니다.

이 작동 :

<p><a class="group1" href="#box1">Grouped Photo 1</a></p> 
<p><a class="group1" href="#box2">Grouped Photo 2</a></p> 
<p><a class="group1" href="#box3">Grouped Photo 3</a></p> 

<div id="box1"> 
    Some text in box 1 Some text in box 1 
    Some text in box 1 
    Some text in box 1 
    Some text in box 1 
    Some text in box 1 
</div> 

<div id="box2"> 
    Some text in box 2 
    Some text in box 2 
    Some text in box 2 
    Some text in box 2 
    Some text in box 2   
</div> 

<div id="box3"> 
    Some text in box 3 
    Some text in box 3 
    Some text in box 3 
    Some text in box 3 
    Some text in box 3     
</div>  

이 같은 위의 코드를 편집하는 경우는 없습니다

<div class="links"> 
<p><a class="group1">Grouped Photo 1</a></p> 
<p><a class="group1">Grouped Photo 2</a></p> 
<p><a class="group1">Grouped Photo 3</a></p> 
</div> 
<div class="boxes"> 
     <div> 
      Some text in box 1 Some text in box 1 
      Some text in box 1 
      Some text in box 1 
      Some text in box 1 
      Some text in box 1 
     </div> 

     <div> 
      Some text in box 2 
      Some text in box 2 
      Some text in box 2 
      Some text in box 2 
      Some text in box 2   
     </div> 

     <div> 
      Some text in box 3 
      Some text in box 3 
      Some text in box 3 
      Some text in box 3 
      Some text in box 3     
     </div> 
</div> 

그리고 자바 스크립트 수행합니다

$('.links a').each(function(index) { 
    $(this).attr("href","#box"+index); 
}); 
$('.boxes div').each(function(index) { 
    $(this).attr("id","#box"+index); 
}); 
$(".group1").colorbox({rel:'group1', inline:true, href:$(this).attr('href'), width:"60%"}); 

이 모든 링크를 통해 이동하고를 href 속성에있는 링크와 동일한 ID를 추가합니다.

Answer 1

Colorbox는 DOM 요소를 호출 할 때 해당 요소를보고 내부 구조를 설정합니다. 즉, Colorbox의 설정 이벤트 후에 속성을 추가하면 플러그인에서 해당 속성을 볼 수 없습니다.

HREF 및 ID 할당을 실행할 때까지 Colorbox 호출을 연기하고 이후 동작을 변경하는지 확인하십시오.

Answer 2

Colorbox는 공유 rel 속성을 통해 생성 된 그룹에 다음 및 이전 버튼을 추가합니다. 처음 코드 샘플에 class="group1"이있는 곳에서 rel="group1"을 추가하면 단추가 나타납니다.

Answer 3

신경 쓰지 마세요. 어리석은 작은 실수를 발견했습니다.

$('.boxes div').each(function(index) { 
    $(this).attr("id","#box"+index); 
}); 

그리고 고정 : 조언

$('.boxes div').each(function(index) { 
    $(this).attr("id","box"+index); 
});