Flash of Un-styled Content using Malsup Cycle?

Flash of Un-styled Content using Malsup Cycle?

Hi

I'm working on a website and using the cycle plug in to display manufacturers logos. The site also includes a carousel plugin on a different part of the page.

My problem is that all the slideshow images appear for a second when the page is opened on an iPhone & iPad (works fine on PC & android). I've tried the suggestions on this website & malsup's faq and it doesn't fix the prooblem, the only way I get it to work correctly is to remove the Carousel script that succeeds it.

I'm not sure how to fix the problem, and my jQuery skill is not best. Any help would be greatly  appreciated 

  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <!-- TemplateBeginEditable name="doctitle" -->
  7. <title>GDS Henley</title>
  8. <!-- TemplateEndEditable -->
  9. <style type="text/css"> 
  10. body {
  11. background-image: url(../images/banners/bgGrad.gif);
  12. background-repeat: repeat-x;
  13. background-color: #777A7A;
  14. }

  16.       .example-desc {
  17.         margin:3px 0;
  18.         padding:5px;
  19.       }

  21.       #carousel {
  22.         width:632px;
  23.         height:550px;
  24.         position:relative;
  25.         clear:both;
  26.         overflow:hidden;
  27.       }
  28.  
  29.       #carousel img {
  30.         visibility:hidden; /* hide images until carousel can handle them */
  31.        
  32.       }

  34.       .split-left {
  35.         width:450px;
  36.         float:left;
  37.       }
  38.  
  39.       .split-right {
  40.         width:400px;
  41.         float:left;
  42.         margin-left:10px;
  43.       }
  44.  
  45.       #callback-output {
  46.         height:250px;
  47.         overflow:scroll;
  48.       }
  49.  
  50.       textarea#newoptions {
  51.         width:430px;
  52.       }
  53.  
  54.  #wrapper {
  55.     width: 800px; /* 780px is just wide enough to fill and 800px screen */
  56.     margin: 0 auto; /* It's important to set the margin to auto if you want the layout to center */
  57.     text-align: middle;
  58. }

  60. #wrapper2 {
  61.     width: 800px; /* 780px is just wide enough to fill and 800px screen */
  62.     margin: 0 auto; /* It's important to set the margin to auto if you want the layout to center */
  63.     text-align: middle;
  64. }

  66. #body1 {
  67. width: 632px;
  68. margin: 0;
  69. text-align: left;
  70. float:left;
  71. }

  73. #body2 {
  74. width: 148px;
  75. margin: 0;
  76. text-align: left;
  77. float:right;
  78. margin-top:0px;
  79. margin-left:0px; 
  80. }

  82. .headingText {
  83. font: Verdana, Geneva, sans-serif;
  84. font-size:25px;
  85. text-align:left;
  86. color:#FFFFFF;
  87. }

  89. .mainText {
  90. font: Verdana, Geneva, sans-serif;
  91. font-size:15px;
  92. text-align:left;
  93. color:#FFFFFF;
  94. }
  95. </style>

  97. <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>

  99. <script src="http://malsup.github.com/jquery.cycle2.js"></script>

  101. <script type="text/javascript">

  103. function MM_swapImgRestore() { //v3.0
  104.   var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
  105. }
  106. function MM_preloadImages() { //v3.0
  107.   var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  108.     var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  109.     if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
  110. }

  112. function MM_findObj(n, d) { //v4.01
  113.   var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  114.     d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  115.   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  116.   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  117.   if(!x && d.getElementById) x=d.getElementById(n); return x;
  118. }

  120. function MM_swapImage() { //v3.0
  121.   var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  122.    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
  123. }
  124. </script>

  126.     <script type="text/javascript" src="../JS/jquery.waterwheelCarousel.js"></script>
  127.     <script type="text/javascript">
  128.       $(document).ready(function () {
  129.         var carousel = $("#carousel").waterwheelCarousel({
  130.           flankingItems: 0,
  131.  opacityMultiplier: 2,
  132.  imageNav: true,
  133.           movingToCenter: function ($item) {
  134.             $('#callback-output').prepend('movingToCenter: ' + $item.attr('id') + '<br/>');
  135.           },
  136.           movedToCenter: function ($item) {
  137.             $('#callback-output').prepend('movedToCenter: ' + $item.attr('id') + '<br/>');
  138.           },
  139.           movingFromCenter: function ($item) {
  140.             $('#callback-output').prepend('movingFromCenter: ' + $item.attr('id') + '<br/>');
  141.           },
  142.           movedFromCenter: function ($item) {
  143.             $('#callback-output').prepend('movedFromCenter: ' + $item.attr('id') + '<br/>');
  144.           },
  145.           clickedCenter: function ($item) {
  146.             $('#callback-output').prepend('clickedCenter: ' + $item.attr('id') + '<br/>');
  147.           }
  148.         });
  150. $("#waterwheel-carousel").waterwheelCarousel({
  151.   clickedCenter: function($clickedItem) {
  152.     // obtain the image src of the clicked center item
  153.     var clickedImageSrc = $clickedItem.attr("src");
  154.     // build a new image HTML image element, and fill in the src
  155.     $.facebox({ image: clickedImageSrc });
  156.   }
  157. });

  159.         $('#prev').bind('click', function () {
  160.           carousel.prev();
  161.           return false
  162.         });

  164.         $('#next').bind('click', function () {
  165.           carousel.next();
  166.           return false;
  167.         });

  169.         $('#reload').bind('click', function () {
  170.           newOptions = eval("(" + $('#newoptions').val() + ")");
  171.           carousel.reload(newOptions);
  172.           return false;
  173.         });

  175.       });
  176.     </script>

  178. <!-- include Cycle plugin -->

  180. >

  182. <link href="../JS/defunkt-facebox-cbe32e1/examples/css/example.css" media="screen" rel="stylesheet" type="text/css"/>
  183.  <link href="../JS/defunkt-facebox-cbe32e1/src/facebox.css" media="screen" rel="stylesheet" type="text/css" />
  184. <script src="../JS/defunkt-facebox-cbe32e1/src/facebox.js" type="text/javascript"></script> 
  185.  
  186.   <script type="text/javascript">
  187.     jQuery(document).ready(function($) {
  188.       $('a[rel*=facebox]').facebox({
  189.         loadingImage : 'http://www.gdshenley.com/JS/defunkt-facebox-cbe32e1/src/loading.gif',
  190.         closeImage   : 'http://www.gdshenley.com/JS/defunkt-facebox-cbe32e1/src/closelabel.png'
  191.       })
  192.     })
  194.   </script>

  196. <!-- TemplateBeginEditable name="head" -->
  197. <!-- TemplateEndEditable -->
  198. <link href="../styles.css" rel="stylesheet" type="text/css" />
  199. </head>

  201. <body onload="MM_preloadImages('../images/buttons/homePage/homeOn.png','../images/buttons/homePage/pricesOn.png','../images/buttons/homePage/contactOn.png','../images/products/pro1_On.gif','../images/products/pro2_On.gif','../images/products/pro3_On.gif','../images/products/pro6_On.gif','../images/buttons/homePage/pricesOff.png','../images/buttons/homePage/contactOff.png','../images/buttons/homePage/homeOff.png','../images/buttons/homePage/productsOff.png','../images/buttons/homePage/productsOn.png','../images/logos/logo.gif','../images/banners/bgGrad.gif','../images/products/pro7_On.gif','../images/products/pro4_On.gif','../images/banners/name.gif','../images/banners/bgGrad.gif','../images/banners/line1.png','../images/banners/line2.png','../images/banners/line3.png','../images/logos/garadorLogo_1.png','../images/logos/hormannLogo_1.png','../images/logos/swsLogo_1.png')"> 
  202.  
  203. <div id="wrapper">

  205. <div align="center"> 

  207. <div align="left">

  209. <img src="../images/logos/logo.png" width="138" height="138" /><img src="../images/banners/name.gif" width="662" height="138" /></div>

  211. <div align="right"><img src="../images/banners/line1.png" width="800" height="5" /></div></div>

  213. <div align="right">
  214. <a href="../index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('homeImage','','../images/buttons/homePage/homeOn.png',1)"><img src="../images/buttons/homePage/homeOff.png" name="homeImage" width="127" height="49" border="0" id="homeImage" /></a>

  216. <a href="../GDSProducts.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','../images/buttons/homePage/productsOn.png',0)"><img src="../images/buttons/homePage/productsOff.png" name="Image5" width="127" height="49" border="0" id="Image5" /></a>

  218. <a href="../GDSPrices.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('pricesImage','','../images/buttons/homePage/pricesOn.png',1)"><img src="../images/buttons/homePage/pricesOff.png" name="pricesImage" width="127" height="49" border="0" id="pricesImage" /></a>

  220. <a href="../GDSContact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contactImage','','../images/buttons/homePage/contactOn.png',1)"><img src="../images/buttons/homePage/contactOff.png" name="contactImage" width="140" height="49" border="0" id="contactImage" /></a>

  222. </div>

  224. <div align="center">

  226. </div>

  228. </div>


  231. <div id="wrapper2">
  232. <div id="body1" align="left">
  233.   <img src="../images/banners/line3.png" width="632" height="5" />
  234. <!-- TemplateBeginEditable name="titleRegion1" --><!-- TemplateEndEditable --><img src="../images/banners/line2.png" width="632" height="5" />
  235. <!-- TemplateBeginEditable name="mainText1" -->
  236. <p class="mainText">&nbsp;</p><!-- TemplateEndEditable --></div>

  238. <div id="body2" align="right">

  240. <div class="cycle-slideshow"
  241. data-cycle-speed="300"
  242. data-cycle-loader="wait"
  243.         data-cycle-timeout="2000"
  244.         data-cycle-random="true">
  245.        
  246.     <img src="../images/logos/garadorLogo_1.png">
  247.     <img src="../images/logos/hormannLogo_1.png">
  248.     <img src="../images/logos/swsLogo_1.png">
  249. </div>
  250. </ br>

  252. </div></div></div></div>
  253. </body>
  254. </html>

    • Topic Participants

    • matt