Chrome Image slider issue

Question

I'm working on this page And you can only see 1/9th of the image on the slider when loaded on Google chrome. It happens when refreshed or sometimes at the initial load. It shows very well on every other browser. Any suggestions on how to make it load fully. The function is as shown below.

<script type="text/javascript">
        $(function(){
            $('#slides').slides({
                preload: true,
                preloadImage: 'img/loading.gif',
                play: 5000,
                pause: 4000,
                hoverPause: true
            });
        });
    </script>

Answer 1

it seems to me that the script is trying to calculate the height of the container based on the image size and sometimes is failing, try this css first

.slides_control{
  min-height:466px;
}

Answer 2

Your problem resides in the div with class "slides_control", it seems to have an inline height defined at 19px. One solution if you're dynamically changing this height value is to simply remove it from the inline styling.

Edit: removing it doesn't actually work, you should set it to a more desired height. When I removed it, none of the images were visible. It seems that you may have a problem with how you're dynamically changing the height of this div, as it seems to be failing on occasion.

Edit 2: Specifically when rendered properly, it should be a height of 466px.

Edit 3: I also noticed that your loading.gif is failing to load in. this may be the underlying cause of your plugin failing to initialize properly. Just a thought, as I've never actually used this specific plugin.