[jQuery] jQuery cycle IE issue
Hi,
I've tried implementing jQuery cycle on my portfolio and it works in FF3 and
Safari but not in IE. I've spent 24 hours researching and I just don't know
how to fix it. I've checked for commas, I've tried altering the cleartype
and cleartypeNoBg because I'm using .pngs but that still doesn't make a
difference. I've disabled all of my other jquery scripts and it still
doesn't work.
I have 4 images in my slideshow and the first image shows but I think the
problem is that in IE the height and width of the rest of the images is set
to 0px. I'm also getting the error '[cycle] DOM not ready, queuing
slideshow'
This is my jQuery:
<!--[if lte IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js"
type="text/javascript"></script>
<![endif]-->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!-- LOCAL SCROLL JAVASCRIPT -->
<script type='text/javascript' src='js/jquery.scrollTo-min.js'></script>
<script type='text/javascript' src='js/jquery.localscroll-min.js'></script>
<script type='text/javascript' src='js/init.js'></script>
<!-- EASY SLIDER JAVASCRIPT FOR TYPE AND PHOTOGRAPHY PORTFOLIOS -->
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
controlsBefore: '<p id="controls">',
controlsAfter: '',
auto: false,
continuous: false
});
$("#slider2").easySlider({
controlsBefore: '<p id="controls2">',
controlsAfter: '',
prevId: 'prevBtn2',
nextId: 'nextBtn2'
});
});
</script>
<!-- JAVASCRIPT CYCLE JAVASCRIPT FOR WEB AND PRINT PORTFOLIOS -->
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type="text/javascript">
$('#slideshow1').cycle({
fx: 'fade',
cleartype: true,
speed: 1000,
timeout: 0,
prev: '#prev',
next: '#next'
});
$('#slideshow2').cycle({
fx: 'fade',
cleartype: true,
speed: 1000,
timeout: 0,
prev: '#prev2',
next: '#next2'
});
</script>
This is my css:
.slideshow-image {
margin: 63px 0 0 57px;
position: absolute;
display: block;
}
.pics {
height: 463px;
width: 841px;
padding:0;
margin:0;
overflow: hidden
}
.pics img {
height: 463px;
width: 841px;
padding: 0px;
border: none;
top:0;
left:0
}
All of this is from http://www.katherinecory.com. Does anyone have any
ideas? I'd be eternally grateful if you do!
Thank you.
--
View this message in context: http://www.nabble.com/jQuery-cycle-IE-issue-tp25457791s27240p25457791.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.