私は製品画面を作成しています。私が考えているペイントの例を作成しました。
大きな黒いブロックは、後ろにスライド コンテナーがある productView です。これらの製品をアルファベット順に並べたいです (これらの小さな丸いブロックはすべて div 内の製品です)。ただし、この順序は、スライド コンテナの最初から「A」、最後に「Z」です。
赤線のような商品を注文したいです。モジュールを含む 2 番目のコンテナーができましたが、これだけでコードが壊れます。
私の作例のような製品を注文する他の方法はありますか?
更新- 今私のコード:
<?php
if(!empty($productByType)){
for($i=0;$i < count($productByType); $i++){
$id = $productByType[$i]['id'];
$title = $productByType[$i]['title'];
$img = base_url('/img/producten/'.$productByType[$i]["img"]);
if($i % 2 == 0){
echo '<div class="seperatorforproduct">';
//0,2,4,6,8
}
============
Content divs
**Example of one product:** (Using modal from bootstrap)
echo '<div class="button btnstyle">';
echo '<div class="imgbtn">';
// <!-- Picture-->
echo '<img src="'.$img.'" title="'.$title.'" alt="'.$title.'" data-toggle="modal" href="#modal'.$id.'" />';
echo '</div>';
echo '<div class="txtbtn txtstyle">';
echo '<a class="btn" data-toggle="modal" href="#modal'.$id.'" >'.$title.'</a>';
echo '</div>';
echo '</div>';
?>
<div class="modal" style="display:none;" id="modal<?=$id?>">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h2><?=$title?></h2>
</div>
<div class="modal-body">
<div class="modal-left">
<img src="<?=$img?>" title="<?=$title?>" alt="<?=$title?>" />
</div>
<div class="modal-right">
<p><?=$productByType[$i]['info']?></p>
</div>
</div>
<div class="modal-footer">
Telephone number etc.
</div>
</div>
============
<?php
if($i % 2 == 1 || $i == count($productByType)){
// 0,3,6,9,12
echo '</div>';
}
}
}?>