bangkit Posted February 5, 2014 Share Posted February 5, 2014 (edited) 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??? Edited February 5, 2014 by bangkit Quote Link to comment Share on other sites More sharing options...
trq Posted February 5, 2014 Share Posted February 5, 2014 What? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.