Jump to content

image grid gone wrong

Recommended Posts

I'm having trouble with getting the image in the right order. I'm trying to filter images gotten from the database based on the button link. I got the reference from http://www.evoluted.net/thinktank/web-development/jquery-filtering. I have about 20+- buttons and for each button, I am getting all the picture that is being under that filter button through database. (Not sure where to post this, but I think it's more suited to be under css). Basically, I have gotten the css all wrong (my css is basic too ><), so I hope you could help me(where i have gone wrong) and give some pointers.

Here is css:

/*- FILTER OPTIONS -*/ul#filterOptions {	width: auto;	height: auto;	margin-top: 60px ;	;	overflow: hidden;	list-style: none;}ul#filterOptions li {	height: 52px;	margin-right: 2px;	float: left;}ul#filterOptions li a {	height: 50px;	padding: 0 20px;	border: 1px solid #999;	background: #cfcfcf;	color: #fff;	font-weight: bold;	line-height: 50px;	text-decoration: none;	display: block;	list-style: none;}ul#filterOptions li a:hover {	background: #c9c9c9;	list-style: none;}ul#filterOptions li.active a {	background: #999;	list-style: none;}/*- -*//*- OUR DATA HOLDER -*/#filterBody {	width: 100%;	height: 100%;	overflow: hidden;	list-style: none;}#filterBody div.item {	width: 200px;	height: 200px;	float: left;	text-align: center;}#filterBody div.item h3 {	margin-top: 10px;	font-size: 16px;	line-height: 20px;}/*- -*/

My html/php code looks like this (example of 1 button):

<!----------------- The filter buttons will be these-------------------------->    <ul id="filterOptions">      <li class="active"><a href="#" class="all">All</a></li>      <li><a href="#" class="IS_1">C#</a></li>      <li><a href="#" class="IS_2">PHP/MySQL</a></li>      <li><a href="#" class="IS_3">HTML/CSS</a></li>      <li><a href="#" class="IS_4">Java Enterprise Development</a></li>      <li><a href="#" class="IS_5">Mobile Application Development</a></li>      <li><a href="#" class="IM_1">Web Design</a></li>      <li><a href="#" class="IM_2">3D Modelling & Animations</a></li>      <li><a href="#" class="IM_3">Graphic Design</a></li>      <li><a href="#" class="IM_4">Video Editing</a></li>      <li><a href="#" class="IM_5">Motion Graphics & Effects</a></li>      <li><a href="#" class="CNET_1">Network Security</a></li>      <li><a href="#" class="CNET_2">RB Network Design & Implementation</a></li>      <li><a href="#" class="CNET_3">Broadband Access & WAN</a></li>      <li><a href="#" class="CNET_4">ICT Infrastructure Management</a></li>      <li><a href="#" class="CNET_5">Technopreneurship Project</a></li>      <li><a href="#" class="ITSM_1">Virtualisation & Cloud Computing</a></li>      <li><a href="#" class="ITSM_2">IT Service Operation & Management</a></li>      <li><a href="#" class="ITSM_3">Server Administration & Security</a></li>      <li><a href="#" class="ITSM_4">Database Administration & Management</a></li>      <li><a href="#" class="ITSM_5">Internet of Things App Development</a></li>      <!--<li><a href="#" class=""><?php  ?></a></li>-->    </ul><!--------------Filtered contents to be through the button--------------------><div id="filterBody">    <!----Filter contecnt of C#------>      <div class="item IS_1">      <p> Hello everybody!</p><?php  try{  //connect to the database  require("Connections/database.php");  		// array to hold errors        $errors = array(); 		 if(empty($errors)){          //select portfolio picture from database        $query = "SELECT p.*, u.skillset FROM portfolio p INNER JOIN userProfile u ON p.user_id = u.user_id WHERE u.skillset LIKE '%C#%' ";		//var_dump($query);        $stmt = $database->query($query);		  foreach ($stmt as $row) {			  //print out the data				  ?>               <div id= "imagesPortfolio">              <img src="<?php print htmlspecialchars($row['imagePath']); ?>" width="100" height="100">	               </div>             <?php			  //print $row['imageName'] . "t";			  //print $row['Name'] . "t";			//foreach($row['picPath'] as $picURL) {			//$picURL = $row['picPath'];			//'<img src="'. $dir. '/'. $file. '" alt="'. $file. $			//}			 // print '<img src="'. $picPath. '/'. $file. '" alt="'. $file;			  //print $row['introduction'] . "n";		  }		 }  foreach($errors as $error)    {        printf("<li>%s</li>", $error);		//exit();    }  } //end of try block     catch(PDOException $e){ // end of database dependent code, handle any errors    $status = empty($query) ? 'Connection failed':" Query failed: $query";    // application message    trigger_error("$status, Error: {$e->getMessage()}, File: {$e->getFile()}, Line: {$e->getLine()}");    // user message    $errors[] = 'Sorry, this page is not working at this time.';}?>        <!---The like system implementation----><!--        <div class="like-btn">Like</div>        <div class="dislike-btn"></div>-->      </div><!------Other buttons same as this buttons, only filter name different--------></div>

Is my concept wrong? >< I think i have misinterpreted somewhere, I just can't point out whether it's the css, the php or both ;-; I need to put 6 images in a row, and I'm not sure how to do this in the foreach loop too ><


Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...