Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite
2

I have taken a look through stackoverflow for hours now, and I have found a topic similar to what I am trying to achieve

How to change the "background-image" css attribute with JavaScript?

When I modify this solution in my script, I get no background image at all so I thought I would come back to the source to get some fresh eyes and thoughts.

Here is my setup: HTML

    <div id="Background"></div>

CSS:

    .background-1 {
     background: url('Images/mybg1.jpg');
     -webkit-transition: background 500ms linear;
     -moz-transition: background 500ms linear;
     -o-transition: background 500ms linear;
     -ms-transition: background 500ms linear;
     transition: background 500ms linear;
     }

    .background-2 {
     background: url('Images/mybg2.jpg');
     -webkit-transition: background 500ms linear;
     -moz-transition: background 500ms linear;
     -o-transition: background 500ms linear;
     -ms-transition: background 500ms linear;
     transition: background 500ms linear;
     }

Javascript in the head tag

      <script>
      $(document).ready(function(){
      setInterval(function() {
        if($('#background').hasClass('background-1')) {
            $('#background').addClass('background-2');
            setTimeout(function() {
                $('#backdrop').removeClass('background-1');
            }, 1000);
        }
        else if($('#background').hasClass('background-2')) {
            $('#background').addClass('background-1');
            setTimeout(function() {
                $('#backdrop').removeClass('background-2');
            }, 1000);
        }
}, 2000);
});

I want to somehow be able to use several images for the background and have them change out every 5 or so seconds. How do I do this?

Here is what I have tried HTML

    <div id="Background">
    <img src="<%=skinpath%>/images/mybg2.jpg" class="bgM"/>  
    <img src="<%=skinpath%>/images/mybg1.jpg" class="bgM"/>
    </div>

CSS:

    #Background, img.bgM {
    background:#fff no-repeat 0 bottom;position:absolute;bottom:0;min-width:960px;min-height:100%;z-index:-99999; 
    background-position: top center;
    }

Javascript:

    <dnn:DnnJsInclude runat="server" FilePath="js/jquery.cycle.all.js" PathNameAlias="SkinPath" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script> 

    $(document).ready(function() {
            $('#Background').cycle({
            fx: 'fade',
            pager: '#smallnav', 
            pause:   1, 
            speed: 1800,
            timeout:  3500 
        });         
    });

This last solution worked however I could not get the image to position top center(even when specified in the css.) Any help on this is greatly appreciated!

share|improve this question

3 Answers

up vote 1 down vote accepted

You could try using different classes for each image, and then just swap out CSS classes in a given interval.

$(document).ready(function(){
  var seconds = 5000;
  var step = 0;
  var limit = 5;

  $("#Background").addClass("image-"+step);

  setInterval(function(){
    $("#Background").removeClass("image-"+step);
    step = (step > limit) ? 0 : step + 1;
    $("#Background").addClass("image-"+step);
  },seconds);
});

I'm not sure what kind of animation you are trying to do, but you could fadeOut and then fadeIn.

$(document).ready(function(){
  var seconds = 5000;
  var step = 0;
  var limit = 5;

  $("#Background").addClass("image-"+step).fadeIn(500);

  setInterval(function(){
    $("#Background").fadeOut(500,function(){
       $(this).removeClass("image-"+step);
       step = (step > limit) ? 0 : step + 1;
      $("#Background").addClass("image-"+step).fadeIn(500);
    });
  },seconds);
});
share|improve this answer
where do I specify my images? I plugged this in and added this to my CSS code .image1{background:#fff url('Images/kdmcbg1.jpg') no-repeat 0 bottom;} .image2{background:#fff url('Images/kdmcbg2.jpg') no-repeat 0 bottom;} is this what you meant? – Skullomania May 13 at 19:19
@Skullomania yea, but I had a dash .image-0{background} .image-1{background}.. etc.. – Mathew Foscarini May 13 at 22:35
I got it partly but, I cant get the second image to show up what am i missing? jsFiddle – Skullomania May 14 at 0:13
@Skullomania, sorry my bad. Change (step < limit) to be (step > limit). – Mathew Foscarini May 14 at 0:33
so I just got the first to transition to the second jsFiddle but when it gets there it just repeats the second...how do I loop it back to the first? Im sooo close! :) – Skullomania May 14 at 0:34
show 1 more comment
up vote 2 down vote

You can try swapping backgrounds like so:

Create CSS Class for each background and include transitions as part of the ruleset:

.background-1 {
 background: url('background-1.jpg');
 -webkit-transition: background 500ms linear;
 -moz-transition: background 500ms linear;
 -o-transition: background 500ms linear;
 -ms-transition: background 500ms linear;
 transition: background 500ms linear;

}

Add a script that will swap out the classes on a regular interval. (You would most likely wrap this script within $(document).ready) Since your transitioning backgrounds, you may not want the previous background immediately removed, so you can use a delay call to remove it after the transition would complete.

The following example would start the background switch every two seconds, and remove the previous background after 1 second. Since in my CSS, I declared that the transition should take .5 seconds, the new background is already there before the old one is removed:

setInterval(function() {
            if($('#background').hasClass('background-1')) {
                $('#background').addClass('background-2');
                setTimeout(function() {
                    $('#background').removeClass('background-1');
                }, 1000);
            }
            else if($('#background').hasClass('background-2')) {
                $('#background').addClass('background-1');
                setTimeout(function() {
                    $('#background').removeClass('background-2');
                }, 1000);
            }
}, 2000);

Note: The code that I've provided would require you to chain multiple if/else if statements together, there is probably a more efficient way to go about this.

I've done something similar (background colors instead of images) as a teaser for an upcoming project of mine, you can check it out here.

Update: Forgot to mention, make sure to declare one of the background classes in your Div element:

<div id="background" class="background-1"></div>
share|improve this answer
I added the code you requested and i am not sure what I am doing wrong...I am still seeing an all white background. is there a jqery plugin that should be added? – Skullomania May 13 at 19:45
No plugin, just the standard link to jQuery's library should suffice. Is your updated code viewable online? – TheAccordance May 13 at 19:48
Oh, I did forget to mention, make sure you've added the initial class to your background div. – TheAccordance May 13 at 19:48
I edited my original post. I still do not get any image – Skullomania May 13 at 20:00
Here's a jsFiddle of it in action jsfiddle.net/DWVr2 – TheAccordance May 13 at 20:20
show 1 more comment
up vote 0 down vote

It sounds like you're trying to do a slide show. I highly recommend the JQuery Cycle Plugin or Cycle2. The Cycle2 Getting Started page has a nice incremental demo/tutorial.

share|improve this answer
I have currently included the plugin. I either get no css positioning like in the "what I have tried" portion of my original post or nothing at all. – Skullomania May 13 at 20:03
code <dnn:DnnJsInclude runat="server" FilePath="js/jquery.cycle.all.js" PathNameAlias="SkinPath" /> – Skullomania May 13 at 20:04
I'm not familiar with the DotNetNuke tags. You should troubleshoot by starting with an example from the site, and then making small changes until it looks like what you want to accomplish. I just noticed that the author has recently release a Cycle2. I'm updating my answer. – Sonny May 13 at 20:11

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.