alexa-tracking

Main Content

1024
1024
KASKUS
51
244
https://www.kaskus.co.id/thread/52f1fd8ea3cb17494f8b4774/helplt-gthigh-looping
(HELP)<->High Looping
Begini Gan, ane punya template Menampilkan Gambar Sesuai dengan Kategori Gambar..
Ini scrip HTML nya.. Jika diklik Categories maka muncul gambar sesuai dengan kategori yang diklik( menggunakan JQuery), kalau menggunakan HTML dibawah bisa gan,ga ada masalah, Ini HTMLnya:


HTML Code:
<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>

Ini Screen shotnya pake HTML saja:
Spoiler for Pic HTML:

Nah, ane pengen membuatnya dinamis, menampilkan kategori dan gambarnya dari database pake PHP,,
Ane Bingun ngeLoopingnya Gan,,
Ane sdh buat seperti dibawah ini:
PHP Code:
<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 " alt=""></a>
        <a class="
plus"    href="images/portfolio/<?php echo $g?>"><img src="images/portfolio/<?php echo " alt=""></a>
        <a class="
plus"    href="images/portfolio/<?php echo $g?>"><img src="images/portfolio/<?php echo " alt=""></a>
        <a class="
plus"    href="images/portfolio/<?php echo $g?>"><img src="images/portfolio/<?php echo " alt=""></a>
       </li>
                        </ul>
                    </div>
                </div>
    <?php  
$no++; }  ?>
              
                
            </div>      
        </div>
    </section>

Tapi Hasilnya Seperti tampilan dibawah:
Spoiler for PIc PHP:

Ane Pengen Seperti Yang HTML tampilannya Gan tapi sepertinya Loopingnya Salah,,..Gimana ya Gan Meloopingnya supaya benar seperti tampilan klu pake HTML saja..???
maap gan, ane rada pusing klo baca tag html apa lagi masalah div
kurang mudeng emoticon-Ngakak

tapi kalo diliat dari koding agan itu ada kesalahan looping memang
di dalam looping agan make ini
Code:

<li><a class="plus" href="images/portfolio/<?php echo $g; ?>"><img src="images/portfolio/<?php echo " alt=""></a>
<a class="plus" href="images/portfolio/<?php echo $g; ?>"><img src="images/portfolio/<?php echo " alt=""></a>
<a class="plus" href="images/portfolio/<?php echo $g; ?>"><img src="images/portfolio/<?php echo " alt=""></a>
<a class="plus" href="images/portfolio/<?php echo $g; ?>"><img src="images/portfolio/<?php echo " alt=""></a>
</li>


sedangkan $g yang masih dalam 1 looping pasti isinya sama, makanya gambar yg muncul juga sama gan

klo saran ane yang cuma bisa pake logika
agan hanya butuh print gambar 1 kali aja tiap2 looping ga perlu 4 kali
tapi agan kasih counter, andai kata udah gambar lewat kelipatan 4 di geser ke sebelah gambarnya

ya kira2 begitu gan, maap ga bisa bantu banyak emoticon-Hammer2
gampang, itu masalah sederhana.
klo contoh yang html kan polanya begini:
PHP Code:
<li>
  <
a href="image1">
  <
a href="image2">
  <
a href="image3">
  <
a href="image4">
</
li>
<
li>
  <
a href="image1">
  <
a href="image2">
  <
a href="image3">
  <
a href="image4">
</
li>
...
... 


di tiap <li> ada 4 images, tapi hasil looping dari kode agan jadinya begini:
PHP Code:
<li><a href="image1"></li>
<
li><a href="image2"></li>
<
li><a href="image3"></li>
<
li><a href="image4"></li>
...
.... 


jadi wajar kalau cuma imagenya lurus ke bawah, di tiap baris cuma masing-masing ada 1
ane juga pernah ngalamin hal tsb gan ,

ane coba bantu code nya , ntar dirubah sendiri ya gan emoticon-Big Grin

PHPFIDDLE
Quote:Original Posted By Mastela
maap gan, ane rada pusing klo baca tag html apa lagi masalah div
kurang mudeng emoticon-Ngakak

tapi kalo diliat dari koding agan itu ada kesalahan looping memang
di dalam looping agan make ini
Code:

<li><a class="plus" href="images/portfolio/<?php echo $g; ?>"><img src="images/portfolio/<?php echo " alt=""></a>
<a class="plus" href="images/portfolio/<?php echo $g; ?>"><img src="images/portfolio/<?php echo " alt=""></a>
<a class="plus" href="images/portfolio/<?php echo $g; ?>"><img src="images/portfolio/<?php echo " alt=""></a>
<a class="plus" href="images/portfolio/<?php echo $g; ?>"><img src="images/portfolio/<?php echo " alt=""></a>
</li>


sedangkan $g yang masih dalam 1 looping pasti isinya sama, makanya gambar yg muncul juga sama gan

klo saran ane yang cuma bisa pake logika
agan hanya butuh print gambar 1 kali aja tiap2 looping ga perlu 4 kali
tapi agan kasih counter, andai kata udah gambar lewat kelipatan 4 di geser ke sebelah gambarnya

ya kira2 begitu gan, maap ga bisa bantu banyak emoticon-Hammer2

Ya gan ga apa2...makasih sama pendapatnya ganemoticon-Sundul Gan (S),
Quote:Original Posted By korancrew
gampang, itu masalah sederhana.
klo contoh yang html kan polanya begini:
PHP Code:
<li>
  <
a href="image1">
  <
a href="image2">
  <
a href="image3">
  <
a href="image4">
</
li>
<
li>
  <
a href="image1">
  <
a href="image2">
  <
a href="image3">
  <
a href="image4">
</
li>
...
... 


di tiap <li> ada 4 images, tapi hasil looping dari kode agan jadinya begini:
PHP Code:
<li><a href="image1"></li>
<
li><a href="image2"></li>
<
li><a href="image3"></li>
<
li><a href="image4"></li>
...
.... 


jadi wajar kalau cuma imagenya lurus ke bawah, di tiap baris cuma masing-masing ada 1

Ane coba praktekkan gan,,trims sdh kasih pencerahan gan..emoticon-Sundul Gan (S)
Quote:Original Posted By syiewa
ane juga pernah ngalamin hal tsb gan ,

ane coba bantu code nya , ntar dirubah sendiri ya gan emoticon-Big Grin

PHPFIDDLE


Than'x berat gan sdh kasih pengalaman agan..emoticon-Sundul Gan (S)
×