Показать сообщение отдельно
  #1 (permalink)  
Старый 17.08.2014, 16:13
Новичок на форуме
Отправить личное сообщение для alex1055501 Посмотреть профиль Найти все сообщения от alex1055501
 
Регистрация: 17.08.2014
Сообщений: 1

JQuery: конфликт табов с prettyPhoto и подгрузка iframe src
Здравствуйте.
Что дано:

Табы на 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>
Ответить с цитированием