Слайд-шоу моего colorbox не работает должным образом

Question

Я хочу, чтобы при нажатии на якорь view_attachments открывался colorbox, в colorbox может быть одно или несколько изображений, если несколько, то next и prev должны работать.

[введите описание изображения здесь] [1]

<td>
    <a class="view_attachments" expense_id="{{$expense->id}}" href="javascript:;">
        <span class="glyphicon glyphicon-picture"></span>
    </a>
        {{--<a href="javascript:;" onclick="view_attachments({{$expense->id}}); return false;"><span class="glyphicon glyphicon-picture"></span></a> --}}
    <div>
    @foreach($expense->attachments as $attachment)
        <p>
            <a class="group
                <?php echo intval($expense->id);?>" href="{{asset("expense_attachments/voucher-" . $voucher_id ."/" . intval($expense->id) ."/" . $attachment->file_name . "")}}" title="">
            </a>
        </p>
    @endforeach
    </div>
</td>
<script>
    $(function(){

        $("a.view_attachments").on('click', function() {
        var expense_id = $(this).attr("expense_id");
        var $gallery = $(".group" + expense_id).colorbox({rel:'group' + expense_id,slideshow:true,width:'auto',innerWidth:'auto'});
        $(".group" + expense_id).colorbox({rel:'group' + expense_id,slideshow:true,width:'auto',innerWidth:'auto'});
        //e.preventDefault();
        $gallery.eq(0).click();
     });
    });

    // function view_attachments(expense_id)
    // { 
    //     //alert(expense_id);
    //     //$(".attachments" + expense_id).show();
    //     $.colorbox({rel:'group' + expense_id,width:'70%',innerWidth:'100%'});

    //     //$(".group" + expense_id).colorbox({rel:'group' + expense_id, slideshow:true});
    // }
</script>





[1]: https://i.stack.imgur.com/Rf9eh.jpg