Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jquery + iframe Fidel jQuery 6 12.10.2013 23:43
Повторное срабатывание .load() у iframe при смене его src vita1ii Events/DOM/Window 5 09.10.2013 13:49
Как изменить размер всех видео (iframe) разом через jQuery? dhorh Элементы интерфейса 2 29.12.2012 19:41
Как получить src нужного iframe? snapson Библиотеки/Тулкиты/Фреймворки 3 13.03.2012 12:22
jQuery и iFrame moltke jQuery 2 06.07.2010 00:58