Итак, мне удалось собрать сценарий для меня, когда я нажимаю на свое изображение, оно показывает всплывающее окно, а когда я провожу пальцем влево или вправо по изображению, оно показывает скрытые изображения в моем javascript. Однако, когда я добрался до своей индексной страницы, и я пошел в дом HTML. Когда я нажимаю на фотографию, функции смахивания не работают до того, как мне нужно войти в свой файл javascript, и, в основном, переписывают функцию смахивания, прежде чем она снова заработает, но затем перестанут работать, когда я вернусь на свою индексную страницу.
вот указатель к моему сайту: http://titan.dcs.bbk.ac.uk/~aaldib01/mad/madfma/index.html
Тогда Дома> Террасы с 2 спальнями> house1.html
Есть ли способ для меня, чтобы исправить проблему или улучшить мой JavaScript, чтобы это больше не было проблемой?
Спасибо.
* обратите внимание, что проблема, на мой взгляд, заключается в том, где находится код изображения. (я удалил большую часть другого кода, так как это не влияет на него)
Я пытался использовать .bind ("swiperight", function (), но он дает мне тот же результат. Он работает один раз, потом не работает после перехода на index.html>> house1.html
Вот код house1.html (data-role = "content":
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes">
<link rel="stylesheet" href="css/themes/blue.min.css" />
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="images.js"></script>
<title>House 1</title>
</head>
<body>
<div data-role="page" id="house1" data-theme="a" data-dom-cache="true">
<div data-role="content">
<a href="#popupImg" data-rel="popup" data-position-to="window" data-transition="pop">
<img src="pictures/houses/house1/image1.PNG"/ style="width: 50%;"/>
<div data-role="popup" id="popupImg" data-theme="a" class="ui-corner-all">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<img src="pictures/houses/house1/image1.PNG" style="width: 100%;" />
</a>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar" data-id="footernav">
<ul>
<li><a href="about.html">About</a></li>
<li><a href="">Favourites</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
А вот файл javascript:
$(document).ready(function () {
var i = 0;
var imgURL = [];
imgURL.push('pictures/houses/house1/image1.PNG');
imgURL.push('pictures/houses/house1/image2.PNG');
imgURL.push('pictures/houses/house1/image3.PNG');
imgURL.push('pictures/houses/house1/image4.PNG');
$("#house1").on("swiperight",function () {
if (i < (imgURL.length - 1)) {
i++
} else {
i = 0;
}
var imgStr = "<img src=" + imgURL[i] + " style='width:100%'>";
$('#popupImg').html(imgStr);
});
$("#house1").on("swipeleft",function () {
if (i > 0) {
i--
} else {
i = (imgURL.length - 1);
}
var imgStr = "<img src=" + imgURL[i] + " style='width:100%'>";
$('#popupImg').html(imgStr);
});
});