如何運行一個jQuery插件上定義的函數？

我已經搜索了3天的網絡找到解決我的簡單問題。我嘗試從這個腳本在外部<a>標籤運行pause功能：http://www.twospy.com/galleriffic/js/jquery.galleriffic.js 如何運行一個jQuery插件上定義的函數？

pause: function() { 
      this.isSlideshowRunning = false; 
      if (this.slideshowTimeout) { 
       clearTimeout(this.slideshowTimeout); 
       this.slideshowTimeout = undefined; 
      }

我想是這樣的：<a href="javascript:fn.galleriffic.extend.pause()">pause</a>

編輯：整個腳本：

<html> 
<head> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
    <link rel="stylesheet" href="css/galleriffic-2.css" type="text/css" /> 
    <script type="text/javascript" src="../js/jquery.js"></script> 
    <script type="text/javascript" src="js/jquery.galleriffic.js"></script> 
    <script type="text/javascript" src="js/jquery.opacityrollover.js"></script> 
    <!-- We only want the thunbnails to display when javascript is disabled --> 
    <script type="text/javascript"> 
     document.write('<style>.noscript { display: none; }</style>'); 
    </script> 
</head> 
<body> 
      <!-- Start Advanced Gallery Html Containers --> 
      <div id="gallery" class="content"> 
       <div id="controls" class="controls"></div> 
       <div class="slideshow-container"> 
        <div id="loading" class="loader"></div> 
        <div id="slideshow" class="slideshow"></div> 
       </div> 
       <a id="sstop" href="#">pause</a> <!--here the link--> 
       <div id="caption" class="caption-container"></div> 
      </div> 
      <div id="thumbs" class="navigation"> 
       <ul class="thumbs noscript"> 
        <li> 
       ... 
       </ul> 
      </div> 
      <div style="clear: both;"></div> 

    <script type="text/javascript"> 
    var galleryswtch=0; 
     jQuery(document).ready(function($) { 
      // We only want these styles applied when javascript is enabled 
      $('div.navigation').css({'width' : '300px', 'float' : 'left'}); 
      //$('div.content').css('display', 'none'); 

      // Initially set opacity on thumbs and add 
      // additional styling for hover effect on thumbs 
      var onMouseOutOpacity = 0.67; 
      $('#thumbs ul.thumbs li').opacityrollover({ 
       mouseOutOpacity: onMouseOutOpacity, 
       mouseOverOpacity: 1.0, 
       fadeSpeed:   'fast', 
       exemptionSelector: '.selected' 
      }); 

      // Initialize Advanced Galleriffic Gallery 
      var gallery = $('#thumbs').galleriffic({ 
       delay:      2500, 
       numThumbs:     3, 
       preloadAhead:    10, 
       enableBottomPager:   true, 
       maxPagesToShow:   11, 
       imageContainerSel:   '#slideshow', 
       controlsContainerSel:  '#controls', 
       captionContainerSel:  '#caption', 
       loadingContainerSel:  '#loading', 
       renderSSControls:   true, 
       renderNavControls:   true, 
       playLinkText:    'Play Slideshow', 
       pauseLinkText:    'Pause Slideshow', 
       prevLinkText:    '&lsaquo; Previous Photo', 
       nextLinkText:    'Next Photo &rsaquo;', 
       nextPageLinkText:   'Next &rsaquo;', 
       prevPageLinkText:   '&lsaquo; Prev', 
       enableHistory:    false, 
       autoStart:     false, 
       syncTransitions:   true, 
       defaultTransitionDuration: 900, 
       onSlideChange:    function(prevIndex, nextIndex) { 
        // 'this' refers to the gallery, which is an extension of $('#thumbs') 
        this.find('ul.thumbs').children() 
         .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end() 
         .eq(nextIndex).fadeTo('fast', 1.0); 
       }, 
       onPageTransitionOut:  function(callback) { 
        this.animate({opacity: '0'}, 500, 'linear', callback); 

       }, 
       onPageTransitionIn:  function() { 
        this.animate({opacity: '1'}, 500, 'linear'); 
       } 
      }); 

      $('#sstop').click(function() {$('#gallery').galleriffic('pause');}); //here the js 
     }); 
    </script> 
</body>

來源

2011-11-25 p.oner

作爲Galleriffic是一個jQuery擴展作用於DOM元素應該是：

$(myselector).galleriffic("pause");

其中myselector是取其元件已連接到它的庫中的參考[例如。'#thumbs'如果你使用相同的元素ID作爲Galleriffic實例]

理想的情況下，使該協會在您的JS文件，而不是首先給你的鏈接，ID直列做的HTML：

<a href="#" id="pause_link"> Pause </a>

然後：

$(document).ready(function() { 
    // do all of the rest of your galleriffic setup 
    $('#thumbs').galleriffic(
     // initial options 
    ); 

    // and then link the pause link with the gallery 
    $('#pause_link').click(function() { 
     $('#thumbs').galleriffic('pause'); 
    }); 
});

[理 - 現代HTML把你的Javascript內聯被認爲是「奧爾德worlde」]

來源

2011-11-25 13:23:47 Alnitak

將在downvoter請小心解釋？ AFAIK（我已經完成了jQuery編程），這是正確的答案！ – Alnitak

是的這是這個definitiv正確的答案。但我怎樣才能寫得很精確？對於這個問題抱歉，我是一個學習者。 –

您可以爲圖庫的實例分配一個常規的舊javascript變量（比如，var gallery）（就像它們在此圖庫的主樣本頁面上那樣）。然後你可以訪問它的暫停方法。沒有必要通過使用jQuery來查找對象。但是，這不是我的低調。 – James

要調用一個沒有參數的函數（比如這個），你應該把它叫做pause()。

來源

2011-11-25 13:21:44

嘗試這種

yourobjectname.pause();

來源

2011-11-25 13:23:00 Kaiser

任何REAS爲什麼

$('#myElement').delay(2000)

將無法正常工作？還是暫停未定義的時間？

如果是這樣只是做一個新的功能，並調用它在你的a.click事件:)

來源

2011-11-25 13:42:14

這是一個畫廊幻燈片窗口小部件 - 其「暫停」方法_stops_幻燈片放映 - 它與'.delay'完全無關。 – Alnitak

如何運行一個jQuery插件上定義的函數？

回答

相關問題