What part of jquery code is responsible for jump to next image?

Question

I'm working to adapt malihu Sideways gallery and little messed up with jquery code.

I'm trying to change functionality of (clicking on background image for next image load) to (clicking on button for next image load) I know that it sound simple but it isn't.

I can't solve what part of the code is responsible for this function so I can just change the selector.

Here is the code:

$( function() {
  // init Isotope
  var $container = $('.isotope').isotope({
    itemSelector: '.element-item',
    layoutMode: 'fitRows'
  });
  // filter functions
  var filterFns = {
    // show if number is greater than 50
    numberGreaterThan50: function() {
      var number = $(this).find('.number').text();
      return parseInt( number, 10 ) > 50;
    },
    // show if name ends with -ium
    ium: function() {
      var name = $(this).find('.name').text();
      return name.match( /ium$/ );
    }
  };
  // bind filter button click
  $('#filters').on( 'click', 'button', function() {
    var filterValue = $( this ).attr('data-filter');
    // use filterFn if matches value
    filterValue = filterFns[ filterValue ] || filterValue;
    $container.isotope({ filter: filterValue });
  });
  // change is-checked class on buttons
  $('.button-group').each( function( i, buttonGroup ) {
    var $buttonGroup = $( buttonGroup );
    $buttonGroup.on( 'click', 'button', function() {
      $buttonGroup.find('.is-checked').removeClass('is-checked');
      $( this ).addClass('is-checked');
    });
  });

});


    //set default view mode
    $defaultViewMode="full"; //full (fullscreen background), fit (fit to window), original (no scale)
    //cache vars
    $bg=$("#bg");
    $bgimg=$("#bg #bgimg");
    $preloader=$("#preloader");
    $outer_container=$("#outer_container");
    $outer_container_a=$("#outer_container a.thumb_link");
    $toolbar=$("#toolbar");
    $nextimage_tip=$("#nextimage_tip");


$(window).load(function() {
    $toolbar.data("imageViewMode",$defaultViewMode); //default view mode
    ImageViewMode($toolbar.data("imageViewMode"));
    //cache vars
    $customScrollBox=$("#customScrollBox");
    $customScrollBox_container=$("#customScrollBox .container");

    $customScrollBox.height($customScrollBox_container.height());

    //resize browser window functions
    $(window).resize(function() {
        FullScreenBackground("#bgimg"); //scale bg image
    });

    LargeImageLoad($bgimg);
});

    //loading bg image
    $bgimg.load(function() {
        LargeImageLoad($(this));
    });

    function LargeImageLoad($this){
        $preloader.fadeOut("fast"); //hide preloader
        $this.removeAttr("width").removeAttr("height").css({ width: "", height: "" }); //lose all previous dimensions in order to rescale new image data
        $bg.data("originalImageWidth",$this.width()).data("originalImageHeight",$this.height());
        if($bg.data("newTitle")){
            $this.attr("title",$bg.data("newTitle")); //set new image title attribute
        }
        FullScreenBackground($this); //scale new image
        $bg.data("nextImage",$($outer_container.data("selectedThumb")).next().attr("href")); //get and store next image
        if(typeof itemIndex!="undefined"){
            if(itemIndex==lastItemIndex){ //check if it is the last image
                $bg.data("lastImageReached","Y");
                $bg.data("nextImage",$outer_container_a.first().attr("href")); //get and store next image
            } else {
                $bg.data("lastImageReached","N");
            }
        } else {
            $bg.data("lastImageReached","N");
        }
        $this.fadeIn("slow"); //fadein background image
        if($bg.data("nextImage") || $bg.data("lastImageReached")=="Y"){ //don't close thumbs pane on 1st load
            SlidePanels("open"); //close the left pane
        }
        NextImageTip();
    }



    $bgimg.click(
        function(){
    SlidePanels("close").toggle();
});
    $bgimg.click(
        function(){
    SlidePanels("open").toggle();
});


      $("#arrow_indicator").click(
            function(){ //click
                  SlidePanels("open");
            }
      );

      $("#arrow_next").click(
            function(){


      //Code for next image will go here

        }
    ); 



    //Clicking on thumbnail changes the background image
    $outer_container_a.click(function(event){
        event.preventDefault();
        var $this=this;
        $bgimg.css("display","none");
        $preloader.fadeIn("fast"); //show preloader
        //style clicked thumbnail
        $outer_container_a.each(function() {
            $(this).children(".selected").css("display","none");
        });
        $(this).children(".selected").css("display","block");
        //get and store next image and selected thumb 
        $outer_container.data("selectedThumb",$this); 
        $bg.data("nextImage",$(this).next().attr("href"));  
        $bg.data("newTitle",$(this).children("img").attr("title")); //get and store new image title attribute
        itemIndex=getIndex($this); //get clicked item index
        lastItemIndex=($outer_container_a.length)-1; //get last item index
        $bgimg.attr("src", "").attr("src", $this); //switch image
    }); 

    //clicking on large image loads the next one
    $("#arrow_next").click(function(event){
        var $this=$(this);
        if($bg.data("nextImage")){ //if next image data is stored
            $this.css("display","none");
            $preloader.fadeIn("fast"); //show preloader
            $($outer_container.data("selectedThumb")).children(".selected").css("display","none"); //deselect thumb
            if($bg.data("lastImageReached")!="Y"){
                $($outer_container.data("selectedThumb")).next().children(".selected").css("display","none"); //select new thumb
            } else {
                $outer_container_a.first().children(".selected").css("display","none"); //select new thumb - first
            }
            //store new selected thumb
            var selThumb=$outer_container.data("selectedThumb");
            if($bg.data("lastImageReached")!="Y"){
                $outer_container.data("selectedThumb",$(selThumb).next()); 
            } else {
                $outer_container.data("selectedThumb",$outer_container_a.first()); 
            }
            $bg.data("newTitle",$($outer_container.data("selectedThumb")).children("img").attr("title")); //get and store new image title attribute
            if($bg.data("lastImageReached")!="Y"){
                itemIndex++;
            } else {
                itemIndex=0;
            }
            $this.attr("src", "").attr("src", $bg.data("nextImage")); //switch image
        }
    });

    //function to get element index (IE!)
    function getIndex(theItem){
        for ( var i = 0, length = $outer_container_a.length; i < length; i++ ) {
            if ( $outer_container_a[i] === theItem ) {
                return i;
            }
        }
    }

    //toolbar (image view mode button) hover
    $toolbar.hover(
        function(){ //mouse over
            $(this).stop().fadeTo("fast",1);
        },
        function(){ //mouse out
            $(this).stop().fadeTo("fast",0.8);
        }
    ); 
    $toolbar.stop().fadeTo("fast",0.8); //set its original state

    //Clicking on toolbar changes the image view mode
    $toolbar.click(function(event){
        if($toolbar.data("imageViewMode")=="full"){
            ImageViewMode("fit");
        } else if($toolbar.data("imageViewMode")=="fit") {
            ImageViewMode("original");
        } else if($toolbar.data("imageViewMode")=="original"){
            ImageViewMode("full");
        }
    });

    //next image balloon tip
    function NextImageTip(){
        if($bg.data("nextImage")){ //check if this is the first image
            $nextimage_tip.stop().css("right",20).fadeIn("fast").fadeOut(2000,"easeInExpo",function(){$nextimage_tip.css("right",$(window).width());});
        }
    }

    //slide in/out left pane function
    function SlidePanels(action){
        var speed=400;
        var easing="easeInBack";
        if(action=="open"){
            $("#arrow_indicator").fadeTo("fast",0);
            $outer_container.stop().animate({left: 0}, speed,easing);
            $bg.stop().animate({left: 585}, speed,easing);
        } else {
            $outer_container.stop().animate({left: -710}, speed,easing);
            $bg.stop().animate({left: 0}, speed,easing,function(){$("#arrow_indicator").fadeTo("fast",1);});
        }
    }

//Image scale function
function FullScreenBackground(theItem){
    var winWidth=$(window).width();
    var winHeight=$(window).height();
    var imageWidth=$(theItem).width();
    var imageHeight=$(theItem).height();
    if($toolbar.data("imageViewMode")!="original"){ //scale
        $(theItem).removeClass("with_border").removeClass("with_shadow"); //remove extra styles of orininal view mode
        var picHeight = imageHeight / imageWidth;
        var picWidth = imageWidth / imageHeight;
        if($toolbar.data("imageViewMode")!="fit"){ //image view mode: full
            if ((winHeight / winWidth) < picHeight) {
                $(theItem).css("width",winWidth).css("height",picHeight*winWidth);
            } else {
                $(theItem).css("height",winHeight).css("width",picWidth*winHeight);
            };
        } else { //image view mode: fit
            if ((winHeight / winWidth) > picHeight) {
                $(theItem).css("width",winWidth).css("height",picHeight*winWidth);
            } else {
                $(theItem).css("height",winHeight).css("width",picWidth*winHeight);
            };
        }
        //center it
        $(theItem).css("margin-left",((winWidth - $(theItem).width())/2)).css("margin-top",((winHeight - $(theItem).height())/2));
    } else { //no scale
        //add extra styles for orininal view mode
        $(theItem).addClass("with_border").addClass("with_shadow");
        //set original dimensions
        $(theItem).css("width",$bg.data("originalImageWidth")).css("height",$bg.data("originalImageHeight"));
        //center it
        $(theItem).css("margin-left",((winWidth-$(theItem).outerWidth())/2)).css("margin-top",((winHeight-$(theItem).outerHeight())/2));
    }
}

//image view mode function - full or fit
function ImageViewMode(theMode){
    $toolbar.data("imageViewMode", theMode); //store new mode
    FullScreenBackground($bgimg); //scale bg image
    //re-style button
    if(theMode=="full"){
        $toolbar.html("<span class='lightgrey'>CATEGORY &rsaquo;</span> LOGO");
    } else if(theMode=="fit") {
        $toolbar.html("<span class='lightgrey'>CATEGORY &rsaquo;</span> APP DESIGN");
    } else if(theMode=="fit") {               {
            $toolbar.html("<span class='lightgrey'>CATEGORY &rsaquo;</span> WEB DESIGN");
      }

      } else {
        $toolbar.html("<span class='lightgrey'>CATEGORY &rsaquo;</span> 3D");
    }
}

//preload script images
var images=["ajax-loader_dark.gif","round_custom_scrollbar_bg_over.png"];
$.each(images, function(i) {
  images[i] = new Image();
  images[i].src = this;
});

Answer 1

Its going to be at:

  $outer_container_a.click(function(event){

You can change this to:

 $(".CLASSNAME").click(function(event){

Seeing the source and how it actually works would help too.