Reputation: 35

How to run a function defined on a jQuery plugin?

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:              '&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>

Upvotes: 2

Answers (4)

Alnitak

Reputation: 339786

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

Upvotes: 3