I'm really hoping someone can help me out with this. I have been experimenting with jQuery Mobile and have run into a problem. The problem is regarding a jQuery lightbox called Swipebox. The plugin itself works fine to a point so I'll highlight when it doesn't work
The CSS and script are situated in the head of my document. The call script is situated inside the body, but inside the tag.
The only time it doesn't work is if the page itself acts as the 'first page'. On the initial load, it works. But then if I navigate away from that page and return via AJAX loading, then the plugin stops working.
I don't know an awful lot about jQuery Mobile at the moment but I assuming that when the 'first page' is loaded for the first time (or refreshed possibly), it gets cached. Hence why when returning to the first page, from another page, the loading time is instant. But unfortunately it seems to totally break or not include the script.
Is anyone able to point me in the right direction with this. A basic layout of my markup is below. Any advice would be much appreciated
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/templates/assets/css/mobile/swipebox.css" />
<script src="/templates/assets/js/mobile/jquery.swipebox.js"></script>
</head>
<body>
<div data-role="page" class="padded-bottom" data-dom-cache="false">
<section data-role="content">
<!--Gallery images-->
</section><!--content-->
<script>
$(".swipebox").swipebox({hideBarsDelay : 0});
</script>
</div><!-- page -->
</body>
</html>
At the moment I have the following in 'Template 1'
<script>
$('#hotel').on('pageload', function() {
$(".swipebox").swipebox({hideBarsDelay : 0});
$(".test").text("jQuery works");
});
</script>
and this for 'Template 2'
<script>
$('#hotel-view').on('pageinit', function() {
$(".swipebox").swipebox({hideBarsDelay : 0});
$(".test").text("jQuery works");
});
</script>
This makes the plugin work perfectly on 'Template 2' regardless of how its loaded. But the plugin is also being used on 'Template 1'. Under the 'Insider' tab. It seems the plugin cannot work perfectly on both pages. The problem has progressed rather than been solved :)
