Совместим ли sIFR 3 с плагином jQuery Cycle? - PullRequest
Новая
       4

Совместим ли sIFR 3 с плагином jQuery Cycle?

0 голосов
/ 21 сентября 2009

Я новичок, и некоторое время я боролся с этим. Я пытаюсь создать прокручиваемый div, используя плагин jQuery Cycle с текстом sIFR 3 внутри прокручиваемого div. Я могу заставить это работать должным образом в Firefox, и это об этом. Любые предложения или помощь будет принята с благодарностью!

Вот моя ссылка: 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'
    });

Код тела: 

<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>

Ответы [ 4 ]

2 голосов
/ 27 ноября 2012

Я немного изменил код Тома. Хотя его код работает для меня, он визуально отображает sifr после эффекта (fade). С блоком before и display sifr визуализируется перед эффектом для более желательного результата. 

$(document).ready(function(){
    $('#div').cycle({
        fx: 'fade',
        before: function(){
            $(this).css({ 'display': 'block' })
            sIFR.replace(alberta, {
            selector: '.flash-text',
            wmode: 'transparent'
            });
       }
    });
});
1 голос
/ 12 февраля 2010

Я использую плагин Innerfade Jquery, поэтому изменения могут немного отличаться.

Вот что я сделал:

Innerfade использует .hide(), чтобы скрыть все элементы в списке. Это корень проблемы. Решение: вместо того, чтобы ваш плагин использовал .hide(), используйте .addClass("hide") и определите CSS position: absolute; left:-10000px.

Используя этот метод. .removeClass("hide") заставит ваше сообщение появиться снова. В дополнение к этому, если вы используете эффект типа затухания или скольжения, не забудьте также removeClass.

Надеюсь, это имеет смысл. Кстати: я использую SIFR 3

0 голосов
/ 06 марта 2010

Я использовал опцию цикла jquery «после» для вызова функции sIFR после завершения каждого перехода: 

$(document).ready(function(){
    $('#div').cycle({
        fx: 'fade',
        after: function(){
            sIFR.replace(alberta, {
            selector: '.flash-text',
            wmode: 'transparent'
            });
        }
    });
});
0 голосов
/ 16 октября 2009

Если у вас есть скрытые элементы div, которые вы пытаетесь прокрутить для отображения: нет; при загрузке страницы sifr не заменит этот текст.

...