Geek Answers Handbook

How to fade loop gallery background images

I want to rotate the background image of the div, which, it seems to me, does not allow me to use the excellant jQuery plugin.

The code below is what I still have, but it does not behave as I would like:

  • Reducing the first image
  • Sharing photos with a second image until the image is displayed - (this Fade fails in the second image)
  • And repeat to infinity ... and beyond.

<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="/css/normalize.css"> <link rel="stylesheet" type="text/css" href="/css/result-light.css"> <style type='text/css'> #mydiv { width: 100%; height: 365px; margin-left: auto; margin-right: auto; position: relative; display: block; background: url(HP_jQuery1.jpg) center top no-repeat; } </style> <script type='text/javascript'> $(window).load(function(){ var firstTime = true; var arr = ["url(HP_jQuery2.jpg)", "url(HP_jQuery3.jpg)"]; (function recurse(counter) { var bgImage = arr[counter]; if (firstTime == false) { $("#mydiv").fadeOut("slow"); $('#mydiv').css('background-image', bgImage); $("#mydiv").fadeIn("slow"); } else { firstTime = false; } delete arr[counter]; arr.push(bgImage); setTimeout(function() { recurse(counter + 1); }, 3600); })(0); }); </script> </head> <body> <div id="mydiv">&nbsp;</div> </body>
+8
jquery css
source share
1 answer

An example of using jsBin to use

To cross out the background image, you will need an extra layer to overlay your gallery.
Here is an example of logic:

Fade loop background images

So, create a DIV place for it with the usual <img> tags for the browser to preload the images, after which we will use their src to use as a closed background-image for two elements:

 jQuery(function($) { var $gallery = $("#gallery"); // Your HTML gallery var $overlay = $("<div/>"); // An overlay to X-fade var $images = $gallery.find("img"); var n = $images.length; // How many images we have var c = 0; // Just a counter to loop using Reminder Operator % $gallery.css({backgroundImage: "url("+ $images[c].src +")"}).append( $overlay ); (function loopBg(){ $overlay.hide().css({backgroundImage: "url("+ $images[++c%n].src +")"}).delay(2000).fadeTo(1200, 1, function(){ $gallery.css({backgroundImage: "url("+ $images[c%n].src +")"}); loopBg(); }); }()); }); 
 html, body{ height:100%; margin:0; /*If needed*/ } #gallery, /*Your gallery ID */ #gallery > div /*Immediate DIV child, created by jQuery*/ { position:absolute; width: 100%; height:100%; background: #000 none 50% / cover; } #gallery img{ display:none; /*Exactly. We'll use them as BG images*/ } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="gallery"> <!-- We'll not show images, those are just used for the browser to preload them Let just steal the images Sources and use them for the #gallery and #overlay backgrounds --> <img src="http://dummyimage.com/600x365/fc5/fff&text=Image1" /> <img src="http://dummyimage.com/600x365/cf5/fff&text=Image2" /> <img src="http://dummyimage.com/600x365/f5c/fff&text=Image3" /> </div>
+8
source share

More articles:


All Articles