CODEWITHSUNDEEP
jquery-mobilepage-init
dudenesspa
dudenesspa

Reputation: 11

JQM - Have multiple pages run Royal Slider - pageinit not working

I originally had my pages external. However, I wanted to take advantage of page transitions so I imported my pages that each contain Royal Slider into my index.html. However, Royal Slider only loads correctly on the first page and not on the other. I read about using pageinit but it is not working. I also read about pagebeforeshow and page change which will run the code every time a page change occurs rather than once like pageinit. Can someone take a look at my code and help out?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>iPhone Quick Reference App</title>
<link rel="stylesheet" href="js/css/amwater.min.css" />
<link rel="stylesheet" href="js/css/jquery.mobile.structure-1.3.1.min.css" />
<script src="js/jquery-2.0.2.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<script src="js/royalslider/jquery.royalslider.min.js" /></script>
<link href="js/royalslider/royalslider.css" rel="stylesheet">
<link href="js/royalslider/skins/minimal-white/rs-minimal-white.css" rel="stylesheet">

<script type="text/javascript">
$(document).on('pagebeforeshow','[data-role=page]', function() {
    jQuery(document).ready(function($) {
  $('#full-width-slider').royalSlider({
    arrowsNav: false,
    loop: false,
    keyboardNavEnabled: true,
    controlsInside: false,
    imageScaleMode: 'fit',
    arrowsNavAutoHide: false,
    autoScaleSlider: true, 
    autoScaleSliderWidth: 640,     
    autoScaleSliderHeight: 1057,
    controlNavigation: 'bullets',
    thumbsFitInViewport: false,
    navigateByClick: true,
    startSlideId: 0,
    autoPlay: false,
    transitionType:'move',
    globalCaption: false,
    deeplinking: {
      enabled: true,
      change: false
    },
    /* size of all images http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/adding-width-and-height-properties-to-images */
    imgWidth: 640,
    imgHeight: 1136,
  });
});
});
</script>

</head>
<body>
<div data-role="page" id="home"  data-theme="a">
  <div data-role="content"> <img src="images/logo.png" width="100%" /> <a href="#deleteapp" data-role="button" data-transition="slide" data-mini="false" data-theme="a">Deleting an App</a> <a href="#quitapp" data-role="button" data-transition="slide" data-mini="false" data-theme="a">Quitting an App</a> <a href="#wireless" data-role="button" data-transition="slide" data-mini="false" data-theme="a">Accessing AmWater Guest Wireless</a> <a href="#appidcc" data-role="button" data-transition="slide" data-mini="false" data-theme="a">Creating an Apple ID w/ Credit Card</a> <a href="#appidnocc" data-role="button" data-transition="slide" data-mini="false" data-theme="a">Creating an Apple ID w/o Credit Card</a> <a href="#hotspot" data-role="button" data-transition="slide" data-mini="false" data-theme="a">Enabling Your Personal Hotspot</a> <a href="#password" data-role="button" data-transition="slide" data-mini="false" data-theme="a">Syncing Your Work Email Password</a> <a href="#icloud" data-role="button" data-transition="slide" data-mini="false" data-theme="a">Backing Up Your iPhone to iCloud</a> <a href="#contacts" data-role="button" data-transition="slide" data-mini="false" data-theme="a">Accessing American Water Contacts</a>
    </ul>
  </div>
</div>
<div data-role="page" id="quitapp" data-theme="a">
  <div data-role="header" data-theme="a"> <a href="#home" data-rel="back" data-role="button" data-theme="a" data-transition="slide" data-inline="true">Menu</a>
    <h1></h1>
  </div>
  <div id="full-width-slider" class="heroSlider rsMinW">
    <div class="rsContent"> <img class="rsImg" src="images/quit/0.jpg" alt=""> </div>
    <div class="rsContent"> <img class="rsImg" src="images/quit/1.jpg" alt=""> </div>
    <div class="rsContent"> <img class="rsImg" src="images/quit/2.jpg" alt=""> </div>
    <div class="rsContent"> <img class="rsImg" src="images/quit/3.jpg" alt=""> </div>
    <div class="rsContent"> <img class="rsImg" src="images/quit/4.jpg" alt=""> </div>
    <div class="rsContent"> <img class="rsImg" src="images/quit/5.jpg" alt=""> </div>
  </div>
</div>
<div data-role="page" id="deleteapp" data-theme="a">
  <div data-role="header" data-theme="a"> <a href="#home" data-role="button" data-rel="back" data-theme="a" data-transition="slide" data-inline="true">Menu</a>
    <h1></h1>
  </div>
  <div id="full-width-slider" class="heroSlider rsMinW">
    <div class="rsContent"> <img class="rsImg" src="images/delete/1.jpg" alt=""> </div>
    <div class="rsContent"> <img class="rsImg" src="images/delete/2.jpg" alt=""> </div>
    <div class="rsContent"> <img class="rsImg" src="images/delete/3.jpg" alt=""> </div>
    <div class="rsContent"> <img class="rsImg" src="images/delete/4.jpg" alt=""> </div>
    <div class="rsContent"> <img class="rsImg" src="images/delete/5.jpg" alt=""> </div>
  </div>
</div>
</body>
</html>

Upvotes: 0

Views: 862

Answers (1)

dudenesspa
dudenesspa

Reputation: 11

I think I got it. had to navigate down to the #full-width-slider - now script runs for each page.

<script type="text/javascript">
$(document).on('pagechange', function() {
  $('[data-role=page] #full-width-slider').royalSlider({
    arrowsNav: false,
    loop: false,
    keyboardNavEnabled: true,
    controlsInside: false,
    imageScaleMode: 'fit',
    arrowsNavAutoHide: false,
    autoScaleSlider: true, 
    autoScaleSliderWidth: 640,     
    autoScaleSliderHeight: 1057,
    controlNavigation: 'bullets',
    thumbsFitInViewport: false,
    navigateByClick: true,
    startSlideId: 0,
    autoPlay: false,
    transitionType:'move',
    globalCaption: false,
    deeplinking: {
      enabled: true,
      change: false
    },
    /* size of all images http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/adding-width-and-height-properties-to-images */
    imgWidth: 640,
    imgHeight: 1136,
  });
});
</script>

Upvotes: 1

Related Questions