Quote function

JavaScript
1

I have made a small function with javascript/jquery.
My objective was to have a set of quotes that are being showed one at a time.

When all quotes have been shown it starts all over again in the same order. To my surprise it actually worked quite fine :slight_smile:

I would like to get some feedback from all your scripts wizards. Im not a javascript/jquery gury.

So any feedback on regarding things i could do to improve my script are appreciated

My funktion looks like this



jQuery(document).ready(function($) {

if (("#quotes").length > 0) {

$('#quotes li').hide();
var array = $("#quotes li").toArray(); 
var count = array.length;
var c = 0;
var n = '';

function countdown() {
  setTimeout(countdown, 5000);
  if(c == count) c = 1;
  if(c !== 0) n = c - 1;
  $('#quotes li.random-' + c).show();
  $('#quotes li.random-' + n).hide();

c++;

}
   countdown();

}
2

I came to the conclussion that my own script stank so i found a proper one written by Marco Kuiper



(function($) {
		  
  $.quote_rotator = {
    defaults: {
      rotation_speed: 5000,
      pause_on_hover: true,
      randomize_first_quote: false
    }
  }		  
		  
$.fn.extend({
        quote_rotator: function(config) {

            var config = $.extend({}, $.quote_rotator.defaults, config);

            return this.each(function() {
                
                // cache for selector performance
                var quote_list = $(this);
                var list_items = quote_list.find('li');
                
                // prevent dummies from setting the rotation speed too fast
                var rotation_speed = config.rotation_speed < 2000 ? 2000 : config.rotation_speed;                   

                // hide all the quotes
                list_items.hide();

                // apply active to random quote if specified
                if (config.randomize_first_quote) {
                  var random = Math.floor( Math.random() * (list_items.length) );
                  $(list_items[random]).addClass('active');

                // otherwise apply active to first quote unless already applied in the html
                } else if (! (quote_list.find('li.active')).length ) {
                    $('li:first', quote_list).addClass('active');
                };
                
                // show the active quote 
                quote_list.find('li.active').show();
                
                // activate quote rotation
                var rotation_active = true;

                // stop quote rotation on hover
                quote_list.hover(function() {
                    if (config.pause_on_hover) {rotation_active = false};
                }, function() {
                    rotation_active = true
                });
                
                // rotate quotes
                setInterval(function(){
                    if (rotation_active) {
                        
                        var active_quote = quote_list.find('li.active');        
                        var next_quote =  active_quote.next().length ? active_quote.next() : quote_list.find('li:first');

                        // rotate quotes with fade effect
                        active_quote.animate({
                            opacity: 0 // fade out active quote
                        }, 1000, function() {
                            active_quote.hide().css('opacity', 1); // hide and reset opacity
                            next_quote.fadeIn(1000); // fade in next quote
                        });
                        
                        // swap the class to prepare for the next fade effect interal
                        active_quote.removeClass('active');
                        next_quote.addClass('active');
                    };
                    
                }, rotation_speed);
                
            })
        }
    })

})(jQuery);





    <ul id="quotes">
        <li>
            <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit!</blockquote>
            <cite>&mdash; Alabama</cite>
        </li>
        <li>
            <blockquote>Excepteur sint occaecat cupidatat non proident!</blockquote>
            <cite>&mdash; Georgia</cite>
        </li>
        <li>
            <blockquote>Duis aute irure dolor in reprehenderit?</blockquote>
            <cite>&mdash; Illinois</cite>
        </li>
        <li>
            <blockquote>Dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
            sunt in culpa qui officia deserunt mollit anim id est laborum.</blockquote>
            <cite>&mdash; West Virginia</cite>
        </li>
    </ul>