jQuery를 Colorbox : 클릭 된 요소가 나는 등의 div의 외부 태그를 필요로하지 않는 시나리오가 배경

Question

에서 숨 깁니다 : 그래서

<a href="#box"> 
<div class="colorboxElements">click here!</div> 
</a> 
<div id="box">here is the content!</div> 

을, 나는 각 div 요소에 HREF를 사용했다 그리고 나는 ID를 준 클래스의 elments에 : 나는 클래스 .colorboxElements의 요소를 클릭하면 이제

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

$(".colorboxElements").colorbox({rel:'colorboxElements', inline:true, href:$(this).attr('href'), transition:"none", width:"75%", height:"auto"}); 

, 그것은 colorbox에 표시하지만 문제는 배경도 "이전"숨길됩니다 클릭 된 요소이며 첫 번째 요소에 다시 클릭하면 "다음"버튼이 작동하지 않고 다음 요소를 클릭합니다. 마지막 요소. 여기

http://jsfiddle.net/etRtm/

Answer 1

는 FIDDLE

HTML

<div class="colorboxElements"> 
    <a href="#box">click here!</a> 
    <div id="box" class="box">here is the content!</div> 
</div> 

JS

$('.colorboxElements a').each(function (index) { 
    $(this).attr("href", "#box" + index); 
    $(this).siblings('.box').attr("id", "box" + index); 
}); 

$(".colorboxElements a").colorbox({ 
    rel: 'colorboxElements', 
    inline: true, 
    transition: "none", 
    width: "75%", 
    height: "auto" 
});