Rotate Background Images with jQuery Cycle

jQuery Cycle is a great plugin for any designer/developer to utilize, whether they are just learning how to use jQuery, or are advanced enough to make use of the different events that are included. By using the Cycle plugin, website development can be limited to using it in place of Flash or Silverlight, by creating simple-yet-effective transition effects to make the page’s images not be limited in static content.

I’ve used this plugin on multiple websites, but never I had come into needing to use it for rotating a background image, rather than the usual image within an element. The page I was converting from a layered PSD to a XHTML/CSS was layered in such a way that the background (1000px by 400px or so) would be the rotating element, along with a box of text (was limited in width, not height), which makes rotating an entire, editable area difficult down the road once the client would start adding their own additions. I realized one way I could do this would be to set the image (which would be uploaded and edited by the client later) to be the background of the div surrounding it, and the text would be wrapped into one div with a set class; I would use the cycle plugin’s “before” event to set the background via jQuery, and set the content within a set div to be the content that would be rotated on the frontend.

jQuery Cycle Event Handling

To set the event to fire *before* the transition of the image (the “fade” effect, or whatever you have specified), simply add an event to the before event on the cycle method. The code below demonstrates exactly how I handled this.

Default.master template

<script type="text/javascript">
        $(document).ready(
	        function () {
	            $('#imageRotater').cycle(
			        { fx: 'fade', timeout: 6000, speed: 500, pager: '#slideshow_nav', before: setBGBefore
			        }
		        );
	            function setBGBefore() {
	                $(this).css({ 'background-image': 'url(' + $(this).find('img').attr('src') + ')', 'background-position': 'top center', 'background-color': 'transparent' });
	                $(".welcomeBox div").html($(this).find('span').html());
	            }
	        }
        );
    </script>

What the setBGBefore() function does, is set the css of the imageRotater ID (which happens to be a div in this case) to have a background-image of the image that will be rotating (display:none on the images within our divs {css is below}). This was done to ensure that regardless of the width of the image, it will be set in the top center of our page. The structure of the items being rotated are as follows:

HomepageRotator.ascx

<div id="imageRotater">
        <asp:Repeater ID="listItems" runat="server">
          <ItemTemplate>
            <div id="imageRotate">
              <asp:Literal ID="Content" runat="server" Mode="PassThrough" />
            </div>
          </ItemTemplate>
        </asp:Repeater>
</div>

By adding an event before the transition occurs, I was able to set the background on the div using jQuery, replace any content that was originally in the specific DIV, and then begin the fading.

Posted in asp.net, jQuery, PHP
  • Arrive

    This is awesome. Is there a chance I can see a page where you have used it? I am trying to create a menu with Jquery/Cycle where the BG image (=tabs) rotates behind the menu.

  • Me

    You say the CSS is below, but it isn’t.

About Fort Wayne Web Development
FortWayneWebDevelopment.com is specifically a web-development and design blog dedicated to providing answers for common issues, problems, bugs, and requests of popular web-based software, such as Magento eCommerce, Sitefinity CMS, MODx CMS. Alongside these pieces of software, this blog will also feature code snippets to specific programming languages, such as JavaScript (more specifically the jQuery libraries), ASP.Net with C#, PHP, HTML, and CSS.