对不起，我在编码方面不是很有经验，而是在努力学习。
我正在使用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标签。我正在尝试研究，看看我是否能找到解决方案。
再次更新
此外，这是数据库中的信息。
表格是：gallery
表格中的列是：
id （数字1,2,3等）
图片（图片名称，不是完整的网址...示例：gallery_0cda5_image4.jpg）
视频（视频网址）
标题（例如：厨房）
输入（数字，这是上传器中的一个选择字段，从“类型”表中提取类型，其中1 =图像，2 =视频）
cat （数字，这是上传者中的一个选择字段，从“猫”表中拉出猫，其中1 =外观，2 =户外生活，3 =厨房等）< / p>
说明（在插孔箱中使用的说明）
我不确定，因为如果在上面的代码中正确设置了这里有三个不同的表格。
我认为查询设置不正确。
答案 0 :(得分：3)
你需要在数据库图像，文本和其他内容中分开，在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'”。
无论如何，请等待更有经验的用户发帖。
希望这有帮助。