The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Image Gallery Not Working?
xxkasperxx
post Jun 12 2012, 11:42 AM
Post #1


Serious Coder
*****

Group: Members
Posts: 261
Joined: 30-April 11
Member No.: 14,449



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>
    <!-- Thumb Nail 1 -->
    <div class="images">
        <a href="#" id="openGallery"><img src="images/safety.png" alt="" width="200px" height="200px"></a>Safety Day
    </div>
    <!-- Thumbnail 2 -->
    <div class="images">
        <a href="#" id="openGallery2"><img src="images/easter.png" alt=""></a>Eggstravaganza
    </div>
    <!-- Thumbnail 3 -->
    <div class="images">
        <a href="#" id="openGallery3"><img src="images/july.png" alt="" width="200px" height="200px"></a>July 4th
    </div>
    <!-- Thumbnail 4 -->
    <div class="images">
        <a href="#" id="openGallery4"><img src="images/halloween.png" alt="" width="200px" height="200px"></a>Halloween
    </div>
    <!-- Thumbnail 5 -->
    <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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Jun 12 2012, 10:02 PM
Post #2


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jun 13 2012, 01:16 AM
Post #3


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 06:59 PM