Hey guys,

I'm trying to create a page with a number of thumbnails that then when you click one of the thumbnails it brings up a colorbox of images that are hidden. I've tried a couple of things and the closest I've got is shown in the code below. Problem is that once it reaches the end of the set of images under one thumbnail, it doesn't loop (I want it to loop) - instead it moves onto the next set of hidden images contained under the second thumbnail, and so on.

Appreciate any advice and feel free to tell me if the code is all over the place (total newbie here).

Code:
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title>ColorBox Examples</title>
    <link rel="stylesheet" type="text/css" href="css/page.css">
    <link rel="stylesheet" href="colorbox.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7. /jquery.min.js"></script>
    <script src="../colorbox/jquery.colorbox.js"></script>
    <script>
        $(document).ready(function(){
            //Examples of how to assign the ColorBox event to elements
            $(".group1").colorbox({rel:'group1'});
            $(".group2").colorbox({rel:'group2', transition:"fade"});
            $(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
            $(".group4").colorbox({rel:'group4', slideshow:true});
            $(".ajax").colorbox();
            $(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
            $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
            $(".inline").colorbox({inline:true, width:"50%"});
            $(".callbacks").colorbox({
                onOpen:function(){ alert('onOpen: colorbox is about to open'); },
                onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
                onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
                onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
                onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
            });

            //Example of preserving a JavaScript event for inline calls.
            $("#click").click(function(){ 
                $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
                return false;
            });
        });
    </script>
</head>
<body>
            <div id = "imgHolder">
    <a class="group1" title="Photo1" href="../content/Largeimg1.jpg"><img alt="" src="../content/img1.jpg"></a>
    <a class="group1 hidden" title="Photo2" href="../content/Largeimg2.jpg"></a>
    <a class="group1 hidden" title="Photo3" href="../content/Largeimg3.jpg"></a>
    <a class="group1 hidden" title="Photo4" href="../content/Largeimg4.jpg"></a>
    <a class="group1 hidden" title="Photo5" href="../content/Largeimg5.jpg"></a>
    <a class="group1 hidden" title="Photo6" href="../content/Largeimg6.jpg"></a>
    <a class="group1" title="Photo7" href="../content/Largeimg2.jpg"><img alt="" src="../content/img2.jpg"></a>
    <a class="group1 hidden" title="Photo8" href="../content/Largeimg8.jpg"></a>
    <a class="group1 hidden" title="Photo9" href="../content/Largeimg9.jpg"></a>
    <a class="group1 hidden" title="Photo10" href="../content/Largeimg10.jpg"></a>
    <a class="group1 hidden" title="Photo11" href="../content/Largeimg11.jpg"></a>
    <a class="group1 hidden" title="Photo12" href="../content/Largeimg12.jpg"></a>
    <a class="group1" title="Photo13" href="../content/Largeimg3.jpg"><img alt="" src="../content/img3.jpg"></a>
    <a class="group1 hidden" title="Photo14" href="../content/Largeimg14.jpg"></a>
    <a class="group1 hidden" title="Photo15" href="../content/Largeimg15.jpg"></a>
    <a class="group1 hidden" title="Photo16" href="../content/Largeimg16.jpg"></a>
    <a class="group1 hidden" title="Photo17" href="../content/Largeimg17.jpg"></a>
    <a class="group1 hidden" title="Photo18" href="../content/Largeimg18.jpg"></a>
    <a class="group1" title="Photo19" href="../content/Largeimg4.jpg"><img alt="" src="../content/img4.jpg"></a>
    <a class="group1 hidden" title="Photo20" href="../content/Largeimg20.jpg"></a>
    <a class="group1 hidden" title="Photo21" href="../content/Largeimg21.jpg"></a>
    <a class="group1 hidden" title="Photo22" href="../content/Largeimg22.jpg"></a>
    <a class="group1 hidden" title="Photo23" href="../content/Largeimg23.jpg"></a>
    <a class="group1 hidden" title="Photo24" href="../content/Largeimg24.jpg"></a>
    </div>

</body>
</html>