同位素砌体布局和引导灯箱的问题
我正在尝试使用同位素的砌体（gutter version）来显示一组缩略图，然后使用bootstrap lightbox plugin将所述缩略图打开到更大的尺寸。
使用一些PHP从我的flickr xml feed中提取图像，从xml中获取图像src，然后在我的页面上显示它们。
这是在PHP从我的flickr xml feed中收集图像并将它们构建到同位素和lightbox html之前，这个页面的正文html：
<body id="photos">
<?php include('../parts/navigation.php'); ?>
<!-- page content start -->
<div class="container">
<?php
$url = "https://www.flickr.com/services/feeds/photos_public.gne?id=40753822@N00&lang=en-us&format=rss_200";
$xml = simplexml_load_file($url);
$i = 0;
echo "<div class=\"isotope js-isotope\" data-isotope-options='{ \"itemSelector\": \".item\" , \"masonry\": { \"columnWidth\": 100, \"gutter\": 14 } }'>";
foreach( $xml->xpath('//media:thumbnail') as $image)
{
$attributes = $image->attributes();
$attr = $attributes['url'];
$nAttr = str_replace("_s.jpg", "_n.jpg", $attr);
$bAttr = str_replace("_s.jpg", "_b.jpg", $attr);
echo "<div class=\"item\">
<a href=\"#lightbox" . $i . "\" data-toggle=\"lightbox\">
<img class=\"gallery\" src=\"" . $nAttr . "\">
</a>
</div>";
$i++;
}
echo "</div>";
$i = 0;
foreach( $xml->xpath('//media:thumbnail') as $image)
{
$attributes = $image->attributes();
$attr = $attributes['url'];
$bAttr = str_replace("_s.jpg", "_b.jpg", $attr);
echo "<div id=\"lightbox" . $i . "\" class=\"lightbox fade\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">
<div class=\"lightbox-dialogue\">
<div class=\"lightbox-header\">
<button type=\"button\" class=\"close\" data-dismiss=\"lightbox\" aria-hidden=\"true\">×</button>
</div>
<div class=\"lightbox-content\">
<img src=\"" . $bAttr . "\">
</div>
</div>
</div>";
$i++;
}
?>
<!-- page content end -->
<?php include('../parts/footer.php'); ?>
</body>
以下是此页面在呈现后从浏览器中获取的“查看源代码”。
PHP foreach创建的缩略图和灯箱比下面显示的更多;为了简洁起见，我刚刚在XML feed中显示了前5个结果。
<html>
<head>
<!-- meta -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- title -->
<title>My Title</title>
<!-- jq / js -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/activeclass.js"></script>
<script type="text/javascript" src="/js/isotope.pkgd.min.js"></script>
<script type="text/javascript" src="/js/isotope-centered-masonry.js"></script>
<script type="text/javascript" src="/js/bootstrap-lightbox.js"></script>
<!-- css -->
<link rel="stylesheet" type="text/css" href="/css/bootstrap.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/css/parts.css">
<link rel="stylesheet" type="text/css" href="/css/photo-gallery.css">
<link rel="stylesheet" type="text/css" href="/css/bootstrap-lightbox.min.css">
</head>
<body id="photos">
<header>
<!-- navigation -->
<div class="navspacer">
</div>
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img class="ManeEventLogo" src="#"></a>
</div>
<div class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="/index.php">THING 1</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">THING 2<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">DROP 1</a></li>
<li><a href="#">DROP 2</a></li>
<li><a href="#">DROP 3</a></li>
<li><a href="#">DROP 4</a></li>
</ul>
</li>
<li>
<a href="#">THING 3</a>
</li>
<li>
<a href="#">THING 4</a>
</li>
<li>
<a href="#">THING 5</a>
</li>
</ul>
</div>
</div>
</div>
</header>
<!-- page content start -->
<div class="container">
<div class="isotope js-isotope" data-isotope-options='{ "itemSelector": ".item" , "masonry": { "columnWidth": 100, "gutter": 14 } }'>
<div class="item">
<a href="#lightbox0" data-toggle="lightbox">
<img class="gallery" src="https://farm8.staticflickr.com/7275/7535360724_02f36c5af4_n.jpg">
</a>
</div>
<div class="item">
<a href="#lightbox1" data-toggle="lightbox">
<img class="gallery" src="https://farm7.staticflickr.com/6191/6074713333_0a8d9bbd2d_n.jpg">
</a>
</div>
<div class="item">
<a href="#lightbox2" data-toggle="lightbox">
<img class="gallery" src="https://farm7.staticflickr.com/6064/6074711757_c36f4774f2_n.jpg">
</a>
</div>
<div class="item">
<a href="#lightbox3" data-toggle="lightbox">
<img class="gallery" src="https://farm7.staticflickr.com/6186/6075250192_f6db319da2_n.jpg">
</a>
</div>
<div class="item">
<a href="#lightbox4" data-toggle="lightbox">
<img class="gallery" src="https://farm7.staticflickr.com/6076/6074708467_fcc99c2584_n.jpg">
</a>
</div>
<div id="lightbox0" class="lightbox fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="lightbox-dialogue">
<div class="lightbox-header">
<button type="button" class="close" data-dismiss="lightbox" aria-hidden="true">×</button>
</div>
<div class="lightbox-content">
<img src="https://farm8.staticflickr.com/7275/7535360724_02f36c5af4_b.jpg">
</div>
</div>
</div>
<div id="lightbox1" class="lightbox fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="lightbox-dialogue">
<div class="lightbox-header">
<button type="button" class="close" data-dismiss="lightbox" aria-hidden="true">×</button>
</div>
<div class="lightbox-content">
<img src="https://farm7.staticflickr.com/6191/6074713333_0a8d9bbd2d_b.jpg">
</div>
</div>
</div>
<div id="lightbox2" class="lightbox fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="lightbox-dialogue">
<div class="lightbox-header">
<button type="button" class="close" data-dismiss="lightbox" aria-hidden="true">×</button>
</div>
<div class="lightbox-content">
<img src="https://farm7.staticflickr.com/6064/6074711757_c36f4774f2_b.jpg">
</div>
</div>
</div>
<div id="lightbox3" class="lightbox fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="lightbox-dialogue">
<div class="lightbox-header">
<button type="button" class="close" data-dismiss="lightbox" aria-hidden="true">×</button>
</div>
<div class="lightbox-content">
<img src="https://farm7.staticflickr.com/6186/6075250192_f6db319da2_b.jpg">
</div>
</div>
</div>
<div id="lightbox4" class="lightbox fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="lightbox-dialogue">
<div class="lightbox-header">
<button type="button" class="close" data-dismiss="lightbox" aria-hidden="true">×</button>
</div>
<div class="lightbox-content">
<img src="https://farm7.staticflickr.com/6076/6074708467_fcc99c2584_b.jpg">
</div>
</div>
</div>
<!-- page content end -->
<footer>
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container img-center">
<!-- left-side bottom navbar items -->
<ul class="nav navbar-nav navbar-left">
<li>
<p id="Telephone"><span id="old-tele">g</span> 01225 712211</p>
</li>
</ul>
<!-- right-side bottom navbar items -->
<div class="img-center">
<ul class="nav navbar-nav navbar-right img-inline">
<li>
<a href="#" target="_blank" title=""><img src="\img\icons\twitter\Twitter_logo_blue.png" class="tw-logo"></a>
</li>
<li>
<a href="#" target="_blank" title=""><img src="\img\icons\instagram\instagram-logo.png" class="ig-logo"></a>
</li>
<li>
<a href="#" target="_blank"><img src="\img\icons\facebook\fb-findus\FB_FindUsOnFacebook-320.png" class="fb-logo"></a>
</li>
</ul>
</div>
</div>
</nav>
</footer>
</body>
</html>
一般问题..不确定是什么导致它;
- 当页面加载时，在图库下方创建了大量空白空间（如加载，超过图库本身的高度）。
- 首先，当页面最初加载或刷新时，砌体布局如下所示：
- 当点击缩略图在灯箱中打开较大的图像时，我发现图像从模式框的右侧和底部滑出（每次大约相同的数量）：
- （这可能与上述有关）。当点击缩略图以较小的窗口大小打开较大的图像时，例如智能手机，图像会打开全尺寸（我绘制的红色框显示模式应该有多大，因此图像应该适合的位置：
- 关闭在灯箱中打开的图像时，要点击的区域会缩小到缩略图上的一个小的随机区域（！）例如，下面的红色框表示您想要打开该缩略图的可点击区域的位置它再次出现在灯箱中：
Isotope的砌体布局问题：
...由于某种原因，缩略图全部堆叠在一起。
如果窗口调整大小，它会自行排序：
如何在页面加载时让砌体布局自行排序？我尝试过解决方案here和here，但无济于事。
Bootstrap Lightbox的问题：
每个图片的打开方式都与此fiddle非常相似。我已经比较了PHP为每个缩略图和灯箱组合吐出的代码，并且无法理解为什么会发生以下问题：
1 个答案:
答案 0 :(得分：0)
图像堆叠问题可能是由于动态照片加载造成的。从Isotope appendix：＆＃34;卸载的图像可以甩掉同位素布局并导致项目元素重叠。 imagesLoaded解决了这个问题。 imagesLoaded通过在加载所有子图像后触发回调来工作。＆＃34;
要解决此问题，请使用imagesLoaded script和此类初始化：
// initialize Isotope after all images have loaded
var $container = $('#container').imagesLoaded( function() {
$container.isotope({
// options
});
});
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？