Search the Community
Showing results for tags 'lightbox'.
Found 3 results
-
Hello everyone! I'll get straight to the point. I have built a portfolio gallery for a client that uses a javascript/jquery to arrange my thumbnails on a single page. It includes a "filter" function that allows me to narrow down what is displayed on the page based on certain keywords associated with the content. I have an upload script which allows me to add data through a form to my MySQL database. The image name is saved to the database and the image is uploaded to a particular folder on my server. I then pull that information into my portfolio page and loop through all the "rows" in the database which creates my page full of thumbnails. When a user clicks on any given thumbnail, a lightbox is shown which shows a larger image or embedded video, along with the title and description of the project. Everything works great. I would like to go one step further and add a feature to click to the "next" and "previous" item in the portfolio from within the lightbox without having to close the lightbox and click another thumbnail. Make sense? I am a beginner with php but am learning my way around it. Javascript is still a foreign language so I would like to accomplish this in PHP if possible. Thank you for any help you can offer to get me in the right direction. <?php include('includes/connection.php'); $tbl_name="portfolio_pg"; ?> <nav id="filter"></nav> <section id="main"> <ul id="grid"> <?php $data = mysql_query("SELECT * FROM portfolio_pg") or die(mysql_error()); while($info = mysql_fetch_array( $data )) { ?> <li data-tags="<?php echo $info['Filters']; ?>"> <a href="javascript:void();" onclick="document.getElementById('underlay').style.display='block'; document.getElementById('<?php echo $info['pg_id']; ?>').style.display='block';"><?php echo "<img src=images/portfolio/thumbs/".$info['photo'] ." width=\"164\" height=\"164\">"; ?></a> <div id="underlay"></div> <div class="lightbox" id="<?php echo $info['pg_id']; ?>"> <div id="closer"><a href="javascript:void();" onclick="document.getElementById('underlay').style.display='none'; document.getElementById('<?php echo $info['pg_id']; ?>').style.display='none';">close</a></div> <?php if($info['Project_Link']!="") { echo "<div class=\"vidHolder\"> ".$info['Project_Link']." </div>"; } else { echo "<div class=\"picHolder\"><img src=\"images/portfolio/".$info['photo_2'] ."\" width=\"100%\" height=\"100%\"></div>"; } ?> <div class="projectHead"><?php echo $info['Page_Heading_1']; ?></div> <div class="projectBod"><?php echo $info['Paragraph_1']; ?></div> </div><!-- Close Lightbox Viewer --> </li> <?php // close while loop } ?> </ul> </section> you can see it in action by going following HERE Thanks for any help -
Hello everyone, I have this idea for a website that I can't seem to solve. I created an intro page where there's a username and a password to type and two buttons, a login button and a register button. What I wanted to do is when the login button is pressed it compares the username and the password with database entries, if they're available, it would redirect the client to homepage. If not, the lightbox would appear for registration. The code to my intro page is: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title> RYNC - Rent Your Car Now</title> <style type="text/css"> @import "Dialog/DescriptionDialog.css"; @import "Dialog/styles.css"; </style> <style> body { background: url(../Images/Bgcolor.jpg); background-size: 100%; background-position: top center; background-repeat: no-repeat; } </style> </script> <script type="text/javascript" src="JQuery.js"></script> <script type="text/javascript" src="Dialog/jquery.lightbox_me.js"></script> <?php function ShowLogin(){ $f_usr = $_POST["username"]; $f_pswd = $_POST["password"]; $con=mysql_connect("localhost","root",""); if(! $con){ die('Connection Failed'.mysql_error()); } mysql_select_db("projet",$con); $result = mysql_query("SELECT * FROM client WHERE username= '" .$f_usr. "' AND password= '" .$f_pswd. "' "); $numrows=mysql_num_rows($result); if ($numrows != 0){ header("Location: Homepage.php");} else{ ShowRegistration();} } ?> <script type="text/javascript"> function ShowRegistration(){ .get("Registration.php", function(data){ $("#descDialog").empty(); $("#descDialog").append(data); $("#descDialog").lightbox_me({ centered:true }); }) } </script> </head> <body> <form name="frm" action="Registration.php" method="post"> <center> <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="640" HEIGHT="480" id="RYNC" ALIGN=""> <PARAM NAME=movie VALUE="RYNC.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="../Flash/RYNC.swf" quality=high bgcolor=#FFFFFF WIDTH="640" HEIGHT="480" NAME="RYNC" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> </OBJECT> <br> Username <input type="text" value="" name="username"> <br> Password <input type="password" value="" name="password"> <br> </form> <input type="button" value="Log In" name="Login" onclick="<? ShowLogin(); ?>"> <input type="button" value="Register now" name="Register" onclick="ShowRegistration();"> <div id="descDialog"></div> </body> </html> Thanks in advance Regards, Chris
-
Hi I would like to get to get the click on large image to be in a light box instead of opening in a new window. Any help would be appreciated. The closest I've got to something similar I'm trying to achieve is pikachoose jquery gallery. Please click here to see how the current image gallery functions. As you can see, upon clicking on the larger image it opens up in a new window. Below are a couple of websites I've found that replicate what I'm trying to achieve. http://www.necdisplay.com/p/large--screen-displays/e322?type=support - The right/left arrows and close button is an important feature on the lightbox http://www.realestate.com.au/property-house-nsw-chatswood-110664113 - The right/left arrows and close button is an important feature on the light box Help will be much appreciated. Thanks!
