开发者

Javascript slideshow not displaying the height of images

开发者 https://www.devze.com 2023-01-18 14:25 出处:网络
Im using the following code on my website Contact Lenses Aus <p> <script type=\"text/javascript\">

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.

  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.
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号