Develop Reference

Masonary image not positioning correctly on ajax call

I am using https://masonry.desandro.com/ v4.2.2 and the minimal code looks like:
<div class="fk-grid-container" id="ajax-concepts">
<?php
//This is just the wordpress loop and currently its looping and showing 3 items
//LOOP START
while ( $the_query->have_posts() ) :
$the_query->the_post();
$thumbnail_url = get_the_post_thumbnail_url('','full');
?>
<div class="fk-grid-item">
<a href="<?php echo $thumbnail_url; ?>" class="gallery-link">
<div
class="boxes"
data-aos="fade-down"
data-aos-duration="2000"
>
<div class="images-box">
<img
src="<?php echo $thumbnail_url; ?>"
class="img-fluid"
alt="<?php the_title(); ?>"
/>
</div>
</div>
</a>
</div>
<?php
//LOOP END
endwhile;
wp_reset_postdata();
?>
</div>
And, I have initalized it as :
jQuery(".fk-grid-container").imagesLoaded(function () {
jQuery(".fk-grid-container").masonry({
itemSelector: ".fk-grid-item",
gutter: 30,
});
AOS.refresh();
});
Upto this point its fine, now on click load more, I am making an ajax call and on success it is returning html as:
<div class="fk-grid-item">
<a href="http://famous.test/wp-content/uploads/2021/08/02.png" class="gallery-link">
<div class="boxes" data-aos="fade-down" data-aos-duration="2000">
<div class="images-box"><img src="http://famous.test/wp-content/uploads/2021/08/02.png" class="img-fluid" alt="Image 3" /></div>
</div>
</a>
</div>
<div class="fk-grid-item">
<a href="http://famous.test/wp-content/uploads/2021/08/05.png" class="gallery-link">
<div class="boxes" data-aos="fade-down" data-aos-duration="2000">
<div class="images-box"><img src="http://famous.test/wp-content/uploads/2021/08/05.png" class="img-fluid" alt="Image 2" /></div>
</div>
</a>
</div>
<div class="fk-grid-item">
<a href="http://famous.test/wp-content/uploads/2021/08/06.png" class="gallery-link">
<div class="boxes" data-aos="fade-down" data-aos-duration="2000">
<div class="images-box"><img src="http://famous.test/wp-content/uploads/2021/08/06.png" class="img-fluid" alt="Image 1" /></div>
</div>
</a>
</div>
and my ajax success:
success: function(data){
var $data = jQuery(data);
if($data.length){
jQuery(".fk-grid-container").append(data).masonry( 'reloadItems' );
AOS.refresh();
}
},
But, with this code the image are not aligned to correct position and is displayed as:
This is what it looked initially:
What it should look like:
Update:
I have tried with:
var $grid = $('.fk-grid-container');
$grid.masonry()
.append( $data )
.masonry( 'appended', $data )
.layout();
AOS.refresh();
I have tried with above code, it is adding the new content but it is not increasing the height of current container and instead overlapping over next container. With this the load data button is covered by the data so I can't make another request.

On load more, it looks like you are not making use of imagesLoaded correctly.
Let's take a look at your initialization code:
jQuery(".fk-grid-container").imagesLoaded(function () {
jQuery(".fk-grid-container").masonry({
itemSelector: ".fk-grid-item",
gutter: 30,
});
AOS.refresh();
});
above one is correct
But, on success (according to your last update) you are doing as:
var $grid = $('.fk-grid-container');
$grid.masonry()
.append( $data )
.masonry( 'appended', $data )
.layout();
AOS.refresh();
Actually, the above code is somehow correct you just need to update the layout once all the images are loaded and you have to update that layout part to masonry (because it looks like you are using jquery). Just like here, mentioned in the first block https://masonry.desandro.com/methods.html
So, the final code should look like this:
var $grid = $('.fk-grid-container');
//appending the data on the grid
$grid.masonry()
.append( $data )
.masonry( 'appended', $data );
$grid.imagesLoaded(function(){
//once images are fully loaded, you update the layout
$grid.masonry();
AOS.refresh();
});
Hope, it helps

You need to use appended & reloadItems method after click to to Load More button and then call imageLoaded method to check all images are loaded or not then again need to call layout method in masonry for adjusting(update) items.
Helpful links for masonry methods:
https://masonry.desandro.com/methods.html#layout-masonry
https://masonry.desandro.com/methods.html#appended
https://masonry.desandro.com/methods.html#reloaditems
I hope below snippet will help you a lot.
var $grid = $('#ajax-concepts') //grid container
$grid.imagesLoaded().done(function (instance) {
$grid.masonry({
itemSelector: ".fk-grid-item",
gutter: 30,
});
// Initialize AOS plugin
AOS.init();
});
// $data like ajax success items
var $data = `<div class="fk-grid-item">
<a href="#" class="gallery-link">
<div class="boxes" data-aos="fade-down" data-aos-duration="2000">
<div class="images-box">
<img src="https://via.placeholder.com/400x650/099900/" class="img-fluid" alt="Title" />
</div>
</div>
</a>
</div>
<div class="fk-grid-item">
<a href="#" class="gallery-link">
<div class="boxes" data-aos="fade-down" data-aos-duration="2000">
<div class="images-box">
<img src="https://via.placeholder.com/400x300/999000/" class="img-fluid" alt="Title" />
</div>
</div>
</a>
</div>
<div class="fk-grid-item">
<a href="#" class="gallery-link">
<div class="boxes" data-aos="fade-down" data-aos-duration="2000">
<div class="images-box">
<img src="https://via.placeholder.com/400x220/000000/" class="img-fluid" alt="Title" />
</div>
</div>
</a>
</div>`;
$(document).on('click', '#loadmore', function() {
$grid.masonry().append($data).masonry('appended', $data).masonry('reloadItems');
$grid.imagesLoaded(function () {
//once images are fully loaded, you update the layout
$grid.masonry('layout');
// Initialize AOS plugin after append new items
AOS.init();
//Page scroll down at load more button
$('html, body').animate({
scrollTop: $("#loadmore").offset().top
},1500);
});
});
* { box-sizing: border-box; }
.fk-grid-container{
display: flex;
flex-wrap: wrap;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.fk-grid-container:after {
content: '';
display: block;
clear: both;
}
.fk-grid-item{
max-width: calc(33.333333% - 30px);
margin-bottom: 30px;
}
.img-fluid{
max-width: 100%;
display: block;
}
#media(max-width: 768px){
.fk-grid-item{
max-width: calc(50% - 30px);
}
}
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout#4/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded#4/imagesloaded.pkgd.min.js"></script>
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js"></script>
<div class="fk-grid-container" id="ajax-concepts">
<div class="fk-grid-item">
<a href="#" class="gallery-link">
<div class="boxes" data-aos="fade-down" data-aos-duration="2000">
<div class="images-box">
<img src="https://via.placeholder.com/400x500/0000FF/" class="img-fluid" alt="Title" />
</div>
</div>
</a>
</div>
<div class="fk-grid-item">
<a href="#" class="gallery-link">
<div class="boxes" data-aos="fade-down" data-aos-duration="2000">
<div class="images-box">
<img src="https://via.placeholder.com/400x300/FF00FF/" class="img-fluid" alt="Title" />
</div>
</div>
</a>
</div>
<div class="fk-grid-item">
<a href="#" class="gallery-link">
<div class="boxes" data-aos="fade-down" data-aos-duration="2000">
<div class="images-box">
<img src="https://via.placeholder.com/400x600/00FFFF/" class="img-fluid" alt="Title" />
</div>
</div>
</a>
</div>
<div class="fk-grid-item">
<a href="#" class="gallery-link">
<div class="boxes" data-aos="fade-down" data-aos-duration="2000">
<div class="images-box">
<img src="https://via.placeholder.com/400x450/09F900/" class="img-fluid" alt="Title" />
</div>
</div>
</a>
</div>
</div>
<div style="text-align: center; padding: 20px; clear: both;">
<button type="button" style="padding: 10px 40px;" id="loadmore">Load More</button>
</div>

PhotoSwipe and Masonry Navigation Arrows Missing

I'm working on a portfolio website using both Masonry and PhotoSwipe. The navigation arrows do not show and gallery is not navigable via gestures.
Can PhotoSwipe be used with Masonry?
Here's a bit of my code:
<div class="main-container">
<div class="main clear fix">
<div id="content">
<!-- Portfolio Rendering -->
<div class="grid">
div class="grid-sizer">
<div class="grid-item">
<a href="portfolio/01.jpg" data-size="900x1200" data-med="portfolio/600/01.jpg" data-med-size="600x800" data-author="">
<img src="portfolio/600/01.jpg" alt="" />
</a>
</div>
<div class="grid-item">
<a href="portfolio/02.jpg" data-size="900x1200" data-med="portfolio/600/02.jpg" data-med-size="600x900" data-author=""><img src="portfolio/600/02.jpg" alt="" />
</a>
</div>
<div class="grid-item"><a href="portfolio/03.jpg" data-size="900x1200" data-med="portfolio/600/03.jpg" data-med-size="600x800" data-author=""> <img src="portfolio/600/03.jpg" alt="" />
</a>
</div></div></div>
</div></div></div>
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<div class="pswp__bg"></div>
<div class="pswp__scroll-wrap">
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button> <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button> <div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div></div></div></div>
<!-- <div class="pswp__loading-indicator">
<div class="pswp__loading-indicator__line">
</div></div> -->
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
</div></div></div>

I know that it's a bit late, but I was searching for a fix with no luck, until eventually I figured it out. My HTML, though, was a bit different, based on the suggestion on the official documentation of PhotoSwipe:
<div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<div class="grid-sizer"></div>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="large-image.jpg" itemprop="contentUrl" data-size="600x400">
<img src="small-image.jpg" itemprop="thumbnail" alt="Image description" />
</a>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="large-image.jpg" itemprop="contentUrl" data-size="600x400">
<img src="small-image.jpg" itemprop="thumbnail" alt="Image description" />
</a>
</figure>
</div>
When I wrapped the <figure> tag in a div, masonry was working, but PhotoSwipe navigation didn't. If I removed the div, PhotoSwipe navigation was OK but the layout got messed up. Eventually, I removed the .grid-sizer div and, instead, added the class .grid-sizer on the first element of the gallery, which fixed the issue. So, the working markup in my case was something like that (notice the extra class on the first <figure> element):
<div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<figure class="grid-sizer" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="large-image.jpg" itemprop="contentUrl" data-size="600x400">
<img src="small-image.jpg" itemprop="thumbnail" alt="Image description" />
</a>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="large-image.jpg" itemprop="contentUrl" data-size="600x400">
<img src="small-image.jpg" itemprop="thumbnail" alt="Image description" />
</a>
</figure>
</div>
That way, Masonry used the first item to calculate the responsive layout and PhotoSwipe was happy with the markup.

Scroll Down Arrow Javascript

I'm working on a canvas drawing app and I want to have a scroll down arrow show up in a div with a group of images to show the user that they have to scroll down to see the rest of the images, but also I want the user to be able to actually scroll down when touching the arrow. Could someone help me with the script to go about this ? thank you very much.
//////////////HTML/////////////////////////
<div id="branddraw">
<div class="drawings col-md-2">
<div class="pre-scrollable">
<div class="thumb">
<a class="thumbnail" href="#" id="img1">
<img class="img-responsive" src="./assets/colour_imgs/Kcoloring/img1.png" alt="">
</a>
</div>
<div class="thumb">
<a class="thumbnail" href="#" id="img2">
<img class="img-responsive" src="./assets/colour_imgs/Kcoloring/img2.png" alt="">
</a>
</div>
<div class="thumb">
<a class="thumbnail" href="#" id="img3">
<img class="img-responsive" src="./assets/colour_imgs/Kcoloring/img3.png" alt="">
</a>
</div>
<div class="thumb">
<a class="thumbnail" href="#" id="img4">
<img class="img-responsive" src="./assets/colour_imgs/Kcoloring/img4.png" alt="">
</a>
</div>
<div class="thumb">
<a class="thumbnail" href="#" id="img5">
<img class="img-responsive" src="./assets/colour_imgs/Kcoloring/img5.png" alt="">
</a>
</div>
<div class="thumb">
<a class="thumbnail" href="#" id="img6">
<img class="img-responsive" src="./assets/colour_imgs/Kcoloring/img6.png" alt="">
</a>
</div>
</div>
</div>
</div>

Add dynamic divs around 6 image urls using jquery

I need help to render 6 images retrieved from mysql database in mvc razor view. Images 1 and 6 are put in their separate divs called "item". Images 2,3,4 and 5 are all put in one div called "item -item-small" Below is the original rendering:
<div class="owl-photos">
<a href="post.html" class="item-photo">
<img src="images/photos/image-1.jpg" alt="" />image1
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-2.jpg" alt="" />image2
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-3.jpg" alt="" />image3
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-4.jpg" alt="" />image4
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-5.jpg" alt="" />image5
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-6.jpg" alt="" />image6
</a>
</div>
Below is what I want to achieve:
<div class ="owl-photos">
<div class="item">
<a href="post.html" class="item-photo">
<img src="images/photos/image-1.jpg" alt="" />image1
</a>
</div>
<div class="item item-small">
<a href="post.html" class="item-photo">
<img src="images/photos/image-2.jpg" alt="" />image2
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-3.jpg" alt="" />image3
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-4.jpg" alt="" />image4
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-5.jpg" alt="" />image5
</a>
</div>
<div class="item">
<a href="post.html" class="item-photo">
<img src="images/photos/image-6.jpg" alt="" />image6
</a>
</div>
</div>
Any help in using JQuery will be appreciated I do not know how to start this. I can add classes to first element but this is a big challenge
Attempted with the code below:
$(".owl-photos>div:nth-child(1n)").before("<div class="item">");
$(".owl-photos>div:nth-child(1n)").after("</div><div class="item item-small">");
$(".owl-photos>div:nth-child(1n)").after("<div class="item item-small">");
$(".owl-photos>div:nth-child(5n)").after("</div><div class="item ">");
$(".owl-photos>div:nth-child(6n)").after("</div>");

$(function () {
var $result = $('<div class="owl-photos"></div>');
var length = $('.owl-photos a').length;
$('.owl-photos a').each(function (key, item) {
if (key == 0 || key == length - 1) {
var $div = $('<div class="item"></div>').append(item);
$result.append($div);
} else {
var $small = $result.find('.item-small');
console.log($small);
if (!$small.length) {
var $div = $('<div class="item item-small"></div>').append(item);
$result.append($div);
} else {
$small.append(item);
}
}
});
$('.owl-photos').html($result.html());
});
https://jsfiddle.net/atw4gwrr/

You can create elements with JavaScript, append the specific elements to them, then place the new elements into .owl-photos. By appending the <a> elements to the newly made <div>s they are moved from their previous place, that's why you don't see them duplicate.
Below, I get the list of childs, then group them as such:
The .first() child is placed in a <div class="item">, then appended
The :not(:first-child) and :not(:last-child) elements are placed in <div class="item item-small">, then appended
The .last() child is placed in a <div class="item">, then appended
$(function(){
var $photos = $('.owl-photos'),
$childs = $photos.children(),
$itemWrapper = $(document.createElement('div')).attr('class','item'),
$itemSmallWrapper = $(document.createElement('div')).attr('class','item item-small');
$photos.append(
$itemWrapper.clone().append($childs.first()),
$itemSmallWrapper.clone().append($childs.filter(':not(:first-child), :not(:last-child)')),
$itemWrapper.clone().append($childs.last())
);
})
.item { border: 3px solid green }
.item.item-small { border: 3px solid blue }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="owl-photos">
<a href="post.html" class="item-photo">
<img src="http://placehold.it/100x100&text=1" alt="" />image1
</a>
<a href="post.html" class="item-photo">
<img src="http://placehold.it/100x100&text=2" alt="" />image2
</a>
<a href="post.html" class="item-photo">
<img src="http://placehold.it/100x100&text=3" alt="" />image3
</a>
<a href="post.html" class="item-photo">
<img src="http://placehold.it/100x100&text=4" alt="" />image4
</a>
<a href="post.html" class="item-photo">
<img src="http://placehold.it/100x100&text=5" alt="" />image5
</a>
<a href="post.html" class="item-photo">
<img src="http://placehold.it/100x100&text=6" alt="" />image6
</a>
</div>

Bootstrap 3 Modal window with Affix?

Im trying to build a modal window with bootstrap 3 that will work as an "ImageViewer" where the user can scroll large images vertically.
On the left side of this ImageViewer, I would like to have small thumbnails of the images affixed so the user always can quickly jump between the images in the gallery.
I have tried to do this in a simple html page and it works all fine, but as soon as i put the very same html code in a modal window the affix stops working.
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-md-3">
<!-- This div container should be affixed when scrolling the images -->
<div class="sidebar affix">
<a href="#img1">
<img src="//placehold.it/50x50/2255EE/EEE&text=1" alt="" /></a>
<a href="#img2">
<img src="//placehold.it/50x50/2255EE/EEE&text=2" alt="" /></a>
<a href="#img3">
<img src="//placehold.it/50x50/2255EE/EEE&text=3" alt="" /></a>
</div>
</div>
<div class="col-md-9" role="main">
<img id="img1" src="//placehold.it/600x450/2255EE/EEE&text=1" class="img-responsive" style="margin: 5px" alt="" />
<img id="img2" src="//placehold.it/600x450/2255EE/EEE&text=2" class="img-responsive" style="margin: 5px" alt="" />
<img id="img3" src="//placehold.it/600x450/2255EE/EEE&text=3" class="img-responsive" style="margin: 5px" alt="" />
<img id="img3" src="//placehold.it/600x450/2255EE/EEE&text=3" class="img-responsive" style="margin: 5px" alt="" />
<img id="img3" src="//placehold.it/600x450/2255EE/EEE&text=3" class="img-responsive" style="margin: 5px" alt="" />
<img id="img3" src="//placehold.it/600x450/2255EE/EEE&text=3" class="img-responsive" style="margin: 5px" alt="" />
<img id="img3" src="//placehold.it/600x450/2255EE/EEE&text=3" class="img-responsive" style="margin: 5px" alt="" />
<img id="img3" src="//placehold.it/600x450/2255EE/EEE&text=3" class="img-responsive" style="margin: 5px" alt="" />
<img id="img3" src="//placehold.it/600x450/2255EE/EEE&text=3" class="img-responsive" style="margin: 5px" alt="" />
</div>
</div>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
I have created a fiddle here: http://jsfiddle.net/R8D2v/
Can anyone help out?
Best Regards Niclas

You can set a defined height on the area that you want to be scrollable:
.row{
height: 600px;
}
.col-md-9{
height:600px;
overflow-y:scroll;
}
And the fiddle: http://jsfiddle.net/R8D2v/1/

You don't add the class affix manually. The affix function works by toggling the classes .affix, .affix-top, and .affix-bottom as you fulfill the 'data-offset-top' or 'data-offset-bottom' parameters.
Manually assigning the affix class is functionally setting position fixed on the element, which is why when not using a modal it doesn't move. Of course, it will /never/ move because there is no logic to its positioning.
The appropriate affix syntax can be found on the bootstrap site.
<div data-spy="affix" data-offset-top="200">...</div>
Unfortunately when you are scrolling it is not the document, but rather through the overflow's modal. My guess is affix monitors the former. I created some jquery which mimics the behavior in this edited fiddle. By inspecting the page you can see that the .affix class is added to .sidebar when you scroll past a point defined in the jquery. I leave it to you to position the element appropriately (use position:fixed).
$('.modal').on('scroll', function(){
var someThreshold = 60;
if ($('.modal').scrollTop() > someThreshold) {
$('.modal .sidebar').addClass('affix');
}
else {
$('.modal .sidebar').removeClass('affix');
}
});
On a side note: When posting a fiddle make sure you use 'col-xs-*' as using 'col-md-*' causes the elements to collapse into a single column in the inevitably narrow 'results' pane.

Try to add some style for modal.
style="position:absolute;overflow:hidden"
Demo