Javascript slideshow not displaying the height of images
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开发者_JAVA百科',
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"><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"> <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?
Well i find that jquery cycle sets the images position css attribute to absolute which causes the parent container with no definite height.
- Either set the height attribute of the parent container(recommeded)
- make some amendment in jquery cycle js file and find the max height among the listed images and set it to the parent.
精彩评论