We Keep Coding

MasonryJS image gallery aligns left on page refresh

So I have this image gallery which I displayed as Pinterest-style Masonry by using MasonryJS. Everything works fine but the problem is when I refresh the page. That is, when I refresh the page, all the images align to the left at first then comes to the actual place. It's like for a couple of milliseconds it goes to that position and comes back to life.
Here's a gif which shows the actual problem:
How can I not have it left-aligned in page refresh? I just wish it to stay in the middle no matter how much I refresh the page.
Here's the code:
jQuery(window).on('load', function(){
$('.modal-grid').masonry({
itemSelector: '.modal-grid-item',
gutter: 10,
isFitWidth: true
});
});
.modal-grid{
margin: 0 auto;
margin-top: 30px;
}
.modal-grid-item {
width: 300px; margin-bottom: 10px;
}
.modal-grid-item img {
width: 100%; height: auto;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://unpkg.com/masonry-layout#4/dist/masonry.pkgd.min.js"></script>
<div class="modal-grid">
<div class="modal-grid-item">
<img src="https://i.imgur.com/m7M9EPX.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/NzD7YF9.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/8zvUjul.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/WNmP9VL.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/0nwzhDV.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/ypdixv8.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/1oHOvK1.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/kpjtht1.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/QAQ0dk6.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/m7M9EPX.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/NzD7YF9.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/8zvUjul.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/WNmP9VL.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/0nwzhDV.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/ypdixv8.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/1oHOvK1.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/kpjtht1.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/QAQ0dk6.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/m7M9EPX.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/NzD7YF9.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/8zvUjul.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/WNmP9VL.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/0nwzhDV.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/ypdixv8.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/1oHOvK1.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/kpjtht1.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/QAQ0dk6.jpg" />
</div>
</div>

Masonry has events we can take advantage of, like layoutComplete. I used that to get masonry to load the images while hidden. Once the ready event fires, we trigger Masonry's own layoutComplete event to recalculate the elements. Then we run a callback once to reveal Masonry.
.modal-grid {
opacity: 0; /* jQuery will remove this later */
transition: opacity; /* optional */
}
jQuery(window).on('load', function() {
/* Init your grid like normal but save it to a variable */
const $grid = $('.modal-grid').masonry({
itemSelector: '.modal-grid-item',
gutter: 10,
isFitWidth: true
});
/*
Add a one time eventListener to just run on our hand-made "onLoad" event
*/
$grid.one('layoutComplete', function() {
/* and fade it in */
$grid.css('opacity', '1');
/*
If it is still happening, you can
add a setTimeout to delay the fade effect
*/
/**
let timeoutHandle;
timeoutHandle = setTimeout(function() {
$grid.css('opacity', '1')
// clear the timeout to make explicitly
// sure no extra timers are running
clearTimeout(timeoutHandle);
}, 1000);
*/
});
$(document).ready(function() {
// trigger the event when the document elements
// are ready
$grid.trigger('layoutComplete');
});
});
If you wanna play around with it, you can check out the CodePen here.

How to make 2nd Trigger script in paired image button?

Set A is a scripted paired button image. When you click certain image, it will change to its pair or set of image.
Now If I have another set, Set B, and I want to make set B to work exactly like set A without disrupting each other. How to do this? I tried to give set B new unique ID but confused how to integrate the new ID in the script.
$(document).ready(function() {
$('img').click(function() {
$(this).add($(this).siblings()).toggleClass('hide');
if($(this).attr('id') == 'predator_only') {
$('.predator:not(.hide)').add($('.predator:not(.hide)').siblings()).toggleClass('hide');
}
else if($(this).attr('id') == 'mixed') {
$('.predator.hide').add($('.predator.hide').siblings()).toggleClass('hide');
}
else
{
if($('.predator.hide').length > 0) {
$('#mixed').removeClass('hide');
$('#predator_only').addClass('hide');
}
else {
$('#mixed').addClass('hide');
$('#predator_only').removeClass('hide');
}
}
});
});
/* For layout only */
div {
display: inline-block;
}
/* Used to hide image */
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This is set A:
<div>
<div>
<img src="https://s24.postimg.org/3tsfw9psl/Predator.png" id="predator_only"/>
<img src="https://s24.postimg.org/nn4joz36d/Mixed.png" class="hide" id="mixed"/>
</div>
<div>
<img src="https://s24.postimg.org/ski4a355h/Lion.png" class="predator" />
<img src="https://s24.postimg.org/s2myu8fkl/Deer.png" class="hide" />
</div>
<div>
<img src="https://s24.postimg.org/vxvetx51x/Wolf.png" class="predator"/>
<img src="https://s24.postimg.org/ty9r5e4et/Lamb.png" class="hide" />
</div>
<div>
<img src="https://s24.postimg.org/ll42aq579/Tiger.png" class="predator"/>
<img src="https://s24.postimg.org/f11a4dr6d/Goat.png" class="hide" />
</div>
<div>
<img src="https://s24.postimg.org/flgb72ket/Shark.png" class="predator"/>
<img src="https://s4.postimg.org/rk8v1dv9p/Seal.png" class="hide" />
</div>
<div>
<img src="https://s24.postimg.org/wn9595z9x/Cheetah.png" class="predator"/>
<img src="https://s24.postimg.org/h4bpc1qz9/Gazelle.png" class="hide" />
</div>
</div>
<br><br>
This is set B:
<div>
<div>
<img src="https://s24.postimg.org/3tsfw9psl/Predator.png" id="predator_only2"/>
<img src="https://s24.postimg.org/nn4joz36d/Mixed.png" class="hide" id="mixed2"/>
</div>
<div>
<img src="https://s24.postimg.org/ski4a355h/Lion.png" class="predator2" />
<img src="https://s24.postimg.org/s2myu8fkl/Deer.png" class="hide" />
</div>
<div>
<img src="https://s24.postimg.org/vxvetx51x/Wolf.png" class="predator2"/>
<img src="https://s24.postimg.org/ty9r5e4et/Lamb.png" class="hide" />
</div>
<div>
<img src="https://s24.postimg.org/ll42aq579/Tiger.png" class="predator2"/>
<img src="https://s24.postimg.org/f11a4dr6d/Goat.png" class="hide" />
</div>
<div>
<img src="https://s24.postimg.org/flgb72ket/Shark.png" class="predator2"/>
<img src="https://s4.postimg.org/rk8v1dv9p/Seal.png" class="hide" />
</div>
<div>
<img src="https://s24.postimg.org/wn9595z9x/Cheetah.png" class="predator2"/>
<img src="https://s24.postimg.org/h4bpc1qz9/Gazelle.png" class="hide" />
</div>
</div>

Lazy loading images that are appended by appendChild() in javascript/leaflet

I'm working on a website, http://atlantaartmap.com, which uses leaflet/mapbox to plot street art around Atlanta. The image details are read from a geojson file. While leaflet is reading the geojson, I append thumbnails to a nav bar at the bottom that also link to the corresponding map marker. Appending the images instead of hard coding them allows me to update a single file to change all aspects of the page.
I am attempting to use lazy load on these images, but it doesn't seem to work with items that are appended using java script. Any tips?
Here is the lazy version of the page I am testing: http://atlantaartmap.com/lazy.html
Here is the normal version of the site: http://atlantaartmap.com
Thanks in advance.
edit: For clarification, I would like the lazy loading script to avoid loading images until they are within the window.

I would just throw out the plugin and do that yourself, it's actually very simple to do. You create one image element with your loading image as source, append that as a child to your a (link) element:
var image = new Image();
image.src = 'images/loading.gif';
link.appendChild(image);
Next up you create another image element with your actual image as a source, but you don't need to append it to anything. Just listen for the onload event to fire, then swap the sources:
var original = new Image();
original.src = feature.properties.image;
original.onload = function () {
image.src = original.src;
}
That should work like a charm. Now you can leave out jQuery and the plugin so that's two dependency assets less to load, so your page is loading faster also. Win/win situation if you ask me ;)
Here's a example of the concept on JSFiddle: http://jsfiddle.net/waud32ta/

I really would suggest that you try lazySizes. Different to other lazyloaders it is a self-initializing script, which automatically detects new elements and their visibility. So you don't need to call or configure anything here. Simply append an image with the class lazyload and add your source to the data-src attribute. That's it:
<img src="spinner.gif" data-src="image.jpg" class="lazyload" />
Here is a simple demo.
window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.expand = 40;
window.lazySizesConfig.addClasses = true;
document.querySelector('.add').onclick = function(){
document.querySelector('.scroll-doc').innerHTML = document.querySelector('.template').innerHTML;
};
.scroll-area {
overflow-x: auto;
overflow-y: hidden;
position: relative;
width: 80%;
margin: auto;
padding: 2px 2px 10px;
}
.scroll-doc {
display: table;
position: relative;
text-align: left;
}
.scroll-item {
display: table-cell;
vertical-align: middle;
padding: 10px;
}
.intrinsic {
position: relative;
padding-bottom: 75%;
height: 0px;
}
.lazyload,
.lazyloading {
opacity: 0;
}
.lazyloaded {
opacity: 1;
transition: opacity 300ms;
}
.add {
font-size: large;
font-weight: bold;
}
<script src="http://afarkas.github.io/lazysizes/lazysizes.min.js"></script>
<button type="button" class="add">add to scroll area</button>
<div class="scroll-area">
<div class="scroll-doc"></div>
</div>
<script type="text/html" class="template">
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/animals/1"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/animals/2"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/animals/3"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/animals/4"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/animals/5"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/animals/6"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/animals/7"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/animals/8"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/animals/9"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/food/1"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/food/2"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/food/3"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/food/4"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/food/5"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/food/6"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/food/7"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/food/8"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/food/9"
alt="" />
</div>
</div>
</script>

Try calling
$("img.navthumb").lazyload();
after the thumbnail code has been dynamically injected using JavaScript method appendChild().
Also, i would be able to help you better if you post a JSFiddle.
Hope it helps!!!

Okay, so far you have highlighted that jQuery should be avoided. But I think it's possible to use micro-plugins which contains only the logic you really need. One of them is justlazy. It's a lazy loading library which has no external dependencies and provides compact image loading code.
First, you have to define your placeholders:
<span data-src="path/to/image" data-alt="some alt text"
data-title="some title"
class="justlazy-placeholder">
</span>
It's also possible to define the placeholder as img-tag to be more SEO friendly. One other feature is the loading of responsive images with srcset attribute.
The second step is to initialize the lazy loading via javascript:
Justlazy.registerLazyLoadByClass("justlazy-placeholder"{
// defines that the image will be loaded
// 200 pixels before it gets visible
threshold: 200
});

Remove the image tag when image is not uploaded to Channel Advisor. No jQuery method please

I am designing a template in Channel Advisor for an eBay store and it doesn't allow jQuery.
I used JSSOR (non-jQuery one) for my slider in order to make it responsive and swipe/touch friendly.
When I use template tags in like:
<img src="{{ITEMIMAGEURL1}}"/>
<img src="{{THUMB(ITEMIMAGEURL1)}}"/>
I have 10 of {{ITEMIMAGEURL1}} and {{THUMB(ITEMIMAGEURL)}} tags number from 1-10 in the slider template, {{ }} are the image paths from Channel Advisor. In order to have this gallery work on all current listings, I need to delete some of the div tags correspond to how many images an ad has/uploaded to channel advisor.
Lets say I have this:
<div>
<div>
<img u="image" src="{{ITEMIMAGEURL1}}">
<img u="thumb" src="{{THUMB(ITEMIMAGEURL1)}}">
</div>
<div>
<img u="image" id="galleryImage2" src="{{ITEMIMAGEURL2}}">
<img u="thumb" id="thumbnail2" src="{{THUMB(ITEMIMAGEURL2)}}">
</div>
<div>
<img u="image" id="galleryImage3" src="{{ITEMIMAGEURL3}}">
<img u="thumb" id="thumbnail3" src="{{THUMB(ITEMIMAGEURL3)}}">
</div>
<div>
<img u="image" id="galleryImage4" src="{{ITEMIMAGEURL4}}">
<img u="thumb" id="thumbnail4" src="{{THUMB(ITEMIMAGEURL4)}}">
</div>
<div>
<img u="image" id="galleryImage5" src="{{ITEMIMAGEURL5}}">
<img u="thumb" id="thumbnail5" src="{{THUMB(ITEMIMAGEURL5)}}">
</div>
<div>
<img u="image" id="galleryImage6" src="{{ITEMIMAGEURL6}}">
<img u="thumb" id="thumbnail6" src="{{THUMB(ITEMIMAGEURL6)}}">
</div>
<div>
<img u="image" id="galleryImage7" src="{{ITEMIMAGEURL7}}">
<img u="thumb" id="thumbnail7" src="{{THUMB(ITEMIMAGEURL7)}}">
</div>
<div>
<img u="image" id="galleryImage8" src="{{ITEMIMAGEURL8}}">
<img u="thumb" id="thumbnail8" src="{{THUMB(ITEMIMAGEURL8)}}">
</div>
<div>
<img u="image" id="galleryImage9" src="{{ITEMIMAGEURL9}}">
<img u="thumb" id="thumbnail9" src="{{THUMB(ITEMIMAGEURL9)}}">
</div>
<div>
<img u="image" id="galleryImage10" src="{{ITEMIMAGEURL10}}">
<img u="thumb" id="thumbnail10" src="{{THUMB(ITEMIMAGEURL10)}}">
</div>
</div>
and a listing has only 4 sets of pictures/first 4 sets image paths. How do I delete the div tags that wrap around the images from 5-10?
Thank you in advance!!

Try ...
<img src="{{THUMB(ITEMIMAGEURL1)}}" id="img1">
<img src="{{THUMB(ITEMIMAGEURL2)}}" id="img2">
<img src="{{THUMB(ITEMIMAGEURL3)}}" id="img3">
<img src="{{THUMB(ITEMIMAGEURL4)}}" id="img4">
<img src="{{THUMB(ITEMIMAGEURL5)}}" id="img5">
<img src="{{THUMB(ITEMIMAGEURL6)}}" id="img6">
<img src="{{THUMB(ITEMIMAGEURL7)}}" id="img7">
<img src="{{THUMB(ITEMIMAGEURL8)}}" id="img8">
<img src="{{THUMB(ITEMIMAGEURL9)}}" id="img9">
<img src="{{THUMB(ITEMIMAGEURL10)}}" id="img10">
function removeImages(site_has) {
for (var i=site_has+1; i<=10; i++) {
document.getElementById('img'+i).style.visibility='hidden';
}
}
... to remove ...
var image_x = document.getElementById('img'+i);
image_x.parentNode.removeChild(image_x);

how to change the image of div on click of other image

I have two image div in HTML i want that onclik of one image other image should change
<div class="image_21"><img src="pagetwo_graph_two_4.png"/></div>
<div class="alignment"><img src="pagetwo_graph_one.png"/></div>
<div class="image_one"><img src="pagetwo_graph_two_1.png"/></div>
<div class="image_two"><img src="pagetwo_graph_two_2.png"/></div>
<div class="option_image"><img src="option1.png"/></div>
<div class="option_image_label">Option 1</div>
<div class="option_image_one"><img src="option1.png"/></div>
<div class="option_image_label_one">Option 2</div>
I want that on click on option_image_one it should change image of image_one and imagetwo

UPDATE
<html>
<head>
<script type="text/javascript">
function changeImage(){
document.getElementById('toChange').src='3.jpg';
}
</script>
</head>
<body>
<div class="option_image_one"><img src="1.jpg" onclick="changeImage()"/></div>
<div class="image_two"><img src="2.jpg" id="toChange"/></div>
</body>
</html>
Here the code that works for me

onclick = "document.getElementById('option_image_one').getElementsByTagName('img')[0].src='pagetwo_graph_two_2.png' "
It would work.

Best option is to give images some id and then do something like document.getElementById('yourId').src='newimage' (this should be some js function that you assign to onClick event on your first div)

You can try the following:
<div class="option_image_one">
<img onclick="document.getElementById('image2').src='http://www.w3schools.com/images/compatible_firefox.gif'" src="http://www.w3schools.com/images/compatible_chrome.gif"/>
</div>
<div class="image_two">
<img id="image2" src="http://www.w3schools.com/images/compatible_safari.gif"/>
</div>
Note that I have added an ID to the second image.
See the live example on this interactive HTML/JS editor

div are useless
<img src="option1.png" id="img1" onclick="document.getElementById('img2').src='newImage.png'"/>
<img src="pagetwo_graph_two_2.png" id="img2"/>

If you could use jQuery it would be like this:
$(".option_image_one img").onclick(function(event) {
$(".image_two img").attr('href','different_image,jpg').hide().fadeIn("fast");
});
To use jQuery import the jQuery library by including the following in your header:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

As per Thomas's and Filype's answers, I would suggest that use divs but put onClick for img tag and not div tag.
This is for future enhancement so that if you would like to add anything else to these divs.

complete code just copy it and paste
jQuery(document).ready(function(){
jQuery('.small').click(function(){
if(jQuery(this).hasClass('active')!=true);
{
jQuery('.small').removeClass('active');
jQuery(this).addClass('active');
var new_link=jQuery(this).children('img').attr('src');
jQuery(countainer).children('img').attr('src',img_link);
}
});
});
</script>
</head>
<body>
<div class="countainer">
<img src="image/slideme-jQuery-slider.jpg" width="400" heiht="200"/ alt="">
</div>
<div class="clear"></div>
<br/>
<div class="mini">
<div class="small active">
<img src="image/Galleria-JavaScript-Image-Gallery.jpg" height="50" width="50" alt="" />
</div>
<div class="small">
<img src="image/Trip-Tracker-slideshow.jpg" height="50" width="50" alt="" />
</div>
<div class="small">
<img src="image/Visual-Lightbox-Gallery.jpg" height="50" width="50" alt="" />
</div>
<div class="small">
<img src="image/RoyalSlider_-_Touch-Enabled_Image_Gallery_and_Content_Slider_Plugin.jpg" alt="" height="50" width="50" />
</div>
<div class="small">
<img src="image/UnoSlider-jQuery-image-slider.jpg" height="50" width="50" />
</div>
</div>