Merhaba
Bir site tasarlıyorum ve hazır tema kullanıyorum. Sitede ürün detayına girdiğimde ürün resimlerinin sıralanmasını istiyorum. Fakat tablı olarak yapıldığından nasıl olduğunu anlayamadım. Kodlara bakarsanız ne demek istediğimi anlarsınız.
<!-- Tab panes -->
<div class="tab-content single-product-big-img">
<div role="tabpanel" class="tab-pane active" id="one">
<div class="s-product-img">
<!-- Discount - new - hot -->
<span class="special"><a href="#"><i class="pe-7s-plus"></i></a></span>
<!--/ Discount - new - hot -->
<a href="#"><img src="img/product/single/1.jpg" alt="" id="zoom_01"></a>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="1">
<div class="s-product-img">
<!-- Discount - new - hot -->
<span class="special"><a href="#"><i class="pe-7s-plus"></i></a></span>
<!--/ Discount - new - hot -->
<a href="#"><img src="img/product/single/3.jpg" alt="" id="zoom_02"></a>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="three">
<div class="s-product-img">
<!-- Discount - new - hot -->
<span class="special"><a href="#"><i class="pe-7s-plus"></i></a></span>
<!--/ Discount - new - hot -->
<a href="#"><img src="img/product/single/4.jpg" alt="" id="zoom_03"></a>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="four">
<div class="s-product-img">
<!-- Discount - new - hot -->
<span class="special"><a href="#"><i class="pe-7s-plus"></i></a></span>
<!--/ Discount - new - hot -->
<a href="#"><img src="img/product/single/5.jpg" alt="" id="zoom_04"></a>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="five">
<div class="s-product-img">
<!-- Discount - new - hot -->
<span class="special"><a href="#"><i class="pe-7s-plus"></i></a></span>
<!--/ Discount - new - hot -->
<a href="#"><img src="img/product/single/6.jpg" alt="" id="zoom_05"></a>
</div>
</div>
</div>
<!-- Nav tabs -->
Tab sistemiyle yapılmış tema. Benim bu tab sistemine veritabanından gelen resimleri eklemem lazım fakat nasıl olacağını çözemedim. Yardımcı olursanız memnun olurum.
Görünümü de bu şekildedir.
İlla bu olması gerekmez bu görünümü olan başka bir kodda ekleyebilirim oraya. Yeter ki sorunsuz çalışsın.
<div class="single-product-sml-img">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#one" role="tab" data-toggle="tab"> <img src="img/product/single/2.jpg" alt="" /></a>
</li>
<li role="presentation">
<a href="#two" role="tab" data-toggle="tab"><img src="img/product/single/3.jpg" alt="" /></a>
</li>
<li role="presentation">
<a href="#three" role="tab" data-toggle="tab"><img src="img/product/single/4.jpg" alt="" /></a>
</li>
<li role="presentation">
<a href="#four" role="tab" data-toggle="tab"><img src="img/product/single/5.jpg" alt="" /></a>
</li>
<li role="presentation">
<a href="#five" role="tab" data-toggle="tab"><img src="img/product/single/6.jpg" alt="" /></a>
</li>
</ul>
</div>
Ben bu kodu eklemeyi unutmuşum kusura bakmayın. Bu da o küçük resim bölümü Bunu nasıl yapacağım. #two, #three de yukardaki kodların id bölümü ile aynı oluyor.
<div role="tabpanel" class="tab-pane" [B]id="three"[/B]>
Kalın olan yer ile. Burayı nasıl halledebilirim.