1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Rep Power

    Problem calling modal lightbox popup with image click

    I am having some problems calling a modal lightbox poopup by clicking on an image.

    The page is called test.

    It places a thumbnail image in a nice box with text that describes the image in brief.
    The corners of the image and the text box are nicely rounded.
    my webpage uses a css called style.css

    I have found some example code on a tutorial site that produces an image on a web page and when you click the image it opens a really nice animated model lightbox that can contain a larger version of the thumbnail and more in depth text.
    It also makes the original page containing the thumbnail go dim which is a neat effect.
    This comes with its own css called _styles.

    At the moment the lightbox code is on its own html page.

    The popup has a different style to my web page but I like it and want to keep it for the popup only.

    I need to be able to click on the thumbnail in my test.html and have the modal popup run but i cannot get it to work.

    If I copy the modal code into my original html page then the page displays, along with the thumbnail, the larger original image both on the same page (not what is meant to happen) and they are mixed into each other. Its a bit of a mess.

    It is beyond my knowledge of code to do this so I wonder if anyone could help?

    This is the HTML for my original page:

    <----------- Code Start --------->
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="robots" content="all" />
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <link href='()=Lato:300,400,700|Cookie' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="css/work.css">
    <script src="()"></script>
    <script src="scripts/jquery.carouFredSel-5.5.2.js" type="text/javascript"></script>
    <script type="text/javascript" src="scripts/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="scripts/jquery.form.js"></script> 
    <script type="text/javascript" src="scripts/scripts.js"></script> 
    <!-- END OF DON'T TOUCH -->
          <hr/>  <!-- Horizontal Line -->
    	 <section id="work"> <!-- Work Links Section Start -->
          <div class="item">
    	    <img src="images/work/thumbs/item.png" alt="image 1"></a>
             <h3><b>Title Text Goes Here</b></h3><!--Track Title-->
               <BR><!--Adds a blank line in the paragraph-->
                 <p>Some Text Line 1</p><!--Track Number-->
                   <p>Some Text Line 2</p><!--BPM Range-->
                     <p>Some Text Line 3</p><!--Track Length-->
            <div class="clearfix"></div>
    <----------------Code End ------------------>
    And this is the code for the modal lightbox
    <----------------Code Start---------------->
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "()">
    <html xmlns="()">
    	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    	<meta name="author" content="The CSS Ninja" />
    	<meta name="keywords" content="CSS, CSS3, CSS pseudo selectors, Futurebox" />
    	<meta name="description" content="Futurebox, lightbox without the javascript" />
    	<meta name="robots" content="all" />
    !--	<meta name="copyright" content="The CSS Ninja" />
    	<link rel="stylesheet" type="text/css" href="full-track-popup-styles.css" media="screen" />
    	<title>Futurebox, lightbox without the javascript | The CSS Ninja</title>
    	<h2>Static &amp; iFrame Content</h2>
    		<li title="Static content example 2">
    			<label for="futurebox07"><img src="images/work/test.jpg" width="100" height="102" alt="The CSS Ninja" /></label>
    			<input type="radio" id="futurebox07" name="gallery" />
    			<div class="overlay">
    				<label for="close" title="Close futurebox">
    					<span class="content01">
    						<strong class="closebutton" title="Close futurebox">X</strong>
    						<span class="inner_content">
    							<img src="images/work/test.jpg" width="100" height="102" alt="The CSS Ninja" />
    							<span>Lorem ipsum dolor sit amet</span>
    	<input type="radio" id="close" name="gallery" />
    <---------------------Code End------------------->
    Last edited by Kravvitz; April 22nd, 2013 at 06:13 PM. Reason: replaced [PHPNET] tags with [code] tags
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Rep Power

    Anyone ?

    please, thanks

IMN logo majestic logo threadwatch logo seochat tools logo