Необходимо обновить страницу при использовании iDangero.us Swiper с jQuery Mobile

В настоящее время я пытаюсь добавить iDangerous Swiper на страницу, созданную с помощью jQuery Mobile, но для отображения swiper мне нужно перезагрузить страницу. Я видел несколько случаев, когда у людей были проблемы с ними, но их решения не помогли решить мою проблему, указанную ниже.

Я пробовал несколько разных вещей: pageshow, pageinit, pagebeforeshow, mobileinit. Также триггер («создать»), триггер («обновить») и пытался добавить скрипт до или после jQuery Mobile js.

В настоящее время я использую jQuery Mobile 1.4.1 alpha 2 и Swiper 2.1.0.

Мой вопрос: какова будет правильная последовательность сценариев, чтобы они работали, и какое из событий страницы выше должно помочь? Спасибо за ваше время.

Мой HTML для swiper выглядит следующим образом:

<div class="swiper-container">
        <div class="swiper-wrapper">

        <div class="swiper-slide">
<div class="picture"><img src="image1.jpg" alt="Women's L-Premise Jacket" title=" Women's L-Premise Jacket "  id="productImage" /></div>
        </div>
<div class="swiper-slide"><div class="picture">
      <img src="image2.jpj" alt="Women's L-Premise Jacket" title=" Women's L-Premise Jacket " />
      </div></div>
<div class="swiper-slide"><div class="picture">
      <img src="image3.jpg" alt="Women's L-Premise Jacket" title=" Women's L-Premise Jacket " />
      </div></div>
      </div>
    </div>

Мои файлы jQuery и jQuery Mobile загружаются внизу страницы.

    <script type="text/javascript" src="includes/templates/YOUR_TEMPLATE_mobile/jscript/jquery.min.js"></script>
<script>
    $(document).on('pagecreate', function(){
        $( "#leftPanel" ).trigger( "updatelayout" );

        $.mobile.defaultDialogTransition = 'slide';
        $.mobile.defaultPageTransition = 'slide';
        $.mobile.selectmenu.prototype.options.nativeMenu = false;

    });
</script>

<script src="/4.0/includes/templates/YOUR_TEMPLATE_mobile/jscript/idangerous.swiper-2.1.min.js"></script>


<script type="text/javascript" src="includes/templates/YOUR_TEMPLATE_mobile/jscript/jquery.mobile-1.4.0-alpha.2.min.js"></script>

<script src="/4.0/includes/templates/YOUR_TEMPLATE_mobile/jscript/boilerplate/helper.js"></script>
<script>
$('#productinfo').on('pageshow', function() {
  var mySwiper = new Swiper('.swiper-container',{
    centeredSlides: true,
    slidesPerView: 2,
    watchActiveIndex: true
  });
});
</script>

javascript jquery swiper jquery-mobile
person GIJoeCodes    schedule 15.09.2013    source источник
comment
$.mobile.changePage('URL', { reloadPage: true }); перезагружает страницу, но работает только для URL, то есть file.html. Не работает с хэштегом, например #home.   -  person Omar    schedule 15.09.2013
comment
Я попробую. Спасибо.   -  person GIJoeCodes    schedule 15.09.2013

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете попробовать это:

$('#productinfo').live('pageinit',function(event){
    swiper function...
});
person Oliver Marfin    schedule 28.10.2013

arrow_upward
0
arrow_downward

Я нашел решение этой проблемы, пытаясь решить что-то еще. Сайт, который я создавал, создан с использованием php. HTML-код уже был встроен, поэтому все страницы с информацией о продукте имели одинаковый идентификатор #product_info, а div, содержащий swiper, всегда имел идентификатор #product_image. Добавив функцию php к идентификатору #product_image, например:

#product_image<?php echo $product_id; ?>

и давая swiper такой же, как в

var mySwiper = new Swiper('#product_image<?php echo $product_id; ?>',{

Мне удалось избавиться от необходимости перезагружать страницу. Надеюсь, это кому-то поможет.

person GIJoeCodes    schedule 02.04.2014