Как мне запустить слайдер jquery (NIVO SLIDER) для работы в окне jqModal? - PullRequest
1 голос
/ 28 декабря 2010

Я надеюсь, что кто-то может предложить любую помощь !!

У меня есть веб-страница, которая запускает модальное окно с помощью jqModal (http://dev.iceburg.net/jquery/jqModal/). jqModal вызывает внешний html-файл с ползунком NIVO.

Когда я просматриваю внешнюю html-страницу без окна jqModal, NIVO SLIDER работает хорошо.

Но когда я смотрю на внешнюю страницу через jqModal, слайдер не работает.

Вот мои ссылки:

Вот внешний html: текст ссылки

Вот внешний html-файл, просматриваемый с помощью jqModal: текст ссылки (нажмите на номер 1).

Любые предложения могут быть потрясающими. Я действительно застрял. Эти два сценария конфликтуют друг с другом? Нужно ли запускать что-то в jqModal при запуске?

Действительно нужна помощь.

Спасибо

Вот код для внешней html-страницы с NIVO SLIDER:

    <script src="/src/jquery/jquery-1.4.3.min.js" type="text/javascript"></script>
    <script src="/src/jquery/jquery.nivo.slider.js" type="text/javascript"></script>
    <link href="/src/css/logicpak.css" rel="stylesheet" type="text/css">


    <script type="text/javascript">
    $(window).load(function() {
    $('#slider').nivoSlider({
    effect:'random', //Specify sets like: 'fold,fade,sliceDown'
    slices:15,
    animSpeed:500, //Slide transition speed
    pauseTime:3000,
    startSlide:0, //Set starting Slide (0 index)
    directionNav:false, //Next & Prev
    directionNavHide:false, //Only show on hover
    controlNav:false, //1,2,3...
    controlNavThumbs:false, //Use thumbnails for Control Nav
    controlNavThumbsFromRel:true, //Use image rel for thumbs
    controlNavThumbsSearch: '.jpg', //Replace this with...
    controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
    keyboardNav:true, //Use left & right arrows
    pauseOnHover:true, //Stop animation while hovering
    manualAdvance:false, //Force manual transitions
    captionOpacity:0.8, //Universal caption opacity
    beforeChange: function(){},
    afterChange: function(){},
    slideshowEnd: function(){}, //Triggers after all slides have been shown
    lastSlide: function(){}, //Triggers when last slide is shown
    afterLoad: function(){} //Triggers when slider has loaded
    });
    });


    function loadPage(list) {
    location.href=list.options[list.selectedIndex].value
    }

    </script>


    <title>Untitled 1</title>
    </head>

ЗДЕСЬ КОД ДЛЯ СТРАНИЦЫ, КОТОРЫЙ ИНИЦИРУЕТ JQModal:

     <!DOCTYPE html>
     <html>

      <head>
      <title>Manuacturer of Folding Cartons</title>
      <meta content="feeding orphans around the world" name="description">
      <link href="/src/css/logicpak.css" rel="stylesheet" type="text/css">
      <script src="/src/jquery/jquery-1.4.3.min.js" type="text/javascript"></script>
      <script src="/src/jquery/jqmodal.js" type="text/javascript"></script>



      <script  type="text/javascript">
      $().ready(function() {
      $('#ex1').jqm({ajax: 'carton01.htm', trigger: '.ex1trigger'});
      });
      </script>

      </head>

1 Ответ

1 голос
/ 28 декабря 2010

Я думаю, это как-то связано с тем, что вы оборачиваете код инициализации ползунка в $(window).load(), который не будет запускаться при загрузке содержимого диалога через AJAX, так как содержимое просто добавляется в страница и стилизован под диалог (фактически не загружается в новом окне браузера). Вот почему ваш пример работает, когда его нет в диалоговом окне.

Поскольку вы извлекаете HTML через AJAX, вы можете просто переместить код инициализации ползунка в обработчик onLoad jqModal (последний параметр на главной странице плагина):

$('#dialog').jqm({
    onLoad:function() {
        // slider code here.  This will be called when the AJAX
        // call returns.
    },
    ajax: 'page.html'
});

Я бы стандартизировал класс элемента, для которого вызывается плагин слайдера, чтобы вы могли сделать функцию onload одинаковой для каждого обратного вызова. Примерно так:

var setupSlider = function() {
    // common slider initialization code.
    $(".slider").nivoSlider({ ... });
}

$('#dialog').jqm({
    onLoad:setupSlider,
    ajax: 'page.html'
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...