Utilising the cycle.js code on a Responsive website

The solution that worked for me as found here: http://forum.jquery.com/topic/integrate-cycle-plugin-in-a-responsive-layout-using-media-queries

HTML code

<div>
<div>
<img src=”image1.jpg” alt=””  />
<img src=”image2.jpg” alt=””  />
<img src=”image3.jpg” alt=””  />
<img src=”image4.jpg” alt=””  />
</div>

<div>
<ul>
<li><a href=”image1.jpg”><img src=”image1-120×120.jpg” alt=”” /></a></li>
<li><a href=”image2.jpg”><img src=”image2-120×120.jpg” alt=”” /></a></li>
<li><a href=”image3.jpg”><img src=”image3-120×120.jpg” alt=”” /></a></li>
<li><a href=”image4.jpg”><img src=”image4-120×120.jpg” alt=”” /></a></li>
</ul>
</div>
</div><!– project –>

JavaScript Code

$(document).ready(function() {
$(‘.mainimg’).prepend(‘<img src=”images/loading.gif” >’);
$(‘.mainimg’).cycle({
slideExpr: ‘.slide’,
fx: ‘fade’,
slideResize: true,
containerResize: false,
pager: ‘.thumbs’,
pagerAnchorBuilder: function(idx, slide) {
// return selector string for existing anchor
return ‘.thumbs li:eq(‘ + idx + ‘) a’;
},
pause: 1
});
});

CSS code

.mainimg img {
background: #EEEEEE;
padding: 2%;
width: 95% !important;
height: auto !important;
max-width: 95%;
height: auto;
}

img.loading {
width: 95% !important;
height: auto !important;
max-width: 95%;
height: auto;
border: none;
visibility: none;
}