Question

我有这个页面显示div中的图片。我有jquery循环以幻灯片形式显示这些图像。我想让幻灯片显示为手动，并有一个幻灯片导航div显示在图像的顶部以进行导航。问题是，无论我在哪里粘贴“幻灯片”div，它都会检索我页面上每个图像结果的链接（而不仅仅是页面上的每个结果）。为了更好地参考，请访问this link。如果检查元素，您将看到div class =“slides”采用整个数组中的每个图像并设置链接。（我意识到我现在拥有div的位置使得整个阵列中的每个图像都占用了）。我已经尝试将这个设置在PHP代码之上，就在foreach之下，在foreach内部，甚至完全在'thumbs'div之外（这是它应该驻留的地方），结果没有变化。更糟糕的是，我有一个z-index问题导致我的导航显示在所有图像下方，即使z-index设置正确。因此，为了查看我的结果，我必须在Chrome中“检查元素”或关闭图像以查看正在发生的事情。任何人都有线索？

<?php 
                      $p=array($condo['Unit']['photo1'],$condo['Unit']['photo2'],$condo['Unit']['photo3'],$condo['Unit']['photo4']);
         echo '<div class="slides"></div>';          
                      if($condo['Unit']['photo1']!=''){


                            foreach($p as $value) {
                                echo '<a href="/complexes/';
                                echo $condo['Complex']['complex_name'];
                                echo '/';
                                echo $condo['Unit']['unitnum'];
                                echo '"><img src="';
                                echo $value;
                                echo '" style="width:240px; height:160px" /></a>';
                                }
                           echo '</div>';
                        }
                       elseif($condo['Unit']['photo1'] == '') {
                              echo '<a href="/complexes/';
                              echo $condo['Complex']['complex_name'];
                              echo '/';
                              echo $condo['Unit']['unitnum'];
                              echo '"><img src="/img/img_unavailable.png" /></a>'; 
                        }
                ?>

Answer 1

我不知道我是否理解你的问题是正确的。这是我的观察：循环插件将所有图像作为div的直接子节点，用于启动插件。你作为直接孩子和图像链接的地方。

你还有一个额外的结束div或缺少开场div。如果您正在使用CakePHP，为什么不使用HTML帮助器来呈现链接，图像和其他标签？这非常有用，你的代码看起来更干净。（只是我的观点）

Answer 2

好的，明白了。问题肯定在我的幻灯片代码中。我稍微修改了我的php，如下：

if($condo['Unit']['photo1']!=''){
                            echo '<div class="thumbs">';

                            foreach($p as $value) {
                                if($value !='') {
                                    echo '<a href="/complexes/';
                                    echo $condo['Complex']['complex_name'];
                                    echo '/';
                                    echo $condo['Unit']['unitnum'];
                                    echo '"><img src="';
                                    echo $value;
                                    echo '" style="width:240px; height:160px" /></a>';
                                    }
                                }
                           echo '</div>';

然后，这是我的JQuery循环脚本的样子：

<script>

$(function() {
$('.thumbs').each(function(i) {
    $(this).append('<div class="overlay slides'+i+'">').cycle({
        fx:  'fade',
        speed: 1000,
        timeout: 0,
        pager:  '.slides' + i,
        slideExpr: 'img'
        });
    });
});

它有效！我使用这个帖子作为参考来启动我：Multiple Plugin pagers for different galleries on same page。

我删除了before（）回调并添加了append（）。 YIPPEE！

Div显示整个数组需要它一次只显示一个值

2 个答案: