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;
}
source to share
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
source to share