Jquery – Is sIFR 3 compatible with the jQuery Cycle Plugin

jquerysifr

I am a newbie and I have been struggling with this for awhile. I am try to create a scrolling div using the jQuery Cycle Plugin with sIFR 3 text within the scrolling div. I can get it to work properly in Firefox and that's about it. Any suggestions or help would be greatly appreciated!

Here's my link: http://dev.bandspecial.com/test.html

jQuery:

$(document).ready(function() {
$('#slideshow').cycle({
    fx: 'scrollLeft',
    cleartypeNoBg:  true
});
});

sIFR:

sIFR.replace(rockwell, {
 selector: 'h1',
      css: [ '.sIFR-root { color:#ffffff; }' ,'a { text-decoration: none }' ,'a:link { color: #E31824 }' ,'a:hover { color: #E31824 }' ], wmode: 'transparent'
    });

Body Code:

<div id="slideshow">
  <div> <img src="http://malsup.com/jquery/cycle/images/beach1.jpg" height="200" width="200">
    <h1>St Andrews State Park - Panama City, FL</h1>
    <p>This park is one of the most popular outdoor recreation spots in Florida. </p>
  </div>
  <div> <img src="http://malsup.com/jquery/cycle/images/beach2.jpg" height="200" width="200">
    <h1>Located in the Florida panhandle,</h1>
    <p> the 1,260 acre park is situated on a scenic peninsula and is well known for its sugar white sands and brilliant blue water. </p>
  </div>
  <div> <img src="http://malsup.com/jquery/cycle/images/beach3.jpg" height="200" width="200">
    <h1>The ocean provides opportunity for endless fun. </h1>
    <p>From boogie boarding to snorkeling to  swimming and boating, there is always something to do.</p>
  </div>
</div>

Best Answer

I adjusted Tom's code a bit. Although his code works for me, it visibly renders the sifr after the (fade) effect. With a before and a display block, the sifr is rendered before the effect for a more desirable result.

$(document).ready(function(){
    $('#div').cycle({
        fx: 'fade',
        before: function(){
            $(this).css({ 'display': 'block' })
            sIFR.replace(alberta, {
            selector: '.flash-text',
            wmode: 'transparent'
            });
       }
    });
});
Related Topic