更改jquery插件

我正在使用vegas slider作爲我正在構建的站點的背景圖像。我有它的工作和配置我喜歡，但我的最終目標是能夠隨機圖像加載每頁加載。更改jquery插件

我已經看到了如何分別做這些的方法，但我不太清楚如何修改/添加到這個現有的js來實現它。

任何有用的鏈接或教程或建議將不勝感激。

在此先感謝。

(function($){ 
    var $background = $('<img />').addClass('vegas-background'), 
     $overlay = $('<div />').addClass('vegas-overlay'), 
     $loading = $('<div />').addClass('vegas-loading'), 
     $current = $(), 
     paused = null, 
     backgrounds = [], 
     step = 0, 
     delay = 5000, 
     walk = function() {}, 
     timer, 
     methods = { 

     // Init plugin 
     init : function(settings) { 
      var options = { 
       src: getBackground(), 
       align: 'center', 
       valign: 'center', 
       fade: 0, 
       loading: true, 
       load: function() {}, 
       complete: function() {} 
      } 
      $.extend(options, $.vegas.defaults.background, settings); 

      if (options.loading) { 
       loading(); 
      } 

      var $new = $background.clone(); 
      $new.css({ 
       'position': 'fixed', 
       'left': '0px', 
       'top': '0px' 
      }) 
      .imagesLoadedForVegas(function() { 
       if ($new == $current) { 
        return; 
       } 

       $(window).bind('load resize.vegas', function(e) { 
        resize($new, options); 
       }); 

       if ($current.is('img')) { 

        $current.stop(); 

        $new.hide() 
         .insertAfter($current) 
         .fadeIn(options.fade, function() { 
          $('.vegas-background') 
           .not(this) 
            .remove(); 
          $('body').trigger('vegascomplete', [ this, step - 1 ]); 
          options.complete.apply($new, [ step - 1 ]); 
         }); 
       } else { 
        $new.hide() 
         .prependTo('body') 
         .fadeIn(options.fade, function() { 
          $('body').trigger('vegascomplete', [ this, step - 1 ]); 
          options.complete.apply(this, [ step - 1 ]);  
         }); 
       } 

       $current = $new; 

       resize($current, options); 

       if (options.loading) { 
        loaded(); 
       } 

       $('body').trigger('vegasload', [ $current.get(0), step - 1 ]); 
       options.load.apply($current.get(0), [ step - 1 ]); 

       if (step) { 
        $('body').trigger('vegaswalk', [ $current.get(0), step - 1 ]); 
        options.walk.apply($current.get(0), [ step - 1 ]); 
       } 
      }) 
      .attr('src', options.src); 

      return $.vegas; 
     }, 

     // Destroy background and/or overlay 
     destroy: function(what) { 
      if (!what || what == 'background') { 
       $('.vegas-background, .vegas-loading').remove(); 
       $(window).unbind('resize.vegas'); 
       $current = $(); 
      } 

      if (what == 'overlay') { 
       $('.vegas-overlay').remove(); 
      } 

      return $.vegas; 
     }, 

     // Display the pattern overlay 
     overlay: function(settings) { 
      var options = { 
       src: null, 
       opacity: null 
      }; 
      $.extend(options, $.vegas.defaults.overlay, settings); 

      $overlay.remove(); 

      $overlay 
       .css({ 
        'margin': '0', 
        'padding': '0', 
        'position': 'fixed', 
        'left': '0px', 
        'top': '0px', 
        'width': '100%', 
        'height': '100%' 
      }); 

      if (options.src) { 
       $overlay.css('backgroundImage', 'url(' + options.src + ')'); 
      } 

      if (options.opacity) { 
       $overlay.css('opacity', options.opacity); 
      } 

      $overlay.prependTo('body'); 

      return $.vegas; 
     }, 

     // Start/restart slideshow 
     slideshow: function(settings, keepPause) { 
      var options = { 
       step: step, 
       delay: delay, 
       preload: false, 
       backgrounds: backgrounds, 
       walk: walk 
      }; 

      $.extend(options, $.vegas.defaults.slideshow, settings); 

      if (options.backgrounds != backgrounds) { 
       if (!settings.step) { 
        options.step = 0; 
       } 

       if (!settings.walk) { 
        options.walk = function() {}; 
       } 

       if (options.preload) { 
        $.vegas('preload', options.backgrounds); 
       } 
      } 

      backgrounds = options.backgrounds; 
      delay = options.delay; 
      step = options.step; 
      walk = options.walk; 

      clearInterval(timer); 

      if (!backgrounds.length) { 
       return $.vegas; 
      } 

      var doSlideshow = function() { 
       if (step < 0) { 
        step = backgrounds.length - 1; 
       } 

       if (step >= backgrounds.length || !backgrounds[ step - 1 ]) { 
        step = 0; 
       } 

       var settings = backgrounds[ step++ ]; 
       settings.walk = options.walk; 

       if (typeof(settings.fade) == 'undefined') { 
        settings.fade = options.fade; 
       } 

       if (settings.fade > options.delay) { 
        settings.fade = options.delay; 
       } 

       $.vegas(settings); 
      } 
      doSlideshow(); 

      if (!keepPause) { 
       paused = false; 

       $('body').trigger('vegasstart', [ $current.get(0), step - 1 ]); 
      } 

      if (!paused) { 
       timer = setInterval(doSlideshow, options.delay); 
      } 

      return $.vegas; 
     }, 

     // Jump to the next background in the current slideshow 
     next: function() { 
      var from = step; 

      if (step) { 
       $.vegas('slideshow', { step: step }, true); 

       $('body').trigger('vegasnext', [ $current.get(0), step - 1, from - 1 ]); 
      } 

      return $.vegas; 
     }, 

     // Jump to the previous background in the current slideshow 
     previous: function() { 
      var from = step; 

      if (step) { 
       $.vegas('slideshow', { step: step - 2 }, true); 

       $('body').trigger('vegasprevious', [ $current.get(0), step - 1, from - 1 ]); 
      } 

      return $.vegas; 
     }, 

     // Jump to a specific background in the current slideshow 
     jump: function(s) { 
      var from = step; 

      if (step) { 
       $.vegas('slideshow', { step: s }, true); 

       $('body').trigger('vegasjump', [ $current.get(0), step - 1, from - 1 ]); 
      } 

      return $.vegas; 
     }, 

     // Stop slideshow 
     stop: function() { 
      var from = step; 
      step = 0; 
      paused = null; 
      clearInterval(timer); 

      $('body').trigger('vegasstop', [ $current.get(0), from - 1 ]); 

      return $.vegas; 
     }, 

     // Pause slideShow 
     pause: function() { 
      paused = true; 
      clearInterval(timer); 

      $('body').trigger('vegaspause', [ $current.get(0), step - 1 ]); 

      return $.vegas; 
     }, 

     // Get some useful values or objects 
     get: function(what) { 
      if (what == null || what == 'background') { 
       return $current.get(0); 
      } 

      if (what == 'overlay') { 
       return $overlay.get(0); 
      } 

      if (what == 'step') { 
       return step - 1; 
      } 

      if (what == 'paused') { 
       return paused; 
      } 
     }, 

     // Preload an array of backgrounds 
     preload: function(backgrounds) { 
      var cache = []; 
      for(var i in backgrounds) { 
       if (backgrounds[ i ].src) { 
        var cacheImage = document.createElement('img'); 
        cacheImage.src = backgrounds[ i ].src; 
        cache.push(cacheImage); 
       } 
      } 

      return $.vegas; 
     } 
    } 

    // Resize the background 
    function resize($img, settings) { 
     var options = { 
      align: 'center', 
      valign: 'center' 
     } 
     $.extend(options, settings); 

     var ww = $(window).width(), 
      wh = $(window).height(), 
      iw = $img.width(), 
      ih = $img.height(), 
      rw = wh/ww, 
      ri = ih/iw, 
      newWidth, newHeight, 
      newLeft, newTop, 
      properties; 

     if (rw > ri) { 
      newWidth = wh/ri; 
      newHeight = wh; 
     } else { 
      newWidth = ww; 
      newHeight = ww * ri; 
     } 

     properties = { 
      'width': newWidth + 'px', 
      'height': newHeight + 'px', 
      'top': 'auto', 
      'bottom': 'auto', 
      'left': 'auto', 
      'right': 'auto' 
     } 

     if (!isNaN(parseInt(options.valign))) { 
      properties[ 'top' ] = (0 - (newHeight - wh)/100 * parseInt(options.valign)) + 'px'; 
     } else if (options.valign == 'top') { 
      properties[ 'top' ] = 0; 
     } else if (options.valign == 'bottom') { 
      properties[ 'bottom' ] = 0; 
     } else { 
      properties[ 'top' ] = (wh - newHeight)/2; 
     } 

     if (!isNaN(parseInt(options.align))) { 
      properties[ 'left' ] = (0 - (newWidth - ww)/100 * parseInt(options.align)) + 'px'; 
     } else if (options.align == 'left') { 
      properties[ 'left' ] = 0; 
     } else if (options.align == 'right') { 
      properties[ 'right' ] = 0; 
     } else { 
      properties[ 'left' ] = (ww - newWidth)/2 ; 
     } 

     $img.css(properties); 
    } 

    // Display the loading indicator 
    function loading() { 
     $loading.prependTo('body').fadeIn(); 
    } 

    // Hide the loading indicator 
    function loaded() { 
     $loading.fadeOut('fast', function() { 
      $(this).remove(); 
     }); 
    } 

    // Get the background image from the body 
    function getBackground() { 
     if ($('body').css('backgroundImage')) { 
      return $('body').css('backgroundImage').replace(/url\("?(.*?)"?\)/i, '$1'); 
     } 
    } 

    // The plugin 
    $.vegas = function(method) { 
     if (methods[ method ]) { 
      return methods[ method ].apply(this, Array.prototype.slice.call(arguments, 1)); 
     } else if (typeof method === 'object' || !method) { 
      return methods.init.apply(this, arguments); 
     } else { 
      $.error('Method ' + method + ' does not exist'); 
     } 
    }; 

    // Global parameters 
    $.vegas.defaults = { 
     background: { 
      // src:   string 
      // align:  string/int 
      // valign:  string/int 
      // fade:  int 
      // loading  bool 
      // load:  function 
      // complete: function 
     }, 
     slideshow: { 
      // fade:  null 
      // step:  int 
      // delay:  int 
      // backgrounds: array 
      // preload:  bool 
      // walk:  function 
     }, 
     overlay: { 
      // src:   string 
      // opacity:  float 
     } 
    } 

    /*! 
    * jQuery imagesLoaded plugin v1.0.3 
    * http://github.com/desandro/imagesloaded 
    * 
    * MIT License. by Paul Irish et al. 
    */ 
    $.fn.imagesLoadedForVegas = function(callback) { 
     var $this = this, 
      $images = $this.find('img').add($this.filter('img')), 
      len = $images.length, 
      blank = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='; 

     function triggerCallback() { 
      callback.call($this, $images); 
     } 

     function imgLoaded() { 
      if (--len <= 0 && this.src !== blank){ 
       setTimeout(triggerCallback); 
       $images.unbind('load error', imgLoaded); 
      } 
     } 

     if (!len) { 
      setTimeout(triggerCallback, 200); 
      // triggerCallback(); 
     } 

     $images.bind('load error', imgLoaded).each(function() { 
      // cached images don't fire load sometimes, so we reset src. 
      if (this.complete || this.complete === undefined){ 
       var src = this.src; 
       // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f 
       // data uri bypasses webkit log warning (thx doug jones) 
       this.src = blank; 
       this.src = src; 
      } 
     }); 

     return $this; 
     }; 
})(jQuery);

來源

2012-06-09 LightningWrist

寫這ramdomize圖像和返回的數組一個jQuery functon，然後返回數組

 { src: 'images/background4.jpg', fade: 4000 }, 
     { src: 'images/background3.jpg', fade: 4000 }, 
     { src: 'images/background2.jpg', fade: 4000 }, 
     { src: 'images/background1.jpg', fade: 4000 }

分配給該插件的後臺選項

來源

2012-06-09 20:05:50 Rab

可以調用與像任何IMG SRC參數插件：

$(function() { 
    $.vegas({ 
    src:'/images/background.jpg' 
    }); 
});

從PHP /拼音/ Python或任何你的後端是剛剛獲得的隨機文件名。或者你可以創建一個JavaScript數組並從中選擇一個隨機項。

來源

2012-06-09 19:55:39 cnkt

我已經調用這種方式的功能。就像我說的，我可以找到一張圖片。只是想把一堆圖像放在一個文件夾中，並且每頁加載一個隨機圖像顯示 – LightningWrist

答案是這樣的：「把一堆圖像放在一個文件夾中，然後把這些路徑寫入一個JS數組中，然後選擇一個隨機的從這個陣列「 – cnkt

在剛走到一個超級簡單的途徑和所用<?php echo rand(1,7); ?>.jpg'該src：

來源

2012-06-10 16:42:49 LightningWrist

海事組織這基本上是什麼@cnkt說（和其他類似） - 我會考慮接受該答案，並可能評論或編輯的答案包括PHP特定的解決方案。 –

而不是使用rand（）函數（它會給你重複的路徑，我會把它們放在一個數組中，而不是使用array_shuffle。 –

我不會，如果它爲時已晚，但我找到了解決這個問題。

第一步創建洗牌功能的陣列：

function shuffle(o) { 
    for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); 
    return o; 
}

第二步創建一個數組與你的照片的來源，而params，然後用隨機播放功能：

var vegasArray = [ 
    { src: "/pic1.jpg", fade: 1000}, 
    { src: "/pic2.jpg", fade: 1000}, 
    { src: "/pic3.jpg", fade: 1000}, 
    ... 
]; 
shuffle(vegasArray);

最後一步將您的陣列添加到拉斯維加斯滑塊參數中：

$.vegas(
    'slideshow', { 
     delay: 13000, 
     backgrounds: vegasArray 
    })(
    'overlay', { 
     src: 'img/overlay.png', 
     opacity: 0.9 
    });

通常這樣做！希望有所幫助！ :)

來源

2014-04-11 10:47:30

更改jquery插件

回答

相關問題