replace src and back on click event

Question

This is my function to go through images:

var src = event.target.src;
        popupImageElem.src = (src);
        //popupImageElem.src = src.replace('/thumb/','/big/');
        TweenLite.to([overlayElem, popupElem], .5, {opacity: 1, visibility: 'visible'});
        $(document).on('click','.left-button',(e) => {
            var srcPrev = this.viewModel.getPrevThumbnailBySrc(popupImageElem.src);
            popupImageElem.src = (srcPrev);
            //popupImageElem.src = srcPrev.replace('/thumb/','/big/');
        });
        $(document).on('click','.right-button',(e) => {
            var srcNext = this.viewModel.getNextThumbnailBySrc(popupImageElem.src);
            popupImageElem.src = (srcNext);
            //popupImageElem.src = srcNext.replace('/thumb/','/big/');
        });

I want to change the image src /thumb/ to /big/ when you click next but it has to go back to /thumb/ again when you go to the next image and when on the next image it should change /temp/ to /big/ again.

if i unquote the commented code it replaces it but doesn't change it back so it wont be finding the next image since that works on url which contains /thumb/

Please create an fiddle example,it will be easy to understand the issue then — abhi, Jan 29 '16 at 12:33

score 0 · Answer 1 · edited May 23 '17 at 11:59

If your using JQuery 1.8 or previous version, You should may take a look at the Jquery basic .toogle() Which allowed you to make something like that :

$( "#target" ).toggle(function() {
    alert( "First handler for .toggle() called." );
}, function() {
    alert( "Second handler for .toggle() called." );
});

However, since it's removed from Jquery 1.9, you can create your own little plugin : Come From Felix Kling --> here and work really good for me.

(function($) {
    $.fn.clickToggle = function(func1, func2) {
        var funcs = [func1, func2];
        this.data('toggleclicked', 0);
        this.click(function() {
            var data = $(this).data();
            var tc = data.toggleclicked;
            $.proxy(funcs[tc], this)();
            data.toggleclicked = (tc + 1) % 2;
        });
        return this;
    };
}(jQuery));

replace src and back on click event

1 Answers1