抱歉，我在编码方面没有太多经验，但正在努力学习。
我正在将 Isotope 插件用于图像库，我想将其连接到 mysql 数据库，而不是对每个图像、标题、类别和描述进行硬编码。有人可以帮我开始吗？
这是我正在尝试使用的画廊的一个例子。它都是硬编码的，我想将它转换为数据库驱动的。
http://www.wiseguys-themes.com/wiseguys/creative/portfolio-filter-4columns.html
这是硬编码的样子……只显示一个项目。
HTML
<!-- Isotope filters
================================================== -->
<section class="isotopeFilters clearfix">
<ul class="option-set clearfix" data-option-key="filter">
<li><a href="#" data-filter=".outdoor">Outdoor Living</a></li>
<li><a href="#" data-filter=".bathrooms">Bathrooms</a></li>
<li><a href="#" data-filter=".master">Master Suites</a></li>
<li><a href="#" data-filter=".kitchen">Kitchens</a></li>
<li><a href="#" data-filter=".dining">Dining Rooms</a></li>
<li><a href="#" data-filter=".office">Office</a></li>
<li><a href="#" data-filter=".great">Great Rooms</a></li>
<li><a href="#" data-filter=".bonus">Bonus Room/Man Cave</a></li>
<li><a href="#" data-filter="*">All</a></li>
</ul>
<!-- Responsive Filters
================================================== -->
<form action="#" method="post" class="hidden">
<select>
<option value="">Categories</option>
</select>
</form>
</section>
<!-- Isotope container
================================================== -->
<section class="isotopeContainer portfolio left-twenty">
<div class="element onefourth kitchen">
<div class="portfolioImage">
<a class="jackbox" data-group="work1" data-thumbTooltip = "Image Title" data-title="Image Title with <a href='http://themeforest.net/user/wiseguys' target=_blank'>link</a>" data-description="#description_1" href="images/portfolio/1.jpg">
<div class="jackbox-hover jackbox-hover-blur jackbox-hover-magnify"></div>
<img width="225" height="170" src="images/portfolio/thumbs4/1.png" alt="" />
<span class="portfolioImageOver transparent"></span>
</a>
</div>
<div class="portfolioText" data-targetURL="portfolio-single.html">
<span class="portfolioTextOver transparent"></span>
<p>Single image example</p>
<span>- illustration -</span>
</div>
<span class="portfolioArrow"></span>
<!-- Sample div used as an item's description, will only appear inside JackBox -->
<div class="jackbox-description" id="description_1">
<h3>Description Title One</h3>
<a href="#">Link</a> ipsum dolor sit amet, consectetur adipiscing elit. In est metus, tincidunt vitae eleifend sit amet, porta a sapien. Fusce in dolor nec purus facilisis dictum. tincidunt sed quam.
</div>
</div>
</section><!-- end isotope container -->
这是我的PHP。当然，我已经在我的实际文件中替换了 db_username 和 db_password。
PHP
<?
$con = mysql_connect("localhost", "db_username", "db_password");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("gallery", $con);
$sql="SELECT * FROM entry WHERE status = 'registered'";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result)) {
//Category ids
$cat = $row['id'] ;
print "<p >" . $row['cat'] . "</p>";
print "<p >" . $row['image'] . "</p>";
print "<p class='title'>" . $row['title'] . "</p>";
print "<p class='description'> Description: " . $row['description'] . "</p>";
print "</div>";
}
mysql_close($con);
?>
我可以连接到数据库，但不确定要获取所有画廊图像以显示在四列中的代码应该是什么，并且仍然可以过滤。
更新
我已经尝试了 Carlos 提供的代码，但没有让它按需要工作。我对代码进行了一些编辑以匹配我所拥有的。它连接到数据库，但我认为输出 HTML 存在问题。这是我所拥有的...
<section class="isotopeContainer portfolio left-twenty">
<?PHP
//connect in db
$mysqli = new mysqli('localhost', 'db user', 'my db password', 'db name');
//check for error
if ($mysqli->connect_error) {
die('Connect Error (' . $mysqli->connect_errno . ') '. $mysqli->connect_error);
}
//mount query
$query = 'SELECT * FROM gallery WHERE type=\'image\'';
//declare var array
$array = array();
//use query and make associative array.
if($result = $mysqli->query($query)){
//fetch associative array
while ($row = $result->fetch_assoc()){
$array[] = $row;
}
}
/*use associative array and make html*/
//count array
$count = count($array);
//declare container var for html code
$html = '';
//note: but I think it's impossible to put link on titles. I think, in this case you need to use fancybox and put link in description
for($i=0; $i<$count; $i++){
$html .= '<div class="element onefourth illustration">'.
'<div class="portfolioImage">'.
'<a class="jackbox" data-group="'.$array[i]["cat"].'" data-thumbTooltip = "'.$array[i]["title"].'" data-title="'.$array[i]["title"].'" href="http://holmesbydesign.com/test/galleryimages/'.$array[i]["url"].'>'.
'<div class="jackbox-hover jackbox-hover-blur jackbox-hover-magnify"></div>'.
'<img width="225" height="170" src="http://holmesbydesign.com/test/galleryimages/'.$array[i]["image"].'" alt="" />'.
'<span class="portfolioImageOver transparent"></span>'.
'</a>'.
'</div>'.
'<div class="portfolioText" data-targetURL="portfolio-single.html">'.
'<span class="portfolioTextOver transparent"></span>'.
'<p>'.$array[i]["description"].'</p>'.
'<span>- '.$array[i]["title"].' -</span>'.
'</div>'.
'<span class="portfolioArrow"></span>'.
'</div>' ;
}
//and finally display html code
echo $html;
?>
</section><!-- end isotope container -->
你可以在这里看到代码：http: //holmesbydesign.com/test/portfolio2.php
这是我想要的样子：http ://holmesbydesign.com/test/portfolio.php
输出未正确放置结束 div 标记。我正在尝试研究，看看我是否能找到解决方案。
再次更新
另外，这里是关于数据库的信息。
表是：画廊
表中的列是：
id（数字 1、2、3 等）
图片（图片名称，不完整的 URL……例如：gallery_0cda5_image4.jpg）
视频（视频的网址）
标题（例如：厨房）
类型（数字，这是上传程序中的一个选择字段，并从“类型”表中提取类型，其中 1 = 图像，2 = 视频）
猫（数字，这是上传程序中的一个选择字段，并从“猫”表中拉出猫，其中 1 = 外部，2 = 户外生活，3 = 厨房等）
描述（在插孔中使用的描述）
我不确定，因为如果在上面的代码中正确设置，这里使用了三个不同的表。
我认为查询设置不正确。