열기 다음 인라인 컬러 박스 사업부

Question

2 개의 이미지가 있는데 클릭하면 각 #DIV가 열립니다. 그리고 그것은 잘 작동합니다. 칼라 박스 jQuery 플러그인을 사용하고 있습니다.

그러나 나는 2 개의 링크 ajNext와 ajPrev도 추가했습니다.

다음 또는 이전 인라인 DIV를 열고 싶습니다. 그룹화 된 DIV로 그들을 열 수 있습니까, 마치 갤러리 다음 이전 기능과 같습니다. 친절하게 :)

$(document).ready(function(){ 
     $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"}); 
     $(".inline").colorbox({inline:true, width:"1020px", height: "560px"}); 

     $('#ajNext').live('click', function(){ 
      $.fn.colorbox.next(); 
     }); 
    }); 

내 HTML 도움 :

<li><a class="inline" href="#profile1"><img src="car1.jpg"></a></li> 
<li><a class="inline" href="#profile2"><img src="car2.jpg"></a></li> 

<div id="inline_profiles"'> 
      <div id="profile1" class="profilex"> 
       <img src="images/kala-mela/car1_1.jpg"> 
       <p><strong>Prasanna R. Gogilwar. 111</strong></p> 
       <p>111 Prasanna loves birds and his favourite is the Hornbill. He mentioned that the side lights of the Nano bear a striking resemblance to the bird and the thought of owning a Nano with his design on it would be extremely exciting. He would drive is everywhere so that people get a chance to admire his work.</p> 
       <a id="ajPrev"></a> 
       <a id="ajNext"></a> 
      </div> 

      <div id="profile2" class="profilex"> 
       <img src="images/kala-mela/car1_1.jpg"> 

       <p><strong>Prasanna R. Gogilwar. 2222</strong></p> 
       <p>222 Prasanna loves birds and his favourite is the Hornbill. He mentioned that the side lights of the Nano bear a striking resemblance to the bird and the thought of owning a Nano with his design on it would be extremely exciting. He would drive is everywhere so that people get a chance to admire his work.</p> 
       <a id="ajPrev"></a> 
       <a id="ajNext"></a> 
      </div> 
     </div> 

당신은 img 요소 <img />을 닫아야합니다

Answer 1

<img src="car2.jpg"> 

이

<a id="ajPrev"></a> 
<a id="ajNext"></a> 

id은 고유해야

$(".inline").colorbox({inline:true, width: '50%', rel: 'profilex'}); 

$('.ajPrev').on('click', function(){ 
    $.fn.colorbox.prev(); 
}); 
$('.ajNext').on('click', function(){ 
    $.fn.colorbox.next(); 
}); 

데모 : 또한 네, 그 ID의 n 개의 클래스를 잊지 바보했다 :) http://jsfiddle.net/wPdBy/