0

Hello,

I am trying some code I found on the net for a fade in/ fade out slideshow.

It is working fine on FF, Chrome and Safari on Windows.

On Chrome Mac, the slides appearing one below the other, on IE8 on Windows, the text under the slide, does not fade, it just displays all the text above each other.

The jquery code:

function slideSwitch() {
var $active = $('#slideshow div.active');
if ( $active.length == 0 )
$active = $('#slideshow div:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow div:first');
$active.addClass('last-active')
.animate({opacity : 0.0}, 1000);
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

The css:

#slideshow {
     position: relative;
    width: 212px;
        height: 210px;
        border: 1px solid #aaa;
        background: #fff;
}

#slideshow div {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8;
    opacity: 0.0;
}

#slideshow div.active {
    z-index: 10;
    opacity: 1.0;
}

#slideshow div.last-active {
    z-index:9;
}

p.slideTitle {
    color: #aaa7a7;
    font-weight: bold;
    padding-top: 10px;
    text-align: center;
}

The html:

<div id="slideshow">
    <div class="active"><a href="index.php?content=judaicart"><img src="images/slide/1.jpg" alt="" /></a>
        <p class="slideTitle">1 / <span class="red">Judaic Art</span></p>
    </div>
    <div><a href="index.php?content=judaicart"><img src="images/slide/2.jpg" alt="" /></a><p class="slideTitle">2 / <span class="red">Judaic Art</span></p></div>
    <div><a href="index.php?content=judaicart"><img src="images/slide/3.jpg" alt="" /></a><p class="slideTitle">3 / <span class="red">Judaic Art</span></p></div>
    <div><a href="index.php?content=judaicart"><img src="images/slide/4.jpg" alt="" /></a><p class="slideTitle">4 / <span class="red">Judaic Art</span></p></div>
    <div><a href="index.php?content=judaicart"><img src="images/slide/5.jpg" alt="" /></a><p class="slideTitle">5 / <span class="red">Judaic Art</span></p></div>
</div>

Can anyone please help me solve this? I'm not an expert on Jquery so any help would be very appriciated.

1
Contributor
1
Reply
2
Views
5 Years
Discussion Span
Last Post by cgull
0

I have tried another code, this one works well everywhere, besides Chrome Mac version 19.0.1084.56

Jquery Code:

var $$ = $.fn;

$$.extend({
  SplitID : function()
  {
    return this.attr('id').split('-').pop();
  },

  Slideshow : {
    Ready : function()
    {
      this.Counter = 1;
      this.Interrupted = false;

      this.Transition();
    },

    Transition : function()
    {
      if (this.Interrupted) {
        return;
      }

      this.Last = this.Counter - 1;

      if (this.Last < 1) {
        this.Last = 3;
      }

      $('div#tmpSlide-' + this.Last).fadeOut(
        'slow',
        function() {
      //    $('div#tmpSlideshowControl-' + $$.Slideshow.Last).removeClass('tmpSlideshowControlActive');
        //  $('div#tmpSlideshowControl-' + $$.Slideshow.Counter).addClass('tmpSlideshowControlActive');
          $('div#tmpSlide-' + $$.Slideshow.Counter).fadeIn('slow');

          $$.Slideshow.Counter++;

          if ($$.Slideshow.Counter > 3) {
            $$.Slideshow.Counter = 1;
          }

          setTimeout('$$.Slideshow.Transition();', 5000);
        }
      );
    }
  }
});

$(document).ready(
  function() {
    $$.Slideshow.Ready();
  }
);

Css code:

div#slideshow {
    position: relative;
    width: 212px;
    height: 210px;
    border: 1px solid #aaa;
    background: #fff;
}

div.slide {
    position: absolute;
  top: 0;
  left: 0;
  width: 210px;
  height: 207px;
  display: none;
    z-index: 100;
}

div.slide img {
    float: left;    
}

div.slideCopy {
    color: #aaa7a7;
    font-weight: bold;
    text-align: center;
    font-size: 11px;
    width: 210px;
    float: left;
    margin-top: 10px;
}

Html code:

<div id="slideshow">
    <div id="tmpSlide-1" class="slide">
    <a href="index.php?content=judaicart"><img src="images/slide/1.jpg" alt="1" /></a>
    <div class="slideCopy"><p>1 / <span class="red">Judaic Art</span></p></div>
    </div>
    <div id="tmpSlide-2" class="slide">
    <a href="index.php?content=judaicart"><img src="images/slide/2.jpg" alt="2" /></a>
        <div class="slideCopy"><p>2 / <span class="red">Judaic Art</span></p></div>
    </div>
    <div id="tmpSlide-3" class="slide">
    <a href="index.php?content=judaicart"><img src="images/slide/3.jpg" alt="3" /></a>
    <div class="slideCopy"><p>3 / <span class="red">Judaic Art</span></p></div>
    </div>
    <div id="tmpSlide-4" class="slide">
    <a href="index.php?content=judaicart"><img src="images/slide/4.jpg" alt="4" /></a>
        <div class="slideCopy"><p>4 / <span class="red">Judaic Art</span></p></div>
    </div>  
</div>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.