Jump to content

Javascript Onclick To Set Php Variables

jcc5018

By jcc5018
in JavaScript

Recommended Posts

jcc5018 Newbie

jcc5018

Posted
Posted

Ok, So i am so very close to making a PHP based photo gallery that pulls data from a database and auto generates the various sections. I am having difficulty getting the final part to work though and I think I can do it with javascript to avoid more sql request, but I am having problems of course. Here's what I have so far, then I'll explain what I'm trying to do:This is the current result: http://jonsonlineportfolio.site40.net/Projects.php

<style type="text/css"><!--li {	color: #FFFFFF;	list-style-type: none;}--></style><link href="webdesign.css" rel="stylesheet" type="text/css" /><style type="text/css"><!--.style1 {color: #FFFFFF}--></style></head><body> <p>   <?php$link = mysql_connect() or die("Could not connect.");mysql_select_db();//include "bigview.php";	echo "<ul>";$query='Select *FROM project_typeORDER BY project_type.ID'; ?></p> <table width="100%" border="0" bgcolor="#333333">   <tr>     <td width="150px" height="100px" align="center" valign="middle" bgcolor="#333333"><?php echo "<h1 class=\"projTitle\">". $titleS."</h1>"; ?></td>     <td width="*" height="100" align="center" valign="middle" bgcolor="#333333"><div class="comments" ><?php echo $commentS; ?></div></td>     <td width="150px" height="500" rowspan="2" align="center" valign="top" bgcolor="#000000"><div class="thumbs" ><?php include "Thumbs.php";?>	</div>     </td>   </tr>   <tr>     <td  id="navigation" rowspan="2" align="left" valign="top" bgcolor="#000000"><?php$project_type = mysql_query($query);while($row= mysql_fetch_array($project_type)){ echo "<li class=\"main\">".$row['type'];$caption="<p>".$row['caption']."</p>";$short = $row['t_shortcut'];echo "<ul>";$queryProj="Select *FROM projectWHERE typeID= '$short'";$project = mysql_query($queryProj);while($row= mysql_fetch_array($project)){	echo "<li class=\"sub\"><a href=\"?project=".$row['title']."\">".$row['title']."</a></li>";}	echo "</ul></li>";	} echo "</ul>";		?></td>     <td height="400" align="center" valign="top" bgcolor="#999999"><?php echo $big[$j]; ?></td>   </tr>   <tr>     <td height="100" align="center" valign="top" bgcolor="#333333"><?php echo "<h2>".$titleP[$j]."</h2><p>".$captionP[$j]."</p>"; ?></td>     <td height="100" align="center" valign="top" bgcolor="#333333"> </td>   </tr></table><div align="center"><table width="75%" border="0" cellpadding="5">    <tr>   <td colspan="4" align="left" valign="top"><h3 align="center">Project Information  </h3></td>   </tr>    <td width="22%" align="left" valign="top"><h4>Title:</h4></td>    <td width="28%" align="left" valign="top"><span class="style1"><?php echo $titleS; ?></span></td>    <td width="22%" align="left" valign="top"><h4>Project Type:</h4></td>    <td width="28%" align="left" valign="top"><span class="style1"><?php echo $typeS; ?></span></td>  </tr>  <tr>    <td align="left" valign="top"><h4>Program Used:</h4></td>    <td align="left" valign="top"><span class="style1"><?php echo $progS; ?></span></td>    <td align="left" valign="top"><h4>Year Designed:</h4></td>    <td align="left" valign="top"><span class="style1"><?php echo $yearS; ?></span></td>  </tr>  <tr>    <td align="left" valign="top"><h4>Features:</h4></td>    <td align="left" valign="top"><span class="style1"><?php echo $featS; ?></span></td>    <td align="left" valign="top"><h4>Size:</h4></td>    <td align="left" valign="top"><span class="style1"><?php echo $sizeS; ?></span></td>  </tr>  <tr>    <td align="left" valign="top"><h4>Work Left to Do:</h4></td>    <td align="left" valign="top"><span class="style1"><?php echo $workS; ?></span></td>    <td align="left" valign="top"><h4>Skills Learned:</h4></td>    <td align="left" valign="top"><span class="style1"><?php echo $skillS; ?></span></td>  </tr></table></div> 	 <p>  </p></body>

Thumbs.php:

<script type="text/javascript" language="javascript">function bigimg(){<!--<?php$titleP[$j]=$row['title'];$captionP[$j]=$row['caption'];$big[$j]="<img src='/projects/Gallery/".$row['location']."'/>";?>// -->}</script><?php$projects=$_GET['project'];$queryProj="Select *FROM projectWHERE title= '$projects'";$project = mysql_query($queryProj);while($row= mysql_fetch_array($project)){$picid= $row['ID'];$titleS=$row['title'];$typeS=$row['project_Type'];$yearS=$row['yrDesigned'];$progS=$row['program_used']; $sizeS=$row['size'];$featS=$row['features'];$skillS=$row['skills_learned'];$workS=$row['work_left'];$commentS=$row['comment'];echo "<ul>";	$queryPic="Select *FROM pictureWHERE projNumber= '$picid'";$j=0;$pictures = mysql_query($queryPic);while($row= mysql_fetch_array($pictures)){ $j++;$thumbs="<a class='thumbs' href=\"\" onClick=\"function bigimg()\" ><img src='/projects/Gallery/".$row['location']."'width=\"125\" height=\"125\" /></a>";echo "<li>".$thumbs."</li>";	  } echo "</ul>";}	   ?>

Ok so I managed to set it up so that when someone clicks a project, it will set a variable in the url that can be retrieved from the thumbs.php file. When this variable is retrieved, it executes an SQL statement that assigns data to specific variables that get displayed at the bottom of the viewer. That is actually working fine. I also managed to get it to correctly display the set of Thumbnails in a scrolling div for each project. Now I am trying to go from the small thumbnails to a large image. I thought at first I would have it pass another variable, but i wasn't sure how to set the code so that it kept the current project variable list displayed, and then also add the specific picture to the end of it. I came close, but my method just ended up resetting the images loaded, so your scroll point would be lost every time in the images, plus it wasnt displaying the image in the center. So, I thought I would use javascripts onclick function to allow the images to be displayed in the middle when a thumbnail link was clicked, but Im not sure how to set that up correctly. My thought behind this is that all the captions and title and image location has already been found when the sql script ran the first time, displaying the thumbnails. So I created a function in the beginning of the thumbs php file that would store the 3 variables to be displayed on the main file. Then when an image is clicked , the onclick function will load, telling the server to go ahead and use those variables. But i'm probably missing something in my code, so I could use some help. Eventually once I get the whole thing working, I plan on doing some CSS work to make the projects hidden until the category is clicked. And there will probably be some additional javascript stuff I'd have to include to make certain things happen, but right now, i just want to get this working. So as always, if someone can help me, I'll be extremely happy cause I've been trying to figure out a good way to display my projects for the longest time now. Thanks

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

Like many people, you haven't learnt how PHP is processed.PHP is processed before all the rest of the page, it is done only once and it is done on the server.The server sends the output of the processed PHP to your browser, and the browser interprets the Javascript.This is the Javascript that your browser is going to attempt to interpret:

<script type="text/javascript" language="javascript">function bigimg(){<!--// -->}</script>

If you want to know how to work with PHP and Javascript at the same time, look at the W3Schools AJAX tutorial.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...