Добрый день! Кратко опишу ситуацию.
Имеется мобильная версия сайта с каталогом объектов недвижимости. При просмотре информации об объекте предлагается перейти на страницу фотогалереи. Вследствие особенностей движка (нестандартный, самописный) не получается использовать структуру из нескольких вложенных страниц
<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 
