Home/ Questions/Q 7586347
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T19:24:22+00:00

I would like to use jquery’s cycle to cycle through images. I would also

  • 0

I would like to use jquery’s cycle to cycle through images. I would also like to have these images automatically resize depending on whether the user enlarges or scales back the window. Right now It will cycle through the pictures based on the current screen size, but will not change after the page loads. Any ideas?

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Peter's Website</title>
<style type = "text/css">
body, html, .slideshow,.slideshow img { margin:0; padding:0; height: 100%; width:100%;}
#bgimage { position:auto; left:0; top:0; z-index:1; height:100%; width:100%; }
</style>

<script src="js/lib/jquery.min.js" type="text/javascript"></script>
<script src="js/lib/jquery.cycle.all.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
        fx: 'fade' // choose your trjquery.cycle.allansition type, ex: fade, scrollUp, shuffle, etc...
    });
});
</script>
</head>
<body>

<div id ="blackground_image" class="slideshow">
        <img src="images/1.jpg"/>
        <img src="images/2.jpg"/>
        <img src="images/3.jpg"/>
        <img src="images/4.jpg"/>
        <img src="images/5.jpg"/>
    </div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Are they background images and you want them to be stretched to fit the window size? If so, you might want to check out the backstretch jQuery plugin:

    http://srobbin.com/blog/jquery-plugins/jquery-backstretch/

    When you download the code, just look at the slideshow example and it will show you how to fade between an array of images.

    • 0