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;
}

      

+3


source to share


1 answer


Blockquote
Your problem seems to be that the jQuery loop uses hardcoded values ​​and doesn't update when its parent is resized. He doesn't respond. Use Cycle 2. - Andrei Georgiou

Cycle 2 solved the problem.

To fix the problem, you need to include the following code:



<div class="cycle-slideshow" data-cycle-fx="none" data-cycle-auto-height="calc" data-cycle-pause-on-hover="true" data-cycle-speed="0.5s">

This has replaced .slideshow-block. Without a declared speed, it won't load properly with masonry.

Many thanks to Andrey

+1


source







All Articles