Jquery ColorBox : 다음 및 이전 버튼으로 인라인 컨텐츠 표시

Question

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

라이트 박스를 사용하여 인라인 컨텐츠를 표시하고 싶지만 다음 및 이전 버튼이 나타납니다. 이렇게하면 포토 갤러리에서와 마찬가지로 다음 버튼과 이전 버튼을 사용하여 동일한 rel 속성을 공유하는 모든 항목을 탐색 할 수 있습니다.

지금까지 제 코드가 다소 효과적이었습니다. 그러나 동일한 rel 속성을 가진 모든 요소는 인식되지 않는 것으로 보입니다. 실제로, 다음 및 이전 버튼을 미리 클릭해야 나타납니다.

은 여기 내 HTML

<div id="galcontainer"> 
<div class="element"> 
    <a href="link.php" rel="Catalogue" cbx="Catalogue1" class="cbx"> 
     <img src="image.jpg" /> 
    </a> 
    <div style="display:none"> 
     <div id="Catalogue1"> 
      Content Goes Here 
     </div> 
    </div> 
</div> 

<div class="element"> 
    <a href="link.php" rel="Catalogue" cbx="Catalogue27" class="cbx"> 
     <img src="image.jpg" /> 
    </a> 
    <div style="display:none"> 
     <div id="Catalogue27"> 
      Content Goes Here 
     </div> 
    </div> 
</div> 
... 
</div> 

입니다 그리고 여기 jQuery 코드입니다 :

$("a.cbx").click(function(){ 
    var divtoload=$(this).attr("cbx"); 
    var cbxgroup=$(this).attr("rel"); 
    $(this).colorbox({rel:cbxgroup, width:"70%", maxWidth:"720px", inline:true, href:"#"+divtoload}); 
}) 

Answer 1

나는 비슷한 문제에 일하고 있었다. 나는 기본적으로 모든 것을 단순화하고 이것이 효과가있다.

자바 스크립트

<script type="text/javascript"> 
    $(document).ready(function() { 
    $(".group1").colorbox({rel:'group1', inline:true, href:$(this).attr('href')}); 
    }); 
</script> 

내용

<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>  

Answer 2

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

나는이

<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) { 
    q(this).attr("href","#box"+index); 
}); 
$('.boxes div').each(function(index) { 
    q(this).attr("id","#box"+index); 
}); 

이 모든 링크를 통해 이동 및 링크가 href 속성에서이 같이 그들에게 동일한 ID를 추가합니다

Answer 3

나는 이것이 오래된 질문이라는 것을 알고있다. 그러나 다른 해결책을 찾았습니다. 플러그인 개발자는 다음과 같이 추천합니다. https://github.com/jackmoore/colorbox/issues/600

<a href='#' id='open'>Open inline group</a> 
<div style='display:none'> 
    <div class='inline'> 
     <div style='padding:10px; background:#fff;'> 
      <p><strong>This content comes from a hidden element on this page.</strong></p> 
     </div> 
    </div> 
    <div class='inline'> 
     <div style='padding:10px; background:#fff;'> 
      <p><strong>2. This content comes from a hidden element on this page.</strong></p> 
     </div> 
    </div> 
    <div class='inline'> 
     <div style='padding:10px; background:#fff;'> 
      <p><strong>3. This content comes from a hidden element on this page.</strong></p> 
     </div> 
    </div> 
    <div class='inline'> 
     <div style='padding:10px; background:#fff;'> 
      <p><strong>4. This content comes from a hidden element on this page.</strong></p> 
     </div> 
    </div> 
</div> 
<script> 
     var $group = $('.inline').colorbox({inline:true, rel:'inline', href: function(){ 
      return $(this).children(); 
     }}); 
     $('#open').on('click', function(e){ 
      e.preventDefault(); 
      $group.eq(0).click(); 
     }); 
</script>