当前位置： 文江博客话题详情

如何运行 jQuery 插件上定义的函数？

发布于 2024-12-18 06:56:20 字数 5058 浏览 1 评论 0原文

我在网上搜索了 3 天，找到了解决我的简单问题的方法。 我尝试从此脚本的外部 标记中运行 pause 函数：http://www.twospy.com/galleriffic/js/jquery.galleriffic.js

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

我尝试了这样的事情： pause

编辑：整个脚本：

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

原文

I have searched for 3 days the web to find a solution to my simple problem.
I try to run the pause function in a external <a> tag from this script: http://www.twospy.com/galleriffic/js/jquery.galleriffic.js

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

I tried something like this: <a href="javascript:fn.galleriffic.extend.pause()">pause</a>

edit: whole script:

<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:              '‹ Previous Photo',
                nextLinkText:              'Next Photo ›',
                nextPageLinkText:          'Next ›',
                prevPageLinkText:          '‹ 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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（4）

沫雨熙 2024-12-25 06:56:20

由于 Galleriffic 是一个作用于 DOM 元素的 jQuery 扩展，它应该是：

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

其中 myselector 是对附加了图库的任何元素的引用 [例如 '#thumbs'如果您使用与 Galleriffic 示例中相同的元素 ID。]

理想情况下，在 JS 文件中进行此关联，而不是在 HTML 中内联，首先提供链接和 ID：

<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 内联视为“olde worlde”]

As Galleriffic is a jQuery extension that acts on DOM elements it should be:

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

where myselector is a reference to whichever element has had the gallery attached to it [e.g. '#thumbs' if you're using the same element IDs as in the Galleriffic examples.]

Ideally, make this association in your JS files rather than doing it inline in the HTML by first giving your link and ID:

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

and then:

$(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');
    });
});

[rationale - in modern HTML putting your Javascript inline is considered "olde worlde"]

回复 原文
画尸师 2024-12-25 06:56:20

要调用不带参数的函数（例如这个函数），您应该像 pause() 那样调用它。

To invoke a function with no parameters (such as this one), you should call it like pause().

回复 原文
太阳哥哥 2024-12-25 06:56:20

试试这个

yourobjectname.pause();

try this

yourobjectname.pause();
回复 原文
长不大的小祸害 2024-12-25 06:56:20

有什么原因

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

无法工作吗？
或者它暂停了不确定的时间？

如果是这样，只需创建一个新函数并在 a.click 事件中调用它:)

Any reason why

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

wont work?
or is it pausing for undefined time?

if so just make a new function and call it on your a.click event :)

回复 原文
~没有更多了~

关于作者

划一舟意中人

暂无简介

文章
评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

Promise

文章 0 评论 0

qq_lbRlsh

文章 0 评论 0

待＂谢繁草

文章 0 评论 0

yy2010hell

文章 0 评论 0

漫无边际

文章 0 评论 0

傲娇萝莉攻

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文