html - 同位素砌体布局和 Bootstrap 灯箱的问题

标签 html css twitter-bootstrap jquery-isotope bootstrap-lightbox

我正在尝试使用同位素砌体 ( gutter version ) 显示一组缩略图，然后显示 bootstrap lightbox plugin将所述缩略图打开为更大尺寸。

图像是从我的 flickr xml 提要中提取的，使用一些 PHP 从 xml 中获取图像 src，然后将它们显示在我的页面上。

在 PHP 从我的 flickr xml 提要中收集图像并将它们构建到同位素和灯箱 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\">&times;</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 提要的前 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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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>

一般问题.. 不确定是什么原因造成的；

  1. 当页面加载时，图库下方会创建大量空白空间(类似于加载，远远超过图库本身的高度)。

Isotope 的砌体布局问题:

  1. 首先，当页面最初加载或刷新时，砌体布局如下所示:

enter image description here

...由于某种原因，缩略图全部堆叠在一起。

如果调整窗口大小，它会自行解决，但是:

enter image description here

如何让砌体布局在页面加载时自行排序？我试过解决方案 here和 here ，但无济于事。

Bootstrap 灯箱问题:

每张图片都应该像这样打开 fiddle .我已经比较了 PHP 为每个缩略图和灯箱组合吐出的代码，但看不出为什么会出现以下问题:

  1. 当单击缩略图以在灯箱中打开较大的图像时，我发现图像从模态框的右侧和底部滑出(每次滑出的量大致相同):

enter image description here

  1. (这可能与上述有关)。当单击缩略图以在较小的窗口尺寸(例如智能手机)中打开较大的图像时，图像会以完整尺寸打开(我绘制的红色框显示模态应该有多大，因此图像应该适合的位置:

enter image description here

  1. 当关闭在灯箱中打开的图像时，点击区域会缩小到缩略图上的一个随机小区域(!)例如，下面的红色框显示了您想要打开的缩略图的可点击区域的位置再次在灯箱中:

enter image description here

最佳答案

图像堆叠问题可能是由于动态照片加载造成的。来自 Isotope appendix :“卸载的图像可能会影响同位素布局并导致元素元素重叠。imagesLoaded 解决了这个问题。imagesLoaded 通过在加载所有子图像后触发回调来工作。”

为了解决这个问题，请使用 imagesLoaded script这种类型的初始化:

// initialize Isotope after all images have loaded
var $container = $('#container').imagesLoaded( function() {
  $container.isotope({
    // options
  });
});

关于html - 同位素砌体布局和 Bootstrap 灯箱的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29435861/

上一篇：css - 在 font-face 的情况下关闭分词

下一篇：jquery - 如何在html5中的标题上添加悬停效果？

相关文章：

html - HTML 表单中的布局问题

html - 如何使带有固定标题的表格可滚动？

html - Angular 2 : restart the html audio tag on real time

css - 放置在标签内时显示 pdf 图标的图像标签

css - 如何在同一行上排列图像

php - 将自定义 css 添加到生成的 CSS 文件中

css - 为什么在这种情况下需要 z-index？

javascript - 如果文本字符串长度在 php while 循环中超过 3 个字符，则隐藏父 div

jquery - 如何使用 CSS 设置 JQuery FlexSlider 高度？

html - 如何使用 Bootstrap 将模式带到页面的前面？

©2024 IT工具网  联系我们