Question

我正在为我正在构建的WordPress网站中的某些幻灯片动态获取目录中的图像。有时它们出现在页面上，有时它们不出现。

看看这个我确定我需要某种预加载器来在循环插件执行它之前将我的图像初始化到DOM中，但我只是不知道在哪里窃取相关代码。我的代码如下：

<?php
        function show_gallery($path){
            if($path == ""){
                return;
            }
            // Fix the path to be usable
            $path = "wp-content/themes/mytheme" . "$path";

            // Ignore files/paths that aren't usable
            $img_list = array_diff(scandir($path), array('.', '..', '.DS_Store'));
            $imgcount = count($img_list);
            if($imgcount > 1){
                echo "<div id=\"overlay-prev\"><img src='/wp-content/themes/grisedale/assets/gallery/prev.png' class='prev'></div>";
                echo "<div id=\"overlay-next\"><img src='/wp-content/themes/grisedale/assets/gallery/next.png' class='next'></div>";
            } else {
                echo "";
            }
            echo "<div id=\"current-image\">";
            // Spit out the images to be controlled by cycle
            foreach ($img_list as $img){
                echo "<img class='gallery-images' src='../../../$path$img'>\n";
            }
            echo "</div>";
        }
    ?>
    <script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $('#current-image').cycle({
            fx: 'fade',
            speed:  'fast', 
            timeout: 0,
            prev:    '#overlay-prev',
            next:    '#overlay-next', 
            containerResize: true
        });
    });
    </script>

老实说，这些图片都很小，如果有某种理智测试，我可以使用PHP，这可能就足够了。在任何情况下，我只需要将图像可预测地加载到任何具有图库的页面中，而无需进行三次或四次重新加载来查看它们。欢呼声。

Answer 1

<强>更新

因此，使用jQuery循环插件的技巧是为图像设置特定的宽度和高度。我设置了一个宽度，显然对于大多数浏览器来说还不够。我也设置了最小高度，现在一切都按预期工作。

使用jQuery Cycle的DOM怪异

1 个答案: