抱歉，我在编码方面经验不足，但正在努力学习。
我正在为图片库使用 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 等)
image(图片名称，不完整的 URL...例如:gallery_0cda5_image4.jpg)
视频(视频网址)
标题(例如:厨房)
类型(数字，这是 uploader 中的一个选择字段，从“类型”表中提取类型，其中 1 = 图像，2 = 视频)
cat(数字，这是 uploader 中的一个选择字段，从“cat”表中拉出猫，其中 1 = Exterior，2 = Outdoor Living，3 = Kitchens，等等)
描述(在 socket 箱中使用的描述)
我不确定，因为如果在上面的代码中设置正确，这里会使用三个不同的表。
我认为查询设置不正确。
最佳答案
您需要在数据库中将图像、文本和其他内容分开，而在 php 中，您需要从数据库中调用并使用带有数据库数据的 html 代码装载到变量中。
类似于:
//connect in db
$mysqli = new mysqli('localhost', 'my_user', 'my_password', 'my_db');
//check for error
if ($mysqli->connect_error) {
die('Connect Error (' . $mysqli->connect_errno . ') '. $mysqli->connect_error);
}
//mount query
$query = 'SELECT * FROM gallery WHERE type=\'images\'';
//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="portfolioImage">'.
'<a class="jackbox" data-group="work1" data-thumbTooltip = "'.$array[i]["title"].'" data-title="'.$array[i]["title"].'" data-description="#description_1" href="'.$array[i]["url"].'>'.
'<div class="jackbox-hover jackbox-hover-blur jackbox-hover-magnify"></div>'.
'<img width="225" height="170" src="'.$array[i]["thumb_url"].'" alt="" />'.
'<span class="portfolioImageOver transparent"></span>'.
'</a>'.
'</div>';
}
//and finally display html code
echo $html;
对于您的案例中的许多选项，您可以发挥作用。
在您的同位素中，您可以使用“sortBy : 'random'”来随机化项目。
无论如何，等待更有经验的用户发帖。
希望这对您有所帮助。
关于php - 来自数据库的同位素过滤库，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16220344/