Question

我在Joomla中使用循环插件，它在IE6，FF，SAFARI，CHROME上工作正常，但是当你在OPERA中查看它时会发生破坏。

它加载得很好，但是当它带来下一张幻灯片和之后的所有后续幻灯片时，它会将它们重新调整为我只能假设为浏览窗口的宽度和高度。

这是我的javascript

<script type="text/javascript">

$('.fullScreen').cycle({ 
        speed:    1000, 
        timeout:  100
    });

</script>

CSS

<script type="text/css">

.fullScreen {
 margin-left: 0px;
 height: 355px;
 clear: both;
 width: 475px;
 z-index: -1;
 overflow: hidden;
}

</script>

最后是HTML

<div class="fullscreen">

    <img width="475px" src="images/someimage1.jpg" />
    <img width="475px" src="images/someimage2.jpg" />
    <img width="475px" src="images/someimage3.jpg" />

</div>

希望我不是唯一有这个问题的人。

Answer 1

jQuery循环忽略内联样式，所以：

<img src="/images/img.jpg" width="400" height="300" style="width:400px;height:300px">

评估为：

<img src="/images/image.jpg">

没用！

..但...

添加如下内容：

<style>
    #cycle img {width:400px;height:300px}
</style>

它有效，yeaaaa

Answer 2

尝试使用旧版本的jQuery lib。我一直在使用1.4.2并遇到了同样的问题。更改为1.3.2解决了它，但仍然可以尝试使用稍后的版本。

Answer 3

我遇到了同样的问题，但找到了解决方案，我会解释一下。

我尝试了jquery的1.3.2,1.4,1.4.2版本如果我使用1.3.2或更早版本，该插件将不适用于chrome和safari。奇怪的是，它完全适用于歌剧和我计算机上的所有浏览器，只要我把它放在网上，它就行不通。

我找到了问题的原因，我有一个＆lt; base href =“{copixurl}”/＆gt; 。如果我摆脱它，它会工作。不幸的是，我不能，这个标签用于获取客户端基于copix的cms上的URL，如果我摆脱它，内部链接将不再起作用。

所以我正在寻找一种解决方案，让我能够保持＆lt; base href =“{copixurl}”/＆gt;并使幻灯片适用于歌剧。我最终得到一个，不是很“干净”，但我给了滑动图像宽度和高度的css，我做了它！重要的是让Opera明白它必须保持这种方式。

代码：

<div id="slideshow">

<img width="500" height="270" alt=" img" src="documents/fck/image/slideshow/img1.png" /> 
<img width="500" height="270" alt="img" src="documents/fck/image/slideshow/img2.png" /> 
<img width="500" height="270" alt="img" src="documents/fck/image/slideshow/img3.png" />
 <img width="500" height="270" alt="img" src="documents/fck/image/slideshow/img4.png" /> 

<img width="500" height="270" alt="img" src="documents/fck/image/slideshow/img5.png" /></div>

jquery：

$(document).ready(function() {
    $('#slideshow').cycle({
        fx: 'fade', speed:  4000 ,   pause:  5 

    });
});

css：

#slideshow{
width:500px ;
height: 270px ;
}

#slideshow img{
width:500px !important;
height: 270px !important;
}

这是css代码的第二部分，它将使Opera（版本 10.53）表现。 ！important可以覆盖Opera内部样式表，不要删除它，它将不再起作用

我不太明白我的问题来自哪里，但它现在有效。当然，如果你有不同大小的图像，这个解决方案将不起作用，你可能需要为每个图像提供一个css类+ css大小。

我对这个不干净的解决方案并不感到自豪，但到目前为止它对我有用，使用1.4.2 jquery

（对不起我的英语，希望你明白我在说什么）

Answer 4

saiko_sama为我提供了IE6和IE7的答案，同样重要的是css也在那里工作。

Jquery循环插件图像调整大小问题歌剧

4 个答案: