I created a jQuery slideshow, got a set of 6 identically sized images, and set all of them to 100% in my CSS code so they would resize with the window (This is a fullscreen slideshow). However, once I initiate the slideshow by clicking, resizing no longer seems to work. The image stays the size it was after the first resize and never changes. I have toyed around with different jQuery plugins and I can't seem to find one that fits my needs. If possible, I would like to avoid adding another jQuery library (it makes me feel like a script kiddie) and solve this with the Cycle library, jQuery vanilla, css, javascript, html, etc.
Here is my current code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lorena Gaxiola</title>
<style type="text/css">
body {background: #222; font-family:Georgia, "Times New Roman", Times, serif; font-size:11px; margin:50px; color:#999}
ul li{line-height:20px;}
.new{margin-top:15px}
a{color:#fff; text-decoration:none; font-style:italic;}
a:hover{text-decoration:underline}
h1{font-size:16px; text-transform:uppercase; font-weight:normal; color:#fff; letter-spacing:1px;}
h2{font-size:12px; text-transform:uppercase; font-weight:normal; color:#999; letter-spacing:1px;}
#myslides img {height:100%; width:100%;}
</style>
<script type="text/javascript" src="jquery/jquery-1.10.1.js"></script>
<script type="text/javascript" src="jquery/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myslides').cycle({
fx: 'fade',
speed: 10,
next: '#myslides',
timeout: 0,
});
});
</script>
</head>
<body>
<center>
<div id="myslides">
<div id="img 1">
<center>
<img src="img/1.jpg"/>
</center>
</div>
<div id="img 2">
<center>
<img src="img/2.jpg"/>
</center>
</div>
<div id="img 3">
<center>
<img src="img/3.jpg"/>
</center>
</div>
<div id="img 4">
<center>
<img src="img/4.jpg"/>
</center>
</div>
<div id="img 5">
<center>
<img src="img/5.jpg"/>
</center>
</div>
<div id="img 6">
<center>
<img src="img/6.jpg"/>
</center>
</div>
</div>
</center>
</body>
</html>
So I actually managed to figure it out before anyone answered it. Really simple fix, just add
resizeContainer: false,
slideResize: false
to the cycle options, like so,
$(document).ready(function(){
$('#myslides').cycle({
fx: 'fade',
speed: 10,
next: '#myslides',
timeout: 0,
resizeContainer: false,
slideResize: false
});
});