0

I am using Fotorama for my slideshow but does not have an option among the presets to stop the slide on the last image...

the following script contains the navigation buttons and I am posting it because maybe it may be helpful...I have been looking into it but I am not familiar with coding jquery...but I am trying to understand it

I notice how the is a var size - 5 that tells the script how many slides there are... and there is the var intervalInput = $('#fotorama-interval'); that I think may be needed to tell the slideshow that it reached the last image?

please help me if you can

<script>
    $(function () {
        var $document = $(document);
        var stage = $('#chromeless-stage');
        var control = $('#fotorama-control');
        var fotorama = $('#fotorama');

        var activeIndex;
        var arrows = $('#fotorama-arrows').find('input');
        var thumbs = $('#fotorama-thumbs').find('a');

        var size = 5;

        // FOTORAMA
        fotorama.fotorama({
            data: [
                {img: 'images/start-slide-1.jpg'},
                {img: 'images/start-slide-2.jpg'},
                {img: 'images/start-slide-3.jpg'},
                {img: 'images/start-slide-4.jpg'},
                {img: 'images/start-slide-5.jpg'}

            ],
            width: '100%',
            height: 'auto',
            minHeight: 600,
            fitToWindowHeight: true,
            fitToWindowHeightMargin: 0,
            margin: 0,
            cropToFit: true,
            shadows: false,
            transitionDuration: 888,
            loop: true,
            autoplay: 2500,
            stopAutoplayOnAction: false,
            transition: 'fade', 
            nav: 'none', 
            arrows: false,

            onClick: function(data)
            { window.location = 'about-ana-parzych-custom-cakes.html' },

            /*transition: fade,*/

            onShowImg: function(data, auto) {
                if (!auto && playingFLAG) {
                    pause();
                }
                activeIndex = data.index;
                thumbs.not(
                        thumbs.eq(activeIndex).addClass('active')
                    ).removeClass('active');

                if (activeIndex == 0) {
                    arrows.slice(0,2).attr({disabled: 'disabled'});
                } else {
                    arrows.slice(0,2).removeAttr('disabled');
                }

                if (activeIndex == size - 1) {
                    arrows.slice(2).attr({disabled: 'disabled'});
                } else {
                    arrows.slice(2).removeAttr('disabled');
                }
            }
        });

        // SLIDESHOW
        var playButton = $('#fotorama-play');
        var pauseButton = $('#fotorama-pause');
        var intervalInput = $('#fotorama-interval');

        var playingFLAG = false;

        function changeThumbBorderColor() {
            thumbs.parent()[(playingFLAG ? 'add' : 'remove') + 'Class']('autoplay');
        }

        function start() {
            fotorama.trigger('play'); // Start playing
            playingFLAG = false;

            playButton.attr('disabled', 'disabled');
            pauseButton.removeAttr('disabled');
            changeThumbBorderColor();
        }

        function pause() {
            fotorama.trigger('pause'); // Pause
            playingFLAG = true;

            pauseButton.attr('disabled', 'disabled');
            playButton.removeAttr('disabled');
            changeThumbBorderColor();
        }

        playButton.click(start);
        pauseButton.click(pause);

        // Custom interval
        intervalInput.bind('click change keypress cut copy paste input', function(){
            fotorama.data('options').autoplay = intervalInput.val()*1000;
            if (playingFLAG) {
                fotorama.trigger('pause');
                fotorama.trigger('play');
            }
        });

        // CUSTOM THUMBS AND ARROWS
        arrows.bind('click', function(){
            var index = $(this).attr('data-action');
            if (index == 'next') {
                index = activeIndex + 1;
            } else if (index == 'prev') {
                index = activeIndex - 1;
            }

            if (index > size - 1) {
                index = size - 1;
            }

            if (index < 0) {
                index = 0;
            }

            fotorama.trigger('showimg', index);
        });

        thumbs.bind('click', function(e){
            fotorama.trigger('showimg', thumbs.index(this));
            return false;
        });

        $document.bind('keydown', function(e){
            if (!fotorama.hasClass('fotorama_fullscreen') && !intervalInput.is(':focus')) {
                if (e.keyCode == 39 || e.keyCode == 40) {
                    fotorama.trigger('showimg', 'next');
                    return false;
                } else if (e.keyCode == 37 || e.keyCode == 38) {
                    fotorama.trigger('showimg', 'prev');
                    return false;
                }
            }
        });

        // FULLSCREEN
        $('#fotorama-fullscreen').bind('click', function(){
            fotorama.trigger('fullscreenopen');
        });

        // RESCALE
        /*var rescale = $('#fotorama-rescale').find('input');
        rescale.bind('click', function(){
            var $this = $(this);
            rescale.not(
                    $this.attr({disabled: 'disabled'})
                ).removeAttr('disabled');
            var newSize = $this.val().split(', ');
            var width = newSize[0];
            var height = newSize[1];
            if (width == '100%') {
                width = stage.width();
                control.css({width: '50%'});
            } else {
                control.css({width: ''});
            }

            fotorama.trigger('rescale', [width, false, 700/467, 333]);
        });*/
    });
</script>

1 Answer 1

1

If you use Fotorama 3:

var fotorama = $('#fotorama');
fotorama.fotorama({
    onShowImg: function () {
        var data = fotorama.data();
        if (data.size - data.index === 1) {
            fotorama.trigger('pause');
        } 
    }
});

Fiddle: http://jsfiddle.net/artpolikarpov/67e4q/12/


Fotorama 4 has a different API:

$('.fotorama').on('fotorama:showend', function (e, fotorama) {
    if (fotorama.size - fotorama.activeIndex === 1) {
        fotorama.stopAutoplay();
    }
});

Fiddle: http://jsfiddle.net/artpolikarpov/HRzdw/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.