Jquery cycle plugin image resizing issue opera

Question

I am using the cycle plugin within Joomla and it works fine on IE6,FF,SAFARI,CHROME however when you view it in OPERA breaking happens.

It loads fine but when it brings in the next slide and every consequent slide after that it re-sizes them to what i can only assume to be the browswe window's width and height.

here's my 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>

and finally 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>

hope I'm not the only one having this problem.

Answer 1

Hi

Try to use an older version of jQuery lib. I've been using 1.4.2 and had an identical problem. Changing for 1.3.2 solve it, but still You can try with an later one.

Answer 2

I also have this problem, i tried using the older library with no avail, and its happening in FF on mac too.

Answer 3

Hello, I was having the same problem, but found a solution, I'll explain.

I tried 1.3.2, 1.4, 1.4.2 versions of jquery If I use 1.3.2 or older, the plugin won't work on chrome and safari. The wierd thing is that it works perfectly on opera and all browsers localy on my computer, as soon as I put it online, it won't work.

I found the cause of my problem, I've got a < base href="{copixurl}" /> . If I get rid of it, it would work. Unfortunalty I can't, this tag is used to get the urls on the copixbased cms of the client, if I get rid of it, the internal links won't work anymore.

So was looking for a solution which would anable me to keep the < base href="{copixurl}" /> AND make the slide work on opera. I finaly got one, not very "clean", but I gave the slidshow images a css width and height, and I made it !important so that Opera would understand it DOES have to stay this way.

The code :

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

The jquery :

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

    });
});

The css :

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

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

It is the second part of the css code that would make Opera (Version 10.53) behave. !important enables to overwrite the Opera internal style sheet, DON'T remove it, it won't work anymore

I don't quite understand where my problem came from, but it now works. Of course this solution won't work if you have different size images, you may have to give a css class + css size for each of them.

I'm not very proud of this unclean solution, but it works for me so far, using 1.4.2 jquery

(sorry for my english, hope you understood what I was talking about)

Answer 4

saiko_sama provided me with the answer for IE6 and IE7, same !important addition to the css worked there as well.