Как запустить функцию, определенную в плагине jQuery? - PullRequest
Новая
       2

Как запустить функцию, определенную в плагине jQuery?

2 голосов
/ 25 ноября 2011

Я искал в интернете 3 дня, чтобы найти решение моей простой проблемы.Я пытаюсь запустить функцию pause во внешнем теге <a> из этого сценария: http://www.twospy.com/galleriffic/js/jquery.galleriffic.js

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

Я пробовал что-то вроде этого: <a href="javascript:fn.galleriffic.extend.pause()">pause</a>

edit: wholeскрипт: 

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

Ответы [ 4 ]

3 голосов
/ 25 ноября 2011

Поскольку Galleriffic является расширением jQuery, которое действует на элементы DOM, оно должно быть: 

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

, где myselector - ссылка на тот элемент, к которому прикреплена галерея [например, '#thumbs', если вы используете те же идентификаторы элементов, что и в примерах Galleriffic.]

В идеале, сделайте эту связь в ваших JS-файлах, а не вставляйте ее в 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 считается «старым»)

0 голосов
/ 25 ноября 2011

Любая причина, почему 

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

не работает?или это приостановка на неопределенное время?

, если это так, просто создайте новую функцию и вызовите ее для вашего события a.click:)

0 голосов
/ 25 ноября 2011

попробуйте 

yourobjectname.pause();
0 голосов
/ 25 ноября 2011

Чтобы вызвать функцию без параметров (например, эту), вы должны вызвать ее как pause().

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...