blackrid
@blackrid
Стараюсь узнать всё понемногу

Почему в jQuery Mobile при переходе на страницу фотогалереи Photoswipe та не инициализируется?

Добрый день! Кратко опишу ситуацию.
Имеется мобильная версия сайта с каталогом объектов недвижимости. При просмотре информации об объекте предлагается перейти на страницу фотогалереи. Вследствие особенностей движка (нестандартный, самописный) не получается использовать структуру из нескольких вложенных страниц
<div  data-role="page" id="home"> 
...
</div> 
<div  data-role="page" id="gallery"> 
...
</div>

, так как при переходе по ссылке "document.php#gallery" происходит переход на главную страницу сайта. Я думаю, что это дело движка, но его код закрыт, и в чем дело, разобраться не получилось.
Решено было сделать отдельный файл mobile_gallery.xphp с кодом фотогалереи и делать ссылку на него:
<a id="gal_but" href="/mobile_gallery.xphp" data-role="button" data-transition="slide">

Возникает следующая проблема:
При загрузке страницы mobile_gallery.xphp не происходит ее инициализация, вследствие чего не инициализируются скрипты Photoswipe. Причем, если обновить эту страницу клавишей F5, то инициализация проходит нормально. Код страницы:
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>PhotoSwipe</title>
    <link rel="stylesheet" href="http://photoswipe.com/latest/lib/jquery.mobile-1.0a4.1/jquery.mobile-1.0a4.1.min.css">
    <link href="http://photoswipe.com/latest/photoswipe.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="http://photoswipe.com/latest/lib/jquery-1.5.2.min.js"></script>
    <script type="text/javascript" src="http://photoswipe.com/latest/lib/jquery.mobile-1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
    <script type="text/javascript" src="http://photoswipe.com/latest/lib/simple-inheritance.min.js"></script>
    <script type="text/javascript" src="http://photoswipe.com/latest/lib/jquery.animate-enhanced.min.js"></script>
    <script type="text/javascript" src="http://photoswipe.com/latest/code-photoswipe-jQuery-1.0.8.min.js"></script>
    <style type="text/css">
      div.gallery-row:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }
      div.gallery-item { float: left; width: 33%; }
      div.gallery-item a { display: block; margin: 5px; border: 1px solid #3c3c3c; }
      div.gallery-item img { display: block; width: 100%; height: auto; }
      #Gallery1 .ui-content { overflow: hidden; }
    </style>
    <script type="text/javascript">
      $( document ).ready( function() {                                                                                                                        
        $( "#Gallery1 a" ).photoSwipe();                                                                                                                       
      } );  
    </script>
  </head>
  <body>
    <div data-role="page" id="Gallery1" class="gallery-page">
      <div data-role="content">
        <div class="gallery">
          <div class="gallery-row">
            <div class="gallery-item">
              <a href="http://photoswipe.com/latest/examples/images/full/001.jpg">
                <img src="http://photoswipe.com/latest/examples/images/thumb/001.jpg" alt="Image 001">
              </a>
            </div>
            <div class="gallery-item">
              <a href="http://photoswipe.com/latest/examples/images/full/002.jpg">
                <img src="http://photoswipe.com/latest/examples/images/thumb/002.jpg" alt="Image 002">
              </a>
            </div>
            <div class="gallery-item">
              <a href="http://photoswipe.com/latest/examples/images/full/003.jpg">
                <img src="http://photoswipe.com/latest/examples/images/thumb/003.jpg" alt="Image 003">
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Как сделать правильную ссылку на галерею, чтобы страница проинициализировалась? Ссылка типа rel="external" не работает.
Файлы jQuery v.1.5.2 и qQuery Mobile v.1.0a4.1 взяты с сайта Photoswipe со страницы с примерами - photoswipe.com/latest/examples/jquery-mobile.html
  • Вопрос задан
  • 2990 просмотров
Пригласить эксперта
Ответы на вопрос 1
blackrid
@blackrid Автор вопроса
Стараюсь узнать всё понемногу
Решил эту проблему, включив в ссылку параметр onclick:
<a href="mobile_gallery.xphp" data-transition="slide" onclick="window.location.href = 'mobile_gallery.xphp'">

Правда, на секунду появляется ajax'овая ошибка загрузки. Как бы ее тоже убрать?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы