我的应用程序将图像上传到文件夹中,并将其路径保存在 mysql 列中。我用以下方式显示这些图像..
$sql = "SELECT * FROM task_table ORDER by RAND()";
//ORDER BY id ASC
$query = mysql_query($sql);
while($row = mysql_fetch_array($query))
{
$file = $row['photo_name'];
$file1 = $row['task_id'];
$task_details=$row['task_details'];
echo '<div id="container">
<div id="thumbnail"><a href="uploads/'. $file .'" title="'.cleanString($file).'" class="thickbox">
<img src="thumbnails/thumb_'.$row['task_id'].'.jpeg" width="282" height="158" alt="image" /></a></div>
<div id="info"><strong>' .cleanString($file).'</strong></br>
<i>' .cleanString($task_details).'</i></div>
</div>';
}
这是使用“缩略图”作为项目选择器的 JavaScript
<script type="text/javascript" src="js/masonry.pkgd.min.js"></script>
<script>
//<![CDATA[$(window).load(function()
{
$(function(){
$('#container').masonry({
itemSelector: '.thumbnail'
});
});
});//]]>
</script>
画廊显示为通常的网格,但与砌体不同。我哪里做错了?如果我的帖子属于错误的类别或者我犯了一些发帖错误,请原谅我,因为这是我在 stackoverflow 上的第一篇帖子:-)
解决方案
<script>
//<![CDATA[
$(window).load(function(){
$(function(){
$('#container').masonry({
itemSelector: '.thickbox'
});
});
});//]]>
</script>
......和mysql查询
while($row = mysql_fetch_array($query))
{
$file = $row['photo_name'];
$file1 = $row['task_id'];
$task_details=$row['task_details'];
echo '<div id="container">
<div class="thumbnail"><div class="thickbox">
<img src="uploads/'. $file .'" alt="image"/></div>
<div id="info"><strong>' .cleanString($file).'</strong></br>
<i>' .cleanString($task_details).'</i></div>
</div>';
}
最佳答案
尝试使用类 thickbox
作为 div,并且 id 在 html 元素中应该是唯一的,更改 id"container",id="thumbnail" 也到类中,因为您正在循环遍历元素
$(function(){
$('#container').masonry({
itemSelector: '.thickbox'
});
关于jquery - Masonry 无法处理从 mysql 获取的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18892966/