Мне нужна помощь в реализации плагина jquery с вращающейся цитатой.

Вот код JQuery:

(function($) {
    $.fn.quovolver = function(speed, delay) {

        /* Sets default values */
        if (!speed) speed = 500;
        if (!delay) delay = 6000;

        // If "delay" is less than 4 times the "speed", it will break the effect 
        // If that's the case, make "delay" exactly 4 times "speed"
        var quaSpd = (speed*4);
        if (quaSpd > (delay)) delay = quaSpd;

        // Create the variables needed
        var quote = $(this),
            firstQuo = $(this).filter(':first'),
            lastQuo = $(this).filter(':last'),
            wrapElem = '<div id="quote_wrap"></div>';

        // Wrap the quotes
        $(this).wrapAll(wrapElem);

        // Hide all the quotes, then show the first
        $(this).hide();
        $(firstQuo).show();

        // Set the hight of the wrapper
        $(this).parent().css({height: $(firstQuo).height()});       

        // Where the magic happens
        setInterval(function(){

            // Set required hight and element in variables for animation
            if($(lastQuo).is(':visible')) {
                var nextElem = $(firstQuo);
                var wrapHeight = $(nextElem).height();
            } else {
                var nextElem = $(quote).filter(':visible').next();
                var wrapHeight = $(nextElem).height();
            }

            // Fadeout the quote that is currently visible
            $(quote).filter(':visible').fadeOut(speed);

            // Set the wrapper to the hight of the next element, then fade that element in
            setTimeout(function() {
                $(quote).parent().animate({height: wrapHeight}, speed);
            }, speed);

            if($(lastQuo).is(':visible')) {
                setTimeout(function() {
                    $(firstQuo).fadeIn(speed*2);
                }, speed*2);

            } else {
                setTimeout(function() {
                    $(nextElem).fadeIn(speed);
                }, speed*2);
            }

        }, delay);

    };
})(jQuery);

Я сохранил этот код как файл JS на своем веб-сайте.

А вот и мой HTML:

<link rel="stylesheet" media="screen" type="text/css" href="../../style.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="../../js/jquery.quovolver.js"></script>




<body>

         <div>
        I want my rotating quotes HERE


        </div>


</body>
</html>

Мне сказали: "Вызовите сценарий в функции готовности документа с помощью этой строки кода: $(’element’).quovolver();"

У меня вопрос: где и как мне хранить цитаты и как мне вызвать этот плагин JQuery в пространстве, которое я отметил на странице html?

Спасибо за вашу помощь!!

2
user1345331 25 Мар 2013 в 16:03

1 ответ

Лучший ответ

Вот что я нашел в документации:

Javascript (jQuery)

// CASE : in an extern file
// When document is ready...
$(document).ready(function() {
  // Call Quovolver on the '.quotes' object
  $('.quotes').quovolver();
});

// CASE : in HTML's head
<script>
    $(document).ready(function() {
      // Call Quovolver on the '.quotes' object
      $('.quotes').quovolver();
    });
</script>

HTML

<div class="quotes">
  <blockquote>
    <p>“That which can be asserted without evidence, can be dismissed without evidence.”</p>
    <p>— Christopher Hitchens (Quote 1)</p>
  </blockquote>

  <blockquote>
    <p>“Owners of dogs will have noticed that, if you provide them with food and water and shelter and affection, they will think you are god. Whereas owners of cats are compelled to realize that, if you provide them with food and water and shelter and affection, they draw the conclusion that they are gods.”</p>
    <p>— Christopher Hitchens (Quote 2)</p>
  </blockquote>

  <blockquote>
    <p>“Everybody does have a book in them, but in most cases that's where it should stay.”</p>
    <p>— Christopher Hitchens (Quote 3)</p>
  </blockquote>

  <blockquote>
    <p>“Beware the irrational, however seductive. Shun the 'transcendent' and all who invite you to subordinate or annihilate yourself. Distrust compassion; prefer dignity for yourself and others. Don't be afraid to be thought arrogant or selfish. Picture all experts as if they were mammals. Never be a spectator of unfairness or stupidity. Seek out argument and disputation for their own sake; the grave will supply plenty of time for silence. Suspect your own motives, and all excuses. Do not live for others any more than you would expect others to live for you.”</p>
    <p>— Christopher Hitchens (Quote 4)</p>
  </blockquote>

  <blockquote>
  <p>“Human decency is not derived from religion. It precedes it.”</p>
  <p>— Christopher Hitchens (Quote 5)</p>
  </blockquote>

  <blockquote>
    <p>“Many religions now come before us with ingratiating smirks and outspread hands, like an unctuous merchant in a bazaar. They offer consolation and solidarity and uplift, competing as they do in a marketplace. But we have a right to remember how barbarically they behaved when they were strong and were making an offer that people could not refuse.”</p>
    <p>— Christopher Hitchens (Quote 6)</p>
  </blockquote>
</div><!-- .quotes -->

Добавьте класс .quotes в свой div, заполните его, как в этом примере, и вызовите код jQuery при загрузке документа.

0
Bigood 25 Мар 2013 в 16:26
Мне нужно объявить это как скрипт или что-то в этом роде? Я звучу очень глупо, но не могли бы вы показать мне пример в моем примере HTML? Спасибо
 – 
user1345331
25 Мар 2013 в 16:08
Обновленный ответ: вы заполняете div .quote своим содержанием, следуя приведенному выше шаблону.
 – 
Bigood
25 Мар 2013 в 16:13
Хорошо, почти понял. Где мне разместить этот фрагмент кода? // Когда документ будет готов ... $(document).ready(function() { // Call Quovolver on the '.quotes' object $('.quotes').quovolver(); }); В моем заголовке html, в сохраненном файле JS или в новом файле?
 – 
user1345331
25 Мар 2013 в 16:22
В голове, заключенной в теги <script>, или в файле JS $(document).ready(), или в новом файле (все еще в пределах $(document).ready()), который вы включите в свой head.
 – 
Bigood
25 Мар 2013 в 16:29
Хорошо, отлично, 99% работает ... Последний вопрос, при вставке частей HTML кавычки не разделяются по отдельности. то есть его затухание все 5 и исчезновение, а не по одному за раз .. Какое здесь решение? Огромное спасибо
 – 
user1345331
25 Мар 2013 в 17:27