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:
[htlm]
<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>
</div>
</section>
[/code]
This is the screenshot if use HTML
[ATTACH]5031[/ATTACH]
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>
And This Screen shot if use PHP
[ATTACH]5033[/ATTACH]
The result is not same..
How to make it look like use HTML.. but with php???
html.jpg
php.jpg
