Responsive img in jquery array

I found an array of images created with jquery. I am trying to get imgs in an array to be responsive. The end goal is to make them play well with masonry script, so I have generic grid classes that masonry uses. I got it to work only with width and height, but never together. Not sure what I am doing wrong and I could not find a reliable answer. If I need to go ahead and include masonry script and code samples that I can.

I'm not that good at jquery or java so any help would be appreciated.

taylorbingham.com/ site where script runs alongside masonry. The image will not change.

The original script I found to create a loop. http://jsfiddle.net/Kz6Gk/353/

My changes / code https://jsfiddle.net/taylovision/gmxw6pbL/

.grid {
  background: #DDD;
}

.grid:after {
  content: '';
  display: block;
  clear: both;
}

.grid-sizer,
.grid-item {
  width: 25%;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  width: 100%;
}

.slideshow-block {
  width: 100%;
  background: #111;
}

a.link {
  width: 100%;
  display: block;
  z-index: 10;
}

a.link:hover {
  display: block;
}

.slides {
  width: inherit;
  z-index: 0;
  visibility: hidden;
}

.slides.active {
  width: inherit;
  visibility: visible;
}

.slides.active img {
  width: inherit;
  visibility: visible;
}