Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Help Needed with Lightbox + Virtual Paginate Combo

    Hello,

    I am attempting to create a page using virtualpaginate in which it will allow the user to click on an image and then it will pop-out a larger image (using lightbox).

    I must say, I am in a bit above my head since this level of coding is completely new to me so I would greatly appreciate any assistance!!

    On the 5th virtualpage (the one with image "Tandem Rowing_1920.jpg") is where I am trying to use lightbox by defining this DIV as sc_menu...

    The lightbox/pop-out feature works fine, but for some reason the image is made small and there is a long horizontal black area.

    It seems to me that there is a conflict between the two functions... unless there is something that a newbie like me might be missing.

    I would greatly appreciate any assistance anyone can offer!

    Thank you in advance!

    Below is the code for my main PHP page:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Viviana Santamarina</title> 
    
    <style type="text/css"> html, body { background-color: #111; width: 1100px; margin-right: auto; margin-left: auto; margin-top: 50px; padding: 0px; border: 0px; } 
    
    p { color: white; font-family: arial; font-size: 18px; font-weight: bold;}
    h1 { color: white; font-family: arial; font-size: 24px; font-weight: bold;}
    h5 { color: white; font-family: arial; font-size: 16px;}
    h6 { color: white; font-family: arial; font-size: 12px;}
    a { color: white; font-family: arial; font-size: 14px; font-weight: bold;}
    
    
    #container { width: 1100px; margin: 0 0 0 20px; /* top right bottom left */ padding: 0; background-color: #111; } 
    
    
    #container #col1 { background: #000; height: 600px; width: 250px; float: left; } 
    
    
    #container #col2outer { width: 850px; float: right; margin: 0; padding: 0; } 
    
    #col2outer #col2mid { background: #111; height: 600px; width: 600px; float: left; } 
    
    #col2outer #col2side { background: #000; height: 600px; width: 250px; float: right; } 
    
    
    
    #container #footer { float: left; width: 870px; } 
    
    
    </style> 
    
    
    <style type="text/css">
    
    ul {
    	list-style-type:none;
    	margin-left: 0px;
    	padding-left: 0px;
     }
    ul li {
    	float: left;
    	padding-top: 0px;
    	padding-right: 15px;
    	padding-bottom: 0px;
    	padding-left: 0px;
          }
    
    
    div.sc_menu {
    /* Set it so we could calculate the offsetLeft */
    position: relative;
    height: 300px;
    width: 850px;
    overflow: auto;
    }
    ul.sc_menu {
    display: block;
    height: 300px;
    /* max width here, for users without javascript */
    width: 1800px;
    padding: 15px 0 0 15px;
    /* removing default styling */
    margin: 0;
    background: #000;
    list-style: none;
    }
    .sc_menu li {
    display: block;
    float: left;
    padding: 0 0;
     
    }
    .sc_menu a {
    display: block;
    text-decoration: none;
    }
    .sc_menu span {
    display: none;
    margin-top: 0px;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    color: black;
    }
    .sc_menu a:hover span {
    display: block;
    }
    .sc_menu img {
    border: 0px white solid;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    width: 175px;
    margin-left:35px;
    margin-right:15px;
    filter:alpha(opacity=85);
    opacity: 0.75;
     
    }
    .sc_menu a:hover img {
    border: 0px;
    filter:alpha(opacity=100);
    opacity: 1;
    width: 175px;
     
    position: relative;
     
    }
    </style>
    <script src="js/jquery.tools.min.js"></script> 
    <script type="text/javascript" src="js/virtualpaginate.js"></script> 
    
    <script type="text/javascript" src="js/jquery.lightbox.js"></script>
    
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> 
    
    </head> 
    
    <body> 
    <div id="container"> <h1>Viviana Santamarina - Paper Knitted Sculptures</h1> 
    
    <div id="col1" align="center"> <p>ABOUT MY WORK</p>
    
    <h6 align="left">
    Turning humble tools like pencils into hooks and paper into strips allows me to leave graphite traces while the paper is being knitted, a deconstructed drawing of sorts.<br><br>
    
    While the stitches grow, interdependence grows as well. The tension that both elements generate a structural and narrative balance by circling what it is and giving edge to the void. <br><br>
    
    It is in the vases where the maze of symmetrical stitches grow upward by saturating the space and closing on itself.<br><br>
    
    It is through craftworks, the need to create artifacts which fulfill the basic functions of everyday life, that humanity engraved the first traces of culture, from knitted blankets and quilts to woven fishing nets, intertwining the threads of human experience that compromise the fabric of life.<br><br>
    
    Knitting men and women discovered, almost without searching, the first manifestation of order, thought-structure, and progressive rhythms as well as mathematical and geometrical experiences while in the creative trance induced by knitting.<br><br>
    
    This amazing skill was taught throughout generations and to me by my grandmother in my early teens. I try to transfer this knowledge every time I have the chance
    </h6>
    
    
     </div> 
    
    
    
    
    <div id="col2outer"> 
    
    	<div id="col2mid" align="center"> <p>PORTFOLIO</p> 
    	
    		<div class="virtualpage hidepiece"> 
    				<a href="cronindesigns.php"><img src="images/work/EVA_1920.jpg" alt="Cronin Designs" class="img" /></a> 
    				<h5>"Sitting Nude" 2010 <p></h5>
    				<h6>Medium: paper crochet<br>
    				Dimensions: 24" x 22" x 32"<br>
    				</h6> 
    		</div> 
    					
    		<div class="virtualpage hidepiece"> 
    				<a href="cronindesigns.php"><img src="http://4.bp.blogspot.com/_iQqQLvw9mtA/TG_6Bq6QUGI/AAAAAAAAAQs/SLDnT7Qj3vI/s320/VSantamarina_SilentHarmonies_Medium.jpg" alt="Cronin Designs" class="img" /></a> 
    				<h6>Date: June 2008 /  Work: Web Design  / Client: <strong>Cronin Designs</strong></h6> 
    		</div> 
    					
    		<div class="virtualpage hidepiece"> 
    				<a href="cronindesigns.php"><img src="images/work/Newsocchio_1920.jpg" alt="Cronin Designs" class="img" /></a> 
    				<h6>Date: June 2008 /  Work: Web Design  / Client: <strong>Cronin Designs</strong></h6> 
    		</div> 
    					
    		<div class="virtualpage hidepiece"> 
    				<a href="cronindesigns.php"><img src="http://4.bp.blogspot.com/_iQqQLvw9mtA/TG_6Bq6QUGI/AAAAAAAAAQs/SLDnT7Qj3vI/s320/VSantamarina_SilentHarmonies_Medium.jpg" alt="Cronin Designs" class="img" /></a> 
    				<h6>Date: June 2008 /  Work: Web Design  / Client: <strong>Cronin Designs</strong></h6> 
    		</div> 
    			
    			
    		<div class="virtualpage hidepiece"> 
    		<div class="sc_menu">
    <ul class="sc_menu">	
    <li><a href="images/work/Tandem Rowing_1920.jpg" class="lightbox-2" rel="potview"><img src="images/work/Tandem Rowing_1920s.jpg" alt="BBC Gardens"/></a> 
    </li> 
    </ul>	
    TESTING TEXT LCOATION
    		</div>
    		</div> 
    			
    			
    		<div class="virtualpage hidepiece"> 
    				<a href="cronindesigns.php"><img src="http://4.bp.blogspot.com/_iQqQLvw9mtA/TG_6Bq6QUGI/AAAAAAAAAQs/SLDnT7Qj3vI/s320/VSantamarina_SilentHarmonies_Medium.jpg" alt="Cronin Designs" class="img" /></a> 
    				<h6>Date: June 2008 /  Work: Web Design  / Client: <strong>Cronin Designs</strong></h6> 
    		</div> 
    			
    		<div class="virtualpage hidepiece"> 
    				<a href="smurfitkappa.php"><img src="images/portfolio/homepage/skpack-472x224.png" alt="Smurfit Kappa, Ireland" class="img" /></a> 
    				<h6>Date: January 2008 / Work: Web Design / Client: <strong>Smurfit Kappa, Ireland</strong></h6> 
    		</div> 
    			
    	
     
    	<!-- Pagination DIV --> 
        <div id="gallerypaginate" class="paginationstyle"> 
         	<span class="flatview"></span> 
        </div> 
     
    	<!-- Initialize  --> 
    	<script type="text/javascript"> 
        
    		var gallery=new virtualpaginate({
    			piececlass: "virtualpage", //class of container for each piece of content
    			piececontainer: 'div', //container element type (ie: "div", "p" etc)
    			pieces_per_page: 1, //Pieces of content to show per page (1=1 piece, 2=2 pieces etc)
    			defaultpage: 0, //Default page selected (0=1st page, 1=2nd page etc). Persistence if enabled overrides this setting.
    			persist: false //Remember last viewed page and recall it when user returns within a browser session?
    		})
    		
    		gallery.buildpagination(["gallerypaginate", "gallerypaginate2"])
        
        </script> 
    	
    	
    	
    	
    	
    	</div> 
    
    	<div id="col2side" align="center"> <p>UPCOMING EVENTS</p> </div> 
    	
    </div> 
    
    <div id="footer"> <p>Viviana Santamarina - vivitus@gmail.com - 415-552-3078</p> </div> </div> 
    
    </body>
    
    <script type= "text/javascript">/*<![CDATA[*/
    $(function(){
     
    //Get our elements for faster access and set overlay width
    var div = $('div.sc_menu'),
    ul = $('ul.sc_menu'),
    ulPadding = 15;
     
    //Get menu width
    var divWidth = div.width();
     
    //Remove scrollbars
    div.css({overflow: 'hidden'});
     
    //Find last image container
    var lastLi = ul.find('li:last-child');
     
    //When user move mouse over menu
    div.mousemove(function(e){
    //As images are loaded ul width increases,
    //so we recalculate it each time
    var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
    var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
    div.scrollLeft(left);
    });
    });
    /*]]>*/</script> 
     
     
    <script> 
    		$(document).ready(function(){
    		    base_url = document.location.href.substring(0, document.location.href.indexOf('index.html'), 0);
    		    
    			$(".lightbox").lightbox({
    			    fitToScreen: true,
    			    imageClickClose: false
    		    });
    			
    			$(".lightbox-2").lightbox({
    			    fitToScreen: true
    	
     
    		    });
    			
    	
    		    
    		    
    		});
     
    	</script> 
    
    
    
     </html>

    Here is the code for Lightbox:
    Code:
    #lightbox{
    	position: absolute;
    	left: 0;
    	width: 100%;
    	z-index: 100;
    	text-align: center;
    	line-height: 0;
    	}
    
    #lightbox a img{ border: none; }
    
    #outerImageContainer{
    	position: relative;
    	background-color: #1d1d1d;
    	width: 250px;
    	height: 250px;
    	margin: 0 auto;
    	}
    
    #imageContainer{
    	padding: 10px;
    	}
    
    #loading{
    	position: absolute;
    	top: 40%;
    	left: 0%;
    	height: 25%;
    	width: 100%;
    	text-align: center;
    	line-height: 0;
    	}
    #hoverNav{
    	position: absolute;
    	top: 0;
    	left: 0;
    	height: 100%;
    	width: 100%;
    	z-index: 10;
    	}
    #imageContainer>#hoverNav{ left: 0;}
    #hoverNav a{ outline: none;}
    
    #prevLink, #nextLink{
    	width: 49%;
    	height: 100%;
    	background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
    	display: block;
    	}
    #prevLink { left: 0; float: left;}
    #nextLink { right: 0; float: right;}
    #prevLink:hover, #prevLink:visited:hover { background: url(../images/prev.gif) left 50% no-repeat; }
    #nextLink:hover, #nextLink:visited:hover { background: url(../images/next.gif) right 50% no-repeat; }
    
    /*** START : next / previous text links ***/
    #nextLinkText, #prevLinkText{
    color: #ff6600;
    font-weight:bold;
    text-decoration: none;
    }
    #nextLinkText{
    padding-left: 20px;
    }
    #prevLinkText{
    padding-right: 20px;
    }
    /*** END : next / previous text links ***/
    /*** START : added padding when navbar is on top ***/
    
    .ontop #imageData {
        padding-top: 5px;
    }
    
    /*** END : added padding when navbar is on top ***/
    
    #imageDataContainer{
    	font: 13px Arial Narrow, Helvetica, sans-serif;
    	background-color: #1d1d1d;
    	margin: 0 auto;
    	line-height: 1.4em;
    	color: #999;
    	letter-spacing: 2px;
    	}
    
    #imageData{
    	padding:0 10px;
    	}
    #imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
    #imageData #caption{ font-weight: bold;	}
    #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}
    #imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}
    #imageData #helpDisplay {clear: left; float: left; display: block; }
    
    #overlay{
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: 90;
    	width: 100%;
    	height: 500px;
    	background-color: #000;
    	filter:alpha(opacity=60);
    	-moz-opacity: 0.6;
    	opacity: 0.6;
    	display: none;
    	}
    	
    
    .clearfix:after {
    	content: "."; 
    	display: block; 
    	height: 0; 
    	clear: both; 
    	visibility: hidden;
    	}
    
    * html>body .clearfix {
    	display: inline-block; 
    	width: 100%;
    	}
    
    * html .clearfix {
    	/* Hides from IE-mac \*/
    	height: 1%;
    	/* End hide from IE-mac */
    	}	
    
    #lightboxIframe {
    	display: none;
    }

  • #2
    New Coder
    Join Date
    May 2011
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I ended up resolving this by using a different and simpler lightbox code from http://www.huddletogether.com/projec...tbox2/#example

    However, now I have a different issue where I need to combine two stylesheets (or at least make both of them work)... my other post about this is here if anyone can lend a hand: http://www.codingforums.com/showthread.php?t=226656

    Thanks!


  •  

    Posting Permissions

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