ディビジョン全体を表示するDivには、一度に1つの値しか表示されません。

Question

divにピクチャを表示するこのページがあります。これらの画像をスライドショーで表示するにはjquery cycleが必要です。私は、スライドショーをマニュアルにして、ナビゲーションのために画像の上に表示するスライドナビゲーションdivを持っていたいと思います。問題は、「スライド」divをどこに貼り付けても、ページ上の各結果だけでなく、ページ上のすべての単一画像結果のリンクを取得していることです。より詳しくは、this linkをご覧ください。要素を調べると、divクラス= "slides"は配列全体のすべての画像に見えるものを取り、リンクを設定します。 （私は今どこにdivを置いても、配列全体のすべてのイメージを取ることができます）。 foreachのすぐ下、foreachの内側、さらには「thumbs」div（これは常駐するはずの場所）の外側にも、結果に変化はなくPHPコードの上にこれを設定しようとしました。さらに悪いことに、私はz-indexが正しく設定されているにもかかわらず、私のnavがすべての画像の下に表示されるz-indexの問題があります。だから私の結果を見るためには、私はクロムの中の要素を調べるか、何が起こっているかを見るために画像をオフにしなければなりません。誰でも手掛かりがありますか？

<?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

この問題は、スライドショーの私のコードには間違いありませんでした。私はそうのように、少し私のPHPを変更：

<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' 
     }); 
    }); 
}); 

、それが働いた：

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のサイクルのスクリプトは次のように見えたものです！私は参考にこのスレッドを使用して私を始めました：Multiple Plugin pagers for different galleries on same page。

before（）コールバックを削除し、append（）を追加しました。イッピー！

Answer 2

あなたの質問が正しいかどうかわかりません。 これは私の観察です： サイクルプラグインは、プラグインを開始するために使用されたdivの直下の子としてすべての画像を持っています。直接的な子供としてリンクし、次に画像にリンクしているところ。

また、追加のクロージングdivまたは欠落した開始divがあります。 CakePHPを使用している場合は、HTMLヘルパーを使用してリンク、画像、その他のタグをレンダリングしてみましょう。これは非常に便利でコードはより洗練されています。（私の意見）