Здравствуйте.
Что дано:
Табы на jquery с таким кодом
(function($) {
$(function() {
$('ul.tabs-menu').on('click', 'li:not(.current)', function() {
$(this).addClass('current').siblings().removeClass('current')
.parents('div.tabs').find('div.tabs-content').eq($(this).index()).fadeIn(200).siblings('div.tabs-content').hide();
})
})
})(jQuery)
<div class="tabs">
<ul class="tabs-menu">
<li class="current">Меню 1</li>
<li>Меню 2</li>
<li>Меню 3</li>
</ul>
<div class="tabs-content visible">
<div class="tabs-body-left">
<ul class="tabs-body-gallery gallery">
<li><a href="#" rel="prettyPhoto[gallery1]"><img src="#" /></a></li>
<li><a href="#" rel="prettyPhoto[gallery1]"><img src="#" /></a></li>
<li><a href="#" rel="prettyPhoto[gallery1]"><img src="#" /></a></li>
</ul>
</div>
<div class="tabs-body-right">
<iframe src="" data-url="http://url/"></iframe>
</div>
</div>
<div class="tabs-body">
...
</div>
<div class="tabs-body">
...
</div>
</div>
Проблема 1 - prettyPhoto работают только на первой вкладке, с другими не работает, хотя приписал другие галерейки, ничем не отличаются от рабочих.
Проблема 2 - Вкладок на деле больше, чем в примере, в каждой грузится видео айфреймом. Всё очень тормозит в начале загрузки, хотелось бы реализовать как делал на другом сайте, но опять же там не было проблем с совместимостью. Там по клику по блоку, разворачивался другой (развёртывание "toggle" сейчас и не нужно), а главное данные src хранились в data-url, и загружались в src только по клику. Как сделать так же, чтобы по клику по табу, это же делалось в .tabs-content.tabs-body-right iframe помимо операций с классами(visible) ?
Вот код с того сайта:
$(document).ready(function () {
$('.head').click(function () {
var iframe = $(this).parent().find('.video-iframe');
$(this).parent().children('div.body').toggle('normal', function () {
if (!iframe.attr('src')) { iframe.attr('src', iframe.data('url')); }
});
return false;
});
});
<div class="item">
<h2 class="head">
Название
</h2>
<div class="body">
<iframe class="video-iframe" src="" data-url="http://url/"></iframe>
</div>
</div>