HTMLHelp Forums > Image Gallery Not Working?

xxkasperxx

Jun 12 2012, 11:42 AM

I got this code from a site, and it only lets me use the first 2 picutres. If i click on a picture after that it shows me the first picture....
How do i fix that?

CODE:

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<link href="css/reset.css" type="text/css" rel="stylesheet" >
<link href="css/main.css" type="text/css" rel="stylesheet" >

<link rel="stylesheet" href="css/colorbox.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/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;
                });   */


                var gallery3 = $("[rel=group3]").colorbox();
                $("#openGallery3").click(function(e){
                    e.preventDefault();
                    gallery.eq(0).click();
                });

                var gallery4 = $("[rel=group4]").colorbox();
                $("#openGallery4").click(function(e){
                    e.preventDefault();
                    gallery.eq(0).click();
                });

                var gallery5 = $("[rel=group5]").colorbox();
                $("#openGallery5").click(function(e){
                    e.preventDefault();
                    gallery.eq(0).click();
                });

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

                var gallery2 = $("[rel=group2]").colorbox();
                $("#openGallery2").click(function(e){
                    e.preventDefault();
                    gallery2.eq(0).click();
                });


            });
        </script>
</head>
<body>
<div id="wrapper">
    <div id="contt1">

     <div style="display:none;">


        <a href="images/homepage/safety/DSC01280.jpg" rel="group1"></a>
        <a href="images/homepage/easter/DSC01145.jpg" rel="group2"></a>
        <a href="images/homepage/july/DSC00694.jpg" rel="group3"></a>

    <a href="images/floral/full-size/vegas-weddings-floral-1.jpg" rel="group5" title="Flower 1"></a>

    </div>
    
    <div class="images">
        <a href="#" id="openGallery"><img src="images/safety.png" alt="" width="200px" height="200px"></a>Safety Day
    </div>
    
    <div class="images">
        <a href="#" id="openGallery2"><img src="images/easter.png" alt=""></a>Eggstravaganza
    </div>
    
    <div class="images">
        <a href="#" id="openGallery3"><img src="images/july.png" alt="" width="200px" height="200px"></a>July 4th
    </div>
    
    <div class="images">
        <a href="#" id="openGallery4"><img src="images/halloween.png" alt="" width="200px" height="200px"></a>Halloween
    </div>
    
    <div class="images">
        <a href="#" id="openGallery5"><img src="images/christmas.png" alt="" width="200px" height="200px"></a>Christmas
    </div>



    </div>

    <div id="contt2">
        <div id="nav">

                <ul id="menu">
                    <li><a href="index.php">Home</a></li>
                    <li><a href="history.php">History</a></li>
                    <li><a href="membership.php">Membership</a></li>
                    <li><a href="leadership.php">Leadership</a></li>
                    <li><a href="projects.php">Projects</a></li>
                    <li class="sub1"><a href="funds.php">Fund Raisers</a>

                    <ul>
                    <li><a href="bricks.php">Bricks</a></li>
                    <li><a href="directory.php">Dicrectory</a></li>
                    <li><a href="golf.php">Golf</a></li>
                    </ul></li>
                </ul>
            </div>
                <img src="images/logo.png" alt=""><br><br><Br>

    </div>

    <div id="contt3">
        <div class="images">
            <img src="images/beautification.png" alt=""width="200px"height="200px">Beautification
        </div>
        <div class="images">
            <img src="images/parks.png" alt=""width="200px"height="200px">Parks
        </div>
        <div class="images">
            <img src="images/yard.png" alt=""width="200px"height="200px">Yard of the Month
        </div>
        <div class="images">
            <img src="images/golf.png" alt=""width="200px"height="200px">Golf Tournament
        </div>
        <div class="images">
            <img src="images/directory.png" alt=""width="200px"height="200px">Directory
        </div>
    </div>

    <div id="footer"><br/>
        <p>P.O. Box 223</p>
        <p>Montgomery, TX 77356</p>
    </div>

</div>
</body>
</html>

Brian Chandler

Jun 12 2012, 10:02 PM

QUOTE

How do i fix that?

You have to debug the program, which was written by someone else, and is totally uncommented. Personally in this situation I would expect it to be easier to write a new program from scratch.

Frederiek

Jun 13 2012, 01:16 AM

Colorbox is a lightbox plugin for jQuery. So it's just a matter of the right HTML syntax and script configuration. No need to rewrite that from scratch.

Can you post the url of your page, so we can see the images too?
Also, which example of Colorbox did you use, as there are many?