Jump to content

High Looping

bangkit

By bangkit
in PHP Coding Help

Recommended Posts

bangkit Newbie

bangkit

Posted
Posted

Hello,,
I've got a template Showing Picture accordance with Category Picture ..
If it appears the image is clicked Categories accordance with category clicked (using JQuery), if  use the following HTML , there is no problem, This HTML:

<section id="content">
        <div class="page3-row1 pad-2 tabs">
<!----------------------------------------------Categories------------------------------------------------------------------------------>
            <div class="col-8">
                <h2 class="h2 p2">Categories:</h2>
                <ul class="list-1 nav">
                    <li class="selected"><a href="#tab-1">Fashion</a></li>
                    <li><a href="#tab-2">Animals</a></li>
                    <li><a href="#tab-3">Wedding</a></li>
                    <li><a href="#tab-4">Sport</a></li>
                    <li><a href="#tab-5">Portrait</a></li>
                </ul>
            </div>
<!----------------------------------------------Gambar-------------------------------------------------------------------------------->
            <div class="col-9">
                <h3 class="h3-2">Fashion:</h3>
                <div id="tab-1" class="tab-content gallery-photo">
                   <div class="inner">
                        <ul id="mycarousel-1" class="jcarousel-skin-tango">
                            <li><a class="plus"     href="images/portfolio-1-big.jpg"><img src="images/portfolio-1.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-2-big.jpg"><img src="images/portfolio-2.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-3-big.jpg"><img src="images/portfolio-3.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-4-big.jpg"><img src="images/portfolio-4.jpg" alt=""></a>
                            </li>
                            <li><a class="plus"     href="images/portfolio-5-big.jpg"><img src="images/portfolio-5.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-6-big.jpg"><img src="images/portfolio-6.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-7-big.jpg"><img src="images/portfolio-7.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-8-big.jpg"><img src="images/portfolio-8.jpg" alt=""></a>
                            </li>
                            <li><a class="plus"     href="images/portfolio-9-big.jpg"><img src="images/portfolio-9.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-10-big.jpg"><img src="images/portfolio-10.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-11-big.jpg"><img src="images/portfolio-11.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-1-big.jpg"><img src="images/portfolio-1.jpg" alt=""></a>
                            </li>
                            <li><a class="plus"     href="images/portfolio-12-big.jpg"><img src="images/portfolio-12.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-13-big.jpg"><img src="images/portfolio-13.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-14-big.jpg"><img src="images/portfolio-14.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-2-big.jpg"><img src="images/portfolio-2.jpg" alt=""></a>
                            </li>
                        </ul>
                    </div>
                </div>
<!------------------------------------------------------------------------------------------------------------------------------>
                <div id="tab-2" class="tab-content gallery-photo">
                   <div class="inner">
                        <ul id="mycarousel-2" class="jcarousel-skin-tango">
                            <li><a class="plus"     href="images/portfolio-9-big.jpg"><img src="images/portfolio-9.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-10-big.jpg"><img src="images/portfolio-10.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-11-big.jpg"><img src="images/portfolio-11.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-1-big.jpg"><img src="images/portfolio-1.jpg" alt=""></a>
                            </li>
                            <li><a class="plus"     href="images/portfolio-12-big.jpg"><img src="images/portfolio-12.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-13-big.jpg"><img src="images/portfolio-13.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-14-big.jpg"><img src="images/portfolio-14.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-2-big.jpg"><img src="images/portfolio-2.jpg" alt=""></a>
                            </li>
                            <li><a class="plus"     href="images/portfolio-1-big.jpg"><img src="images/portfolio-1.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-2-big.jpg"><img src="images/portfolio-2.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-3-big.jpg"><img src="images/portfolio-3.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-4-big.jpg"><img src="images/portfolio-4.jpg" alt=""></a>
                            </li>
                            <li><a class="plus"     href="images/portfolio-5-big.jpg"><img src="images/portfolio-5.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-6-big.jpg"><img src="images/portfolio-6.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-7-big.jpg"><img src="images/portfolio-7.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-8-big.jpg"><img src="images/portfolio-8.jpg" alt=""></a>
                            </li>
                        </ul>
                    </div>
                </div>
<!------------------------------------------------------------------------------------------------------------------------------>
                <div id="tab-3" class="tab-content gallery-photo">
                   <div class="inner">
                        <ul id="mycarousel-3" class="jcarousel-skin-tango">
                            <li><a class="plus"     href="images/portfolio-5-big.jpg"><img src="images/portfolio-5.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-6-big.jpg"><img src="images/portfolio-6.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-7-big.jpg"><img src="images/portfolio-7.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-8-big.jpg"><img src="images/portfolio-8.jpg" alt=""></a>
                            </li>
                            <li><a class="plus"     href="images/portfolio-9-big.jpg"><img src="images/portfolio-9.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-10-big.jpg"><img src="images/portfolio-10.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-11-big.jpg"><img src="images/portfolio-11.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-1-big.jpg"><img src="images/portfolio-1.jpg" alt=""></a>
                            </li>
                             <li><a class="plus"     href="images/portfolio-1-big.jpg"><img src="images/portfolio-1.jpg" alt=""></a>
                                 <a class="plus"     href="images/portfolio-2-big.jpg"><img src="images/portfolio-2.jpg" alt=""></a>
                                 <a class="plus"     href="images/portfolio-3-big.jpg"><img src="images/portfolio-3.jpg" alt=""></a>
                                 <a class="plus"     href="images/portfolio-4-big.jpg"><img src="images/portfolio-4.jpg" alt=""></a>
                             </li>
                            <li><a class="plus"     href="images/portfolio-12-big.jpg"><img src="images/portfolio-12.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-13-big.jpg"><img src="images/portfolio-13.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-14-big.jpg"><img src="images/portfolio-14.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-2-big.jpg"><img src="images/portfolio-2.jpg" alt=""></a>
                            </li>
                        </ul>
                    </div>
                </div>
<!------------------------------------------------------------------------------------------------------------------------------>
                <div id="tab-4" class="tab-content gallery-photo">
                   <div class="inner">
                        <ul id="mycarousel-4" class="jcarousel-skin-tango">
                            <li><a class="plus"     href="images/portfolio-12-big.jpg"><img src="images/portfolio-12.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-13-big.jpg"><img src="images/portfolio-13.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-14-big.jpg"><img src="images/portfolio-14.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-2-big.jpg"><img src="images/portfolio-2.jpg" alt=""></a>
                            </li>
                             <li><a class="plus"     href="images/portfolio-1-big.jpg"><img src="images/portfolio-1.jpg" alt=""></a>
                                 <a class="plus"     href="images/portfolio-2-big.jpg"><img src="images/portfolio-2.jpg" alt=""></a>
                                 <a class="plus"     href="images/portfolio-3-big.jpg"><img src="images/portfolio-3.jpg" alt=""></a>
                                 <a class="plus"     href="images/portfolio-4-big.jpg"><img src="images/portfolio-4.jpg" alt=""></a>
                             </li>
                            <li><a class="plus"     href="images/portfolio-5-big.jpg"><img src="images/portfolio-5.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-6-big.jpg"><img src="images/portfolio-6.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-7-big.jpg"><img src="images/portfolio-7.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-8-big.jpg"><img src="images/portfolio-8.jpg" alt=""></a>
                            </li>
                            <li><a class="plus"     href="images/portfolio-9-big.jpg"><img src="images/portfolio-9.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-10-big.jpg"><img src="images/portfolio-10.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-11-big.jpg"><img src="images/portfolio-11.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-1-big.jpg"><img src="images/portfolio-1.jpg" alt=""></a>
                            </li>
                        </ul>
                    </div>
                </div>
<!------------------------------------------------------------------------------------------------------------------------------>
                <div id="tab-5" class="tab-content gallery-photo">
                   <div class="inner">
                        <ul id="mycarousel-5" class="jcarousel-skin-tango">
                             <li><a class="plus"     href="images/portfolio-1-big.jpg"><img src="images/portfolio-1.jpg" alt=""></a>
                                 <a class="plus"     href="images/portfolio-2-big.jpg"><img src="images/portfolio-2.jpg" alt=""></a>
                                 <a class="plus"     href="images/portfolio-3-big.jpg"><img src="images/portfolio-3.jpg" alt=""></a>
                                 <a class="plus"     href="images/portfolio-4-big.jpg"><img src="images/portfolio-4.jpg" alt=""></a>
                             </li>
                            <li><a class="plus"     href="images/portfolio-5-big.jpg"><img src="images/portfolio-5.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-6-big.jpg"><img src="images/portfolio-6.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-7-big.jpg"><img src="images/portfolio-7.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-8-big.jpg"><img src="images/portfolio-8.jpg" alt=""></a>
                            </li>
                            <li><a class="plus"     href="images/portfolio-9-big.jpg"><img src="images/portfolio-9.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-10-big.jpg"><img src="images/portfolio-10.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-11-big.jpg"><img src="images/portfolio-11.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-1-big.jpg"><img src="images/portfolio-1.jpg" alt=""></a>
                            </li>
                            <li><a class="plus"     href="images/portfolio-12-big.jpg"><img src="images/portfolio-12.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-13-big.jpg"><img src="images/portfolio-13.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-14-big.jpg"><img src="images/portfolio-14.jpg" alt=""></a>
                                <a class="plus"     href="images/portfolio-2-big.jpg"><img src="images/portfolio-2.jpg" alt=""></a>
                            </li>
                        </ul>
                    </div>
                </div>
<!------------------------------------------------------------------------------------------------------------------------------>
                
            </div>      
        </div>
    </section>

And I want make it more dynamic, i ues php and database mysql

This is my phpScript

<section id="content">
        <div class="page3-row1 pad-2 tabs">
            <div class="col-8">
                <h2 class="h2 p2">Categories:</h2>
                <ul class="list-1 nav">
                <?php
                include "config/koneksi.php";
                $no=1;
                $sql=mysql_query("select * from kp order by id_kp asc");
                while($rc=mysql_fetch_array($sql)){
                $id=$rc['id_kp'];
                ?>
                <li><a href="#tab-<?php echo $no; ?>"><?php  echo $rc['nama_kp']; ?></a></li>
                <?php
                    $no++;
                    }
                ?>
                </ul>
            </div>
            <div class="col-9">
                <h3 class="h3-2">Fashion:</h3>
                                            <?php
                                            $no=1;
                                            $sp=mysql_query("select * from portfolio  order by id_kp asc");
                                            while($rsp=mysql_fetch_array($sp)){
                                            $g=$rsp["gambar_p"];        ?>
                <div id="tab-<?php echo $no; ?>" class="tab-content gallery-photo">
                   <div class="inner">
                        <ul id="mycarousel-<?php echo $no; ?>" class="jcarousel-skin-tango">
                            <li><a class="plus"     href="images/portfolio/<?php echo $g; ?>"><img src="images/portfolio/<?php echo "small-$g";  ?>" alt=""></a>
                                <a class="plus"    href="images/portfolio/<?php echo $g; ?>"><img src="images/portfolio/<?php echo "small-$g";  ?>" alt=""></a>
                                <a class="plus"    href="images/portfolio/<?php echo $g; ?>"><img src="images/portfolio/<?php echo "small-$g";  ?>" alt=""></a>
                                <a class="plus"    href="images/portfolio/<?php echo $g; ?>"><img src="images/portfolio/<?php echo "small-$g";  ?>" alt=""></a>
                            </li>
                        </ul>
                    </div>
                </div>
                <?php        $no++;    }        ?>
              
                
            </div>      
        </div>
    </section>

The result is not same..
How to make it look like use HTML.. but with php???

Link to comment
https://forums.phpfreaks.com/topic/285958-high-looping/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.