We Keep Coding

Problem with lightbox, on click event is not working

I have a stupid problem with jQuery.. I'm trying to make a simple lightbox and I have problems with the "close" button.. Here is what I have - a grid with some color variations. We have an image and a text for the color. When we click on it, we should see the image in a lightbox with bigger size. To do so, I'm just adding and removing a class.
The weird thing is that the on click on the close is working, the console log is displayed, but the class is not removed.. Why is that? What do I do wrong here? Shouldn't the function on the close button remove the class from all elements?
var colorVariation = $('.product-variations__color');
var colorPopUp = $('.product-variations__color-popup');
colorVariation.on('click', function () {
$(this).find(colorPopUp).addClass('is-active');
});
$('.close').on('click', function() {
colorPopUp.removeClass('is-active');
console.log('woohoo');
});
.product-variations {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.product-variations__color {
max-width: calc((100% / 4) - 20px);
padding: 0 10px 50px;
}
.product-variations__color-name {
width: 100%;
text-align: center;
}
.product-variations__color-popup {
display: none;
}
.product-variations__color-popup.is-active {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.product-variations__color-popup.is-active .close {
filter: difference;
position: absolute;
top: 20px;
left: 20px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-variations">
<div class="product-variations__color">
<img src="https://via.placeholder.com/150x150/ff0000" />
<div class="product-variations__color-name">
Red
</div>
<div class="product-variations__color-popup">
<div class="close">×</div>
<img src="https://via.placeholder.com/1500x1500/ff0000" />
</div>
</div>
<div class="product-variations__color">
<img src="https://via.placeholder.com/150x150/008000" />
<div class="product-variations__color-name">
Green
</div>
<div class="product-variations__color-popup">
<div class="close">×</div>
<img src="https://via.placeholder.com/1500x1500/008000" />
</div>
</div>
<div class="product-variations__color">
<img src="https://via.placeholder.com/150x150/0000ff" />
<div class="product-variations__color-name">
Blue
</div>
<div class="product-variations__color-popup">
<div class="close">×</div>
<img src="https://via.placeholder.com/1500x1500/0000ff" />
</div>
</div>
<div class="product-variations__color">
<img src="https://via.placeholder.com/150x150/800080" />
<div class="product-variations__color-name">
Purple
</div>
<div class="product-variations__color-popup">
<div class="close">×</div>
<img src="https://via.placeholder.com/1500x1500/800080" />
</div>
</div>
<div class="product-variations__color">
<img src="https://via.placeholder.com/150x150/FFFF00" />
<div class="product-variations__color-name">
Yellow
</div>
<div class="product-variations__color-popup">
<div class="close">×</div>
<img src="https://via.placeholder.com/1500x1500/FFFF00" />
</div>
</div>
<div class="product-variations__color">
<img src="https://via.placeholder.com/150x150/00FFFF" />
<div class="product-variations__color-name">
Cyan
</div>
<div class="product-variations__color-popup">
<div class="close">×</div>
<img src="https://via.placeholder.com/1500x1500/00FFFF" />
</div>
</div>
<div class="product-variations__color">
<img src="https://via.placeholder.com/150x150/BFFF00" />
<div class="product-variations__color-name">
Lime
</div>
<div class="product-variations__color-popup">
<div class="close">×</div>
<img src="https://via.placeholder.com/1500x1500/BFFF00" />
</div>
</div>
<div class="product-variations__color">
<img src="https://via.placeholder.com/150x150/000000" />
<div class="product-variations__color-name">
Black
</div>
<div class="product-variations__color-popup">
<div class="close">×</div>
<img src="https://via.placeholder.com/1500x1500/000000" />
</div>
</div>
</div>

The problem is you are triggering the other click call that adds the class back onto the element because the event listener is on a parent. So the child is triggered, followed by the parent. If you stop the click, it will not trigger on the parent.
$('.close').on('click', function(event) {
event.stopPropagation();
colorPopUp.removeClass('is-active');
});

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>

How to lazy load a wrapper div containing a carousel with images?

I have a bunch of carousels each wrapped in .lazy_wrap. I would like to lazy load them to load the site faster. How would I approach this? I've looked at some lazy load plugins but they seem to only work on images. I found a plugin called jquery-lazyloadanything but I can't figure out how to use it.
http://jsfiddle.net/8bJUc/667/
<div class="lazy_wrap">
<div class="owl-carousel">
<div>
<img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
</div>
<div>
<img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
</div>
<div>
<img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
</div>
<div>
<img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
</div>
<div>
<img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
</div>
<div>
<img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
</div>
<div>
<img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
</div>
</div>
</div>
$(document).ready(function() {
$(".owl-carousel").owlCarousel({
navigation: true,
pagination: true
});
});

http://jsfiddle.net/8bJUc/668/
You need to add just this code:
$('img').lazyloadanything({
'onLoad': function(e, LLobj) {
var $img = LLobj.$element;
var src = $img.attr('data-src');
$img.attr('src', src);
console.log("loading: ", src);
}
});
But you don't want the images to get loaded "automatically", so you'll need to change src="url" to data-src="url" on each img tag, like:
<img data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
You'll also need to add height, width to the images either via the html tag or css, because lazyloadanything only loads them when it detects that they enter the screen but it can only happen when they have a size.

Cannot get rid of focus on element after double-click

I have a HTML5 web page and I use 4 canvas controls to render images from my web cam.
By double-clicking and image/canvas I hide the 4 canvases and display a larger canvas control instead.
As soon as I done this one of my controls is highlighted.
This is the original web page BEFORE the double-click:
And this is the web page AFTER the double click:
This is the code that handles the double-click of the smaller canvas element:
$('#canvasLiveView1').on('dblclick', function () {
$('#divSingleView').css('display', '');
$('#divMultiView').css('display', 'none');
camDoubleClickCam = 1;
});
I have tried adding this to the double-click event:
$('#btnPlaysave').blur();
where 'btnPlaySave' is ID of the highlighted control.
Incidentally, this behavior/effect does not appear in IE.
Any suggestions?
ND.
this is the HTML for the canavs 'toggle'
<div style="height:362px;">
<div id="divSingleView" style="float:left;margin:0px;padding:0px;background-color:black;width:520px;display:none;">
<div style="float:left;width:95px;"> </div>
<div style="float:left;width:330px;margin-top:75px;"><canvas id="canvasLiveView" style="width:330px;height:220px;outline: yellow 1px solid;"></canvas></div>
<div style="float:left;width:95px;"></div>
</div>
<div id="divMultiView" style="float:left;margin:0px;padding:0px;background-color:black;width:520px;">
<div style="float:left;height:170px;margin-left:2px; margin-top:10px;"><canvas id="canvasLiveView1" style="width:255px;height:170px;outline: grey 1px ridge;margin-left:3px;margin-top:3px;"></canvas></div>
<div style="float:left;height:170px;margin-top:10px;"><canvas id="canvasLiveView2" style="width:255px;height:170px;outline: grey 1px ridge;margin-right:3px;margin-top:3px;"></canvas></div>
<div style="float:left;height:170px;margin-left:2px; margin-bottom:10px;"><canvas id="canvasLiveView3" style="width:255px;height:170px;outline: grey 1px ridge;margin-left:3px;margin-top:3px;margin-bottom:3px;"></canvas></div>
<div style="float:left;height:170px;margin-bottom:10px;"><canvas id="canvasLiveView4" style="width:255px;height:170px;outline: grey 1px ridge;margin-right:3px;margin-top:3px;margin-bottom:3px;"></canvas></div>
</div>
</div>
<div style="height:30px;">
<div id="divPaused" style="display:none; float:left;margin-left:5px;color:white;font-size:9pt; font-weight:800;">
Paused
</div>
<div style="width:290px;margin: 0 auto;">
<div style="float:left;width:24px;margin-left:5px;">
<img id="btnPlaySave" alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/save.png" class="imgPlaySave" title="Save Image" onclick="PlaySave();" />
</div>
<div style="float:left;width:24px;margin-left:5px;">
<img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/button_minus_red.png" class="imgPlaySlower" title="Decrease Playback Speed" onclick="PlaySlower();" />
</div>
<div style="float:left;width:24px;">
<img alt="" style="width:24px;width:24px; cursor:pointer;" cursor:pointer" src="/Content/Images/button_plus_green.png" class="imgPlayFaster" title="Decrease Playback Speed" onclick="PlayFaster();" />
</div>
<div style="float:left;width:24px;">
<img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/media_start.png" class="imgPlayStart" title="Go to First Frame" onclick="PlayStart();" />
</div>
<div style="float:left;width:24px;">
<img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/media_back.png" class="imgPlayStepBack" title="Step to Previous Frame" onclick="PlayStepBack();" />
</div>
<div id="Tempo" style="float: left; width: 40px; text-align: center; vertical-align: middle; font-weight: bold;color:white; font-size: x-small; font-family: Arial, Helvetica, sans-serif;">
100
</div>
<div style="float:left;width:24px;">
<img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/media_pause.png" class="imgPlayPause" title="Pause" onclick="PlayPause();" />
</div>
<div style="float:left;width:24px;">
<img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/media_play.png" class=" imgPlayPlay" title="Play" onclick="PlayPlay();" />
</div>
<div style="float:left;width:24px;">
<img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/media_next.png" class="imgPlayStepNext" title="Step to Next Frame" onclick="PlayStepNext();" />
</div>
<div style="float:left;width:24px;">
<img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/media_end.png" class="imgPlayEnd" title="Go to Last Frame" onclick="PlayEnd();" />
</div>
<div style="float:left;width:24px;">
<img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/LiveFeed.png" class="imgLiveFeed" title="Back to Live Feed" onclick="LiveFeed();" />
</div>
</div>
</div>

So the canvas creates weird behaviour when double clicked. I found and answer that supposed that in order for it to work properly you can cancel out the events that are triggered by:
document.getElementById('canvas').onmousedown = function(){ return false; };
I grabbed this answer from: HTML Canvas Double Click Highlight Issue which lead to... Clicking inside canvas element selects text
hope this helps people so they don't have to jump around a few questions.

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