No Next / Prev Button on jQuery colorbox

Question

I'm using jQuery colorbox (http://www.jacklmoore.com/colorbox/example3/) on my website. And I'm trying to add multiple iframe box. It's working except there is no NEXT/PREV button in it.

Here is my code :

<script>
$(document).ready(function(){
    $('#group1').colorbox({
        arrowKey: true,
        open: true,
        opacity: 0.5,
        iframe: true,
        innerWidth:1000,  
        innerHeight:600,
        scrolling:false,
        rel:"group1"
        }); 
});
</script>

<a id="group1" href="http://tokobagus.com">Tokobagus</a>
<a id="group1" href="http://berniaga.com">Kaskus</a>

As you can see, there's arrowKey: true there, but the arrow is still not showing. Any idea?

Thank you...

Answer 1

Since id is unique, try to change it to class for both of your anchors:

<a class="group1" href="http://tokobagus.com">Tokobagus</a>
<a class="group1" href="http://berniaga.com">Kaskus</a>

and use $('.group1') instead of $('#group1')

Answer 2

Just You have to use class instead of id. check the solution in

http://jsfiddle.net/2kda6/