Question

I’m making a productscreen, I’ve made a Paint example what i’ve in mind.

The big black block is the productView with an sliding container in the back. I want to alphabetically order those products (All these little roundend blocks are products in a divs). But this order is “A” from beginning and ‘Z’ to end of slindingcontainer.

I want to order the products like the red line. I now have a second container with an modules, only this breaks my code.

Is there an other way to order the products like my example drawing?

Update – My code now:

            <?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">&times;</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>';
                    }
                }      
            }?>

Answer 1

Check this http://jsfiddle.net/Mzmay/18/

Using PHP you generate the markup like that in fiddle & later you can use the jQuery to do that. I am not sure how to do the same by just using Php.