Все просто...
Реализовал такое на днях
Сначала вставляешь это в шаблон флай_паг или какй там стоит
Слишком много возни.
Достаточно маленького плагинчика к Jquery(можно пихать в код страницы):
(function($) {
$(function() {
$('ul.tabs').each(function() {
$(this).find('li').each(function(i) {
$(this).click(function(){
$(this).addClass('current').siblings().removeClass('current');
var p = $(this).parents('div.section');
p.find('div.box').hide();
p.find('div.box:eq('+i+')').fadeIn(150);
});
});
});
})
})(jQuery)
К нему примерно такой CSS:
/* tabs--------------------------------------------------------- */
.section {
width: auto;
margin: 0 0 30px;
}
ul.tabs {
height: 21px;
line-height: 21px;
list-style: none;
border-bottom: 1px solid #DDD;
background: #FFF;
margin:0;
}
.tabs li {
float: left;
display: inline;
margin: 0 1px -1px 0;
padding: 0 13px 0px;
cursor: pointer;
background: #E6E6FA;
border: 1px solid #E4E4E4;
border-bottom: 1px solid #F9F9F9;
position: relative;
}
.tabs li:hover,
.vertical .tabs li:hover {
padding: 0 13px;
background: #FFFFDF;
}
.tabs li.current {
color: #444;
padding: 0 13px 0px;
height:21px;
background: #FFFFFF;
border: 1px solid #D4D4D4;
border-bottom: 1px solid #FFFFFF;
}
.box {
display: none;
border: 1px solid #D4D4D4;
border-width: 0 1px 1px;
padding: 0 12px;
}
.box.visible {
display: block;
}
И в собственно флайпейдже:
<div class="section">
<ul class="tabs">
<li class="current">Заголовок таба 1</li>
<li>Заголовок таба 2</li>
</ul>
<div class="box visible">
Содержимое таба 1
</div>
<div class="box">
Содержимое таба 2
</div>
</div>
ЗЫ: естественно, надо загружать Jquery. Можно через тот же Scriptegrator.
последний пункт меняй на это
<div class="section">
<ul class="tabs">
<li class="current">Характеристики и описание</li>
<li>Фото</li>
<li>Отзывы</li>
<li>Доставка</li>
</ul>
<div class="box visible">
<?php echo $product_description ?><br/>
<span style="font-style: italic;"><?php echo $file_list ?></span>
</div>
<div class="box">
<h4>Фотографии <?php echo $product_name ?>:</h4>
<?php echo $this->vmlistAdditionalImages( $product_id, $images )?>
</div>
<div class="box">
<?php echo $product_reviews ?>
</div>
<div class="box">
<p>Текст доставки....</p>
</div>
</div>
Что бы комментарии работали нужно сделать это
http://joomlaforum.ru/index.php/topic,92775.new.html#newДоп изображения к товрау добавляются в списке товаров, там есть кол изображений.. туда клац и там есть загрузка еще...
03.04.2019, 03:28:34