Additional colorbox text link to slideshow

Question

I have added colorbox to my site to display my images, but I would like to create an additional link to open the slideshow other than clicking on the image thumbnail. I've tried the code from the FAQ on the Colorbox website, but it is not working. Here is what I have. (link to the webpage: colorbox link demo

<a id="openGallery" href="#">Click for more images</a>
$(document).ready(function() {
    $('a.slideGroup').colorbox({rel:'slideGroup', transition:"elastic", opacity:"0.5"});

    var $gallery = $("a[rel=slideGroup]").colorbox();
    $("a#openGallery").click(function(e){
        e.preventDefault();
        $gallery.eq(0).click();
    });
});

Answer 1

You are calling the colorBox() function twice which I think is incorrect.

If you combine those you should be good to go:

<a id="openGallery" href="#">Click for more images</a>
<script type="text/javascript">
    $(document).ready(function() {
        //just one call to set up the colorbox
        var $gallery = $('a.slideGroup').colorbox({rel:'slideGroup', transition:"elastic", opacity:"0.5"});

        $("a#openGallery").click(function(e){
            e.preventDefault();
            $gallery.eq(0).click();
        });
    });

Here is a working example on CodePen: http://codepen.io/simoncowie/pen/agxGl