Откройте Next inline Colorbox Div по клику

У меня есть 2 изображения, когда я нажимаю на них, открывается соответствующий #DIV. И это прекрасно работает. Я использую плагин colorbox 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>

1 ответ

Решение
<img src="car2.jpg">

Вам нужно закрыть img элементы <img />

<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();
});

Демо: http://jsfiddle.net/wPdBy/

Другие вопросы по тегам