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,212
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.


--------------------
Brian Chandler
Nothing in this post constitutes "commercial solicitation". PayPal does not solicit residents of Japan. Contents may settle in transit. "Legal mind" may or may not be brain-damaged.
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: 4,133
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?


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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

 



- Lo-Fi Version Time is now: 23rd April 2014 - 10:17 PM