Javascript slideshow not displaying the height of images

Question

Hello

Im using the following code on my website Contact Lenses Aus

<p>
<script type="text/javascript">
    // <![CDATA[
    jQuery(document).ready(function() {
        slider = jQuery('#slider-content');
        slider.before('<div id="stripNav0" class="stripNav">').cycle({
            fx: 'scrollLeft',
            timeout: 6000,
            speed: 1000,
            next: '.stripNavL',
            prev: '.stripNavR',
            pager: '#stripNav0'
        });
    });
    nextLink = jQuery('#stripNavLa');
    prevLink = jQuery('#stripNavRa');
    changeFx = function(fx) {
        opts = $(slider).data('cycle.opts');
        opts.currFx = fx;
        opts.fx = fx;
        slider.cycle.saveOriginalOpts(opts);
    }
    // ]]>
</script>
</p>
<div class="slider-wrap">
<div id="stripNavL0" class="stripNavL" onclick="changeFx('scrollRight')"><a id="stripNavLa" href="#">Left</a></div>
<div id="slider-content" class="slider-wrap"><a href="http://www.contactlensesaus.com/index.php/coloured-contact-lenses/blue-contact-lens.html"&gt;&lt;img src="{{media url="home_banner.jpg"}}" alt="Blue Contact Lenses" /></a><a href="http://www.contactlensesaus.com/specials/special-1.html" target="_blank"><img src="{{media url="temp_home_banner.jpg"}}" alt="Contact Lenses Online" /></a><a href="http://www.contactlensesaus.com/index.php/coloured-contact-lenses/other-coloured-lens.html"&gt; <img src="{{media url="home_banner_3.jpg"}}" alt="Coloured Contact Lenses" /></a></div>
<div id="stripNavR0" class="stripNavR" onclick="changeFx('scrollLeft')"><a id="stripNavRa" href="#">Right</a></div>
</div>
<!-- .slider-wrap -->

Now, this all works fine on some systems.. but i keep finding on my laptop that the images on first load wont display the height, and end up getting hidden. Does anyone know a way to fix this?

Answer 1

Well i find that jquery cycle sets the images position css attribute to absolute which causes the parent container with no definite height.

1. Either set the height attribute of the parent container(recommeded)
2. make some amendment in jquery cycle js file and find the max height among the listed images and set it to the parent.