ansaurus

Question

Answer 1

+2 A:

You can get a background-image by accessing it from the .css(name) method:

$("#sector1").css("background-image");

Without managing your list of images in an array or some other fashion, you're going to have to check each background-image to know when it's time to hide your element. This isn't a great way of working, as it doesn't allow you to easily add a new image in the future if you like.

Perhaps something like the following:

function toggle(el) {
  var whenToHide = "background3.jpg";
  var currBackground = $(el).css("background-image");
  /* ...code... */
  if (currBackground == whenToHide) {
    $(el).remove();
  }
}

Jonathan Sampson 2009-02-04 15:04:12

Answer 2

+2 A:

Do you have to use the background image?
If not, here's a little code sample for what I would do.

<html>
<head>
<style type="text/css">
    #imageRotater { list-style-type:none; }
    #imageRotater, .imageRotater li { margin:0px auto; padding: 0px; }
    #imageRotater img { display:none; }
</style>

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">
(function($) {
    $.fn.rotate = function() {
     return this.each(function() {
      var list = $(this).is('ul') ? $(this) : $('ul', this);
      list.find('img:eq(0)').show();

      $('img', list).click(function() {
       $(this).hide().closest('li').next().find('img').show();
      });
     });
    };
})(jQuery);


$(document).ready(function() {
    $("#imageRotater").rotate();
});

</script>

</head>
<body>
    <div id="sector1">
     <ul id="imageRotater">
      <li><img src="image1.png" alt="" /></li>
      <li><img src="image2.png" alt="" /></li>
      <li><img src="image3.png" alt="" /></li>
     </ul>
    </div>
</body>
</html>

bendewey 2009-02-04 15:20:56

Answer 3

A:

Here's a thing that works.
Each overlay is initially hidden with CSS. Each time your button is clicked, all the overlays are hidden, then one is revealed based on some data stored on the button. If the data reaches the max number overlays + 1, none are shown and the data is reset to 0.

Markup

<div id="container" style="background: yellow">
    <div class="overlay" style="background: red"></div>
    <div class="overlay" style="background: green"></div>
    <div class="overlay" style="background: blue"></div>
</div>

Style

div{
 width: 100px;
 height: 100px;

}
.overlay{
 position: absolute;
 top: 0;
 left: 0;
 display: none;
}
#container{
 position: relative;
}

Script

$(function() {
    var b = $('#button1');
    b.data('next', 0);
    b.data('max', $('.overlay').size()+1 );
    b.click( function( e ) {
        var next = $(this).data('next');
     var o = $('.overlay');
        o.hide();
        o.eq(next).show();
        next = (next+1) % $(this).data('max');
        $(this).data('next', next);
    });
});

meouw 2009-02-04 16:13:12

Answer 4

A:

In response to Bendeway's answer above, you'll need to insert before

list.find('img:eq(0)').show();

the following line:

list.find('img').hide();

This will hide all the images before it starts rotating through them.

KyokoHunter 2009-11-24 20:05:33

ansaurus

tags:

views:

answers:

Rotate images, if last image then hide

related questions