2012-04-24 11 views
0

5要素ごとに1つのdivを作成したいと思います。ここでは例を見ることができます:http://www.nobregamedia.com/aa/5要素ごとにDIVを作成

下部には、5つの要素を持つギャラリーがあり、オレンジ色の小さな四角形で変更可能です。各オレンジ色の正方形には、DIV名へのリンクがあります。例:DIV1、DIV2、DIV3 .. mysqlデータベースから取得したアイテムの量を考慮して、これを自動的に作成する必要があります。例えば

:私は7つの項目を引っ張ると、それが2つの正方形、及び2つのdivを作成:5の倍数で、その..にDIV1とDIV2をそして...

私はここにStackOverflowでいくつかの例を読んでいました、しかし、私はそれらをたくさん理解していない(私はジャバスクリプトで初心者です)。いくつかのコード例で私を助けることができれば、それは素晴らしいことでしょう。

ありがとうございます。

ここ

私が今持っているコード

<div class="idTabs"> 
    <div class="col2"> 
     <a href="#pduno"><img class="pdimg" src="img/pduno.png" width="13" height="11" /></a> 
     <a href="#pddos"><img class="pdimg" src="img/pddos.png" width="13" height="11" /></a> 
     <a href="#pdtres"><img class="pdimg" src="img/pddos.png" width="13" height="11" /></a> 
    </div> 
</div> 
<div class="row-end">&nbsp;</div> 
<div class="row"> 
    <div class="col101"> 
     <div id="pduno"> 
      <table width="920" border="0" align="left" cellpadding="0" cellspacing="0" style="text-align:left"> 
       <tr> 
        <td>&nbsp;</td> 
       </tr> 
       <tr> 
        <?PHP 
         while ($retdetsfinal = mysql_fetch_row($retdest)) { 
        ?> 
        <td height="110"> 
         <div style="width:160px; height:112px; border:2px solid #c0bdb6"> 
          <img src="imagenes/thumbs/<?php echo $retdetsfinal[0];?>_x.jpg" style="border:6px solid #FFF;" width="148" height="100" /> 
         </div> 
         <br /> 
         <?php echo ucfirst($retdetsfinal[1]);?> - <?php echo ucfirst($retdetsfinal[2]);?><br />Bs. <?php echo $retdetsfinal[3];?> 
        </td> 
        <td>&nbsp;</td> 
        <?PHP 
        } 
        ?> 
       </tr> 
      </table> 
     </div> 
    </div> 
</div> 
+0

コードやフィドルが素敵でしょう。しかし、私が正しく理解しているように、例えば12枚の画像がある場合、3つの小さな正方形が表示されたdivと3つのdivを変更してイメージアイテムが...正しいのですか? –

+0

@TobiasKroghはい、あなたは正しいです。私は正しい言葉が要素を「包み込む」と思います。何か案が。??ありがとう! –

+0

[スライス](http://api.jquery.com/slice/)と[wrapAll](http://api.jquery.com/wrapAll/)を組み合わせる必要があります。私はあなたがいくつかのコードなしで詳細な答えを得るとは思わない –

答えて

0

このfiddleをチェックしてください。あなたのニーズに完全に合っていないかもしれませんが、スタイリングは利用できません。それでは、正しいヒントを教えてください。

関連する問題