www.webdeveloper.com
Results 1 to 6 of 6

Thread: Lightbox problem

  1. #1
    Join Date
    Dec 2011
    Posts
    12

    Lightbox problem

    I am making a light box. It works great, but what I want it to do is change text with the photo. My code is below and my working project is here
    HTML
    Code:
    <div class="bio grid_12">
       <img src="images/n99design.png" class="thumbnail" width="120">
       <img src="images/Car Parking.JPG" class="thumbnail" width="120">
       <img src="images/dog barking.jpg" class="thumbnail" width="120">
    </div>
    
    </div>
    <div id="popup">
    	<div id="center">
    		<img id="lightbox" src="images/n99design.png" >
            <p>John Doggette served as a volunteer mediator with the Community Conflict Services and Mennonite Peace Center program since 2007 before moving in 2012 to his current role. Because of his commitment to mediation as a means of helping empower people to resolve their own conflicts he agreed in 2012 to come out of retirement to direct the Community Mediation Program of the Mennonite Peace Center.</p>
    <p>Since his 2006 arrival in St. Louis he has also volunteered and facilitated men's groups with RAVEN including those at the City of St Louis Workhouse.</p>
    <p>He has been committed to volunteer mediation since 1997 when he completed the first of two 40-hour required mediation courses toward his State of Tennessee Certification in Civil and Family Mediation. From 1997 to 2005 he served as the first full time director of the Knoxville, Tennessee Community Mediation Center, a center with over 100 volunteer mediators. During his tenure, mediation became an integral and valued conflict resolution component. The Knoxville Community Mediation Center grew to support referrals from the Civil, Criminal and Juvenile Courts as well as the general community. Dr. Doggette was also one of eight mediators for the State of Tennessee, Division of Special Education providing conflict resolution between schools and families as well as training to State and local governments, business organizations and neighborhood organizations.</p>
    <p>Prior to his interest in mediation John  was employed for 25 years by Oak Ridge Associated Universities a contractor for the Department of Energy where he was a division leader specializing in training and development  providing support  services across  the nation. </p>
    
            
    		<img id="close" src="images/close.png" alt="close" >
    	</div>  <!-- #center --> 
    </div>  <!-- #popup -->
    Code:
    $(document).ready(function(){
    $(".thumbnail").click(function(){
    	var address= $(this).attr("src");
    	$("#popup").fadeIn("slow");
    	$("#lightbox").attr("src",address);
    });
    $("#close").click(function(){
    	$("#popup").fadeOut("fast");
    });
    });
    CSS
    Code:
    #popup{
        background:#000;
        height:100%;
        width: 100%;
        position:fixed;
        top: 0;
        left: 0;
        display: none;
    }
    #center{
    	background:#f4f4de;
        border: 10px solid #121212;
        margin: 6% auto;
        width: 75%;
    }
    #close{
        float: right;
        position: absolute;
        top: 12%;
    	}

  2. #2
    Join Date
    Dec 2011
    Posts
    12
    Still need some help.

  3. #3
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,672
    1. <body onLoad="cycle()"> this function had never been defined, so this causes an error:

    [15.05.2013 19:57:13] JavaScript - http://www.n99design.com/mediation/staff.php
    Unknown thread
    Uncaught exception: ReferenceError: Undefined variable: cycle
    Error thrown at line 1, column 0 in <anonymous function>(event) in http://www.n99design.com/mediation/staff.php:
    cycle()


    2.
    Code:
    <div class="bio grid_12">
    <img id="p_1" src="images/n99design.png" class="thumbnail" width="120" />
    <img id="p_2" src="images/Car Parking.JPG" class="thumbnail" width="120" />
    <img id="p_3" src="images/dog barking.jpg" class="thumbnail" width="120" />
    </div>
    </div>
    <div id="popup">
    <div id="center">
    <img id="lightbox" src="images/n99design.png" />
    <div id="t_1">
    <p>John Doggette served as a volunteer mediator with the Community Conflict Services and Mennonite Peace 
    Center program since 2007 before moving in 2012 to his current role. Because of his commitment to mediation as 
    a means of helping empower people to resolve their own conflicts he agreed in 2012 to come out of retirement to 
    direct the Community Mediation Program of the Mennonite Peace Center.</p>
    <p>Since his 2006 arrival in St. Louis he has also volunteered and facilitated men's groups with RAVEN including 
    those at the City of St Louis Workhouse.</p>
    </div>
    <div id="t_2">
    <p>He has been committed to volunteer mediation since 1997 when he completed the first of two 40-hour required 
    mediation courses toward his State of Tennessee Certification in Civil and Family Mediation. From 1997 to 2005 
    he served as the first full time director of the Knoxville, Tennessee Community Mediation Center, a center with 
    over 100 volunteer mediators. During his tenure, mediation became an integral and valued conflict resolution 
    component. The Knoxville Community Mediation Center grew to support referrals from the Civil, Criminal and Juvenile 
    Courts as well as the general community. Dr. Doggette was also one of eight mediators for the State of Tennessee, 
    Division of Special Education providing conflict resolution between schools and families as well as training to 
    State and local governments, business organizations and neighborhood organizations.</p>
    </div>
    <div id="t_3">
    <p>Prior to his interest in mediation John  was employed for 25 years by Oak Ridge Associated Universities a 
    contractor for the Department of Energy where he was a division leader specializing in training and development 
    providing support  services across  the nation.</p>
    </div>
    <img id="close" src="images/close.png" alt="close" />
    </div>  <!-- #center --> 
    </div>  <!-- #popup -->  
    <script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    
    $(".thumbnail").click(function(){
    var address=$(this).attr("src");
    var ID=$(this).attr('id');
    var N=ID.substring(ID.indexOf('_'),ID.length);
    $("#popup div[id*=t_]").css('display','none');
    $('#t'+N).css('display','block');
    $("#popup").fadeIn("slow");
    $("#lightbox").attr("src",address);
    });
    
    $("#close").click(function(){
    $("#popup").fadeOut("fast");
    });
    
    });
    </script>

  4. #4
    Join Date
    Dec 2011
    Posts
    12
    The error is caused by the slide show on the index page. Since I'm using PHP and adding a header its on all the pages. Thanks!

  5. #5
    Join Date
    Dec 2011
    Posts
    12
    Thank Pad

  6. #6
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,672
    YW hope this helped

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles