gallery.js

// 1 identify current element in context
// 2 'build' carousel structure
// 3 display next/prev buttons
var $currentEl = $('#main_product_image'),
    $mainImageLink = $('#main_product_large_image'),
    key = $currentEl.attr('src'),
    $elIncontext = $('li[data-medium-img="' + key + '"]'),
    $parentEl = $elIncontext.parent('ul'),
    $allImages = $parentEl.find('li'),
    totalEls = $allImages.length,
    currentIndex = -1;

$parentEl.find('li').each(function(idx) {  
  if ($(this).data('medium-img') === key) {
    currentIndex = idx;
  }
});

$('#main_product_large_image').highslide({ afterOpen: function() {
    var $highslide = $('.ui-highslide');

    $('<span class="highslide-link prev-link">PREV</span>').appendTo($highslide);
    $('<span class="highslide-link next-link">NEXT</span>').appendTo($highslide);

    $('.prev-link').on('click', function(event) {
      console.log('prev');
      event.preventDefault();
      return false;
    });
    $('.next-link').on('click', function(event) {
      console.log('next');
      event.preventDefault();
      return false;
    });
  }
});