image array loop JS CSS

Question

im trying to get the images to be placed in side the div so h/w can be controlled and i can seem to get it to work with jquery 3.2.1 it only works with jquery 2.1.1, is there an better way of write this code, i was trying to have a simple click "next" div and change image with loop.

$(function() {
var images = [
  "http://placehold.it/300x150/f0f&text=1"
  ,"http://placehold.it/300x150/cf5&text=2"
  ,"http://placehold.it/300x150/b15&text=3"
  ,"http://placehold.it/300x150/c59&text=4"
  ,"http://placehold.it/300x150/ac2&text=5"
  ,"http://placehold.it/300x150/bb5&text=6"
];

// ======================================

var tot = images.length;
var c = 0; // current image

function loadImage(){
  $("<img/>").attr("src",images[c]).load(function() {
      $('#gallery').html( this );
  }); 
}
loadImage(); // for the page load

$('#prev').click(function(){
  id=this; c--;
  c=c==-1?tot-1:c%tot;
  loadImage(); 
});

$('#next').click(function(){
  id=this; c++;
  c=c==-1?tot-1:c%tot;
  loadImage(); 
});
});

#gallery{
    width:150px;
    height:50px;
    background:#ddd;
    margin-top:8px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pagination">
  <div id="prev" class="btn" style="position:">PREV</div>
  <div id="next" class="btn" style="position:">NEXT</div>
</div>
  
<div id="gallery">
  
  
</div>

Answer 1

The use of load() as an event binding was removed in 3.X. It is now only for fetching resources, with the first parameter being the url of the resource to retrieve.

http://api.jquery.com/load/

"Note: Prior to jQuery 3.0, the event handling suite also had a method named .load(). Older versions of jQuery determined which method to fire based on the set of arguments passed to it."

Use on('load') instead.

Answer 2

Substitute

$("<img/>").attr("src",images[c]).on("load", function() {
  $('#gallery').html( this );
});

for

$("<img/>").attr("src",images[c]).load(function() {
  $('#gallery').html( this );
});