Menu
The issues is that the slider is not displaying properly when a user first visits the site. In testing the slider worked fine.
Or actually there was problem that it would not load when first visiting the page, but would then show up when (and only when) you refresh the page. But otherwise the slider shows up but not the images
I looked at the documentation from Zurb at Zurbs documentation for the Orbit slider and they have a sample file, That original demo file has a link above the images (which I removed)
I then searched more on Google using the phrase about this topic using the keyword "orbit preload images" and found a One solution with a preload function. Below is the code that I used to preload (I only modified the path to the images)
<script language="javascript">
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
});
}
preload([
'../images/products/mill/slider/dentist.jpg',
'../images/products/mill/slider/side.jpg',
'../images/products/mill/slider/before.jpg',
'../images/products/mill/slider/after.jpg',
'../images/products/mill/slider/radio.jpg'
]);
</script>
I went ahead and added script but it is still not loading. The complete code for that page is viewable in a Gist on GitHub
The code for the setup of the image slider is viewable in a Gist on GitHub
The site is hosted on a server that is in a .net environment that does not support php.
469
I had the same issue and after some research, found the answer that works for me; Basically, you can use jquery to hide the slider whilst it's loading. See also, this link for further info: how to show div #loading whilst div #content loads
Looking at your code, this should work (untested)
In the <head> section, add this;
<script type="text/javascript">
jQuery(document).ready(function() {
// hide orbit slider on load when user browses to page
$('#featured.orbit').hide(); // hide div, may need to change id to match yours
$('.loading').show(); // show the loading gif instead
// then when the window has fully loaded
$(window).bind('load', function() {
$('.loading').hide(); // hide loading gif
$('#featured.orbit').fadeIn('slow'); // show orbit
});
});
</script>
In your html page that contains the orbit slider code (content copied from your page)
<!-- =======================================
ORBIT SLIDER CONTENT
======================================= -->
<div style="width:100%;">
<div style=" max-width:480px; margin: 0px auto;">
<div id="featured" >
<!-- your content etc..... -->
<span class="orbit-caption" id="radioCaption">Radiograph shows crown seated with
excellent marginal integrity</span>
</div>
</div>
<?php //
// load the loading image - you need to add one to your image directory
// see here to generate one: http://www.ajaxload.info/ ?>
<div class="loading">
<img src="http://www.yourdomain.com/path/to/folder/loading.gif"/>
</div>
</div> <!-- end twelve columns-->
In your CSS you need to hide the #featured div
#featured { display: none; background: #f4f4f4; height: 600px;}
#featured img { display: none; }
#featured.orbit { background: none; }
.loading {margin: 0 auto;text-align:center;margin:30px; }
Hope that helps!
153
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
