Initiating jQuery script works when placed in console but not when placed into site code

Question

I have some code that will simply open a box copying in the image that is clicked.

I don't so much need help with the code, and you don't need to know anything about the layout or creation of the image box. Just have faith this code works.

I have a couple functions:

var caseStudySlider = $('.case-study-slider-image');
var productImageZoom = $('.photo');
if (caseStudySlider.length) {
    caseStudySlider.click(function () {
        var bg = $(this).css('background-image');
        bg = bg.replace('url(', '').replace(')', '').replace(/\"/gi, "");
        var targetZoomer = $('#image-zoomer');
        targetZoomer.attr("src", bg);
        var zoomedImage = $('#image-zoom-contain');
        if (zoomedImage.hasClass('open')) {} else {
            zoomedImage.addClass('open');
        }
    });
}
if (productImageZoom.length) {
    productImageZoom.click(function () {
        var bg = $(this).css('background-image');
        bg = bg.replace('url("', '').replace('")', '').replace(/\"/gi, "");
        var targetZoomer = $('#image-zoomer');
        targetZoomer.attr("src", bg);
        var zoomedImage = $('#image-zoom-contain');
        if (zoomedImage.hasClass('open')) {} else {
            zoomedImage.addClass('open');
        }
    });
}
if (productImageZoom.length || caseStudySlider.length) {
    $('.close-zoomed-image').click(function () {
        var zoomedImage = $('#image-zoom-contain');
        if (zoomedImage.hasClass('open')) {
            zoomedImage.removeClass('open');
        } else {}
    });
}

These are placed inside a script tag and ran from the footer of a WordPress site. For this I use a 'header & footer scripts' plug-in to place the snippets of script into the footer.

There are two uses of the script, one is on a blog style page, one is on product pages. The two triggers are the two variables defined at the top of my code:

var caseStudySlider = $('.case-study-slider-image');
var productImageZoom = $('.photo');

The code works for one of the pages caseStudySlider. But, doesn't work for the product pages. However if I copy and paste the code into the console, it works on both pages!

How can I identify / highlight reasons this may be the case?

Additional code that is relevant but not necessary to answer the question I don't think:

Include of box to populate:

<div id="image-zoom-contain" class="">
    <a href="javascript:void(0)" class="close-zoomed-image box-link"></a>
    <div class="image-zoom-inner">
        <img src="" id="image-zoomer" class="image-zoomer" alt="zoomed image">
    </div>
</div>

CSS:

/* ZOOMABLE IMAGE */
.case-study-slider-image,
.photo {
    cursor: zoom-in;
}
#image-zoom-contain {
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.7);
    z-index: 1000000;
}
    #image-zoom-contain.open {
        display: block!important;
    }
.image-zoom-inner {
    width: auto;
    height: calc(100% - 80px);
    margin: 20px auto;
    padding: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 151;
}
.image-zoomer {
    max-width: 100%;
    max-height: 100%;
    background-color: rgba(7,30,68,1);
    padding: 10px;
    border-radius: 10px;
}
/* END ZOOMABLE IMAGE */

Answer 1

Whatever you're doing, you're doing it too early. Use this approach

$(document).ready(function(){
  // Paste all of your jquery related code here
})

Updated answer:

$(document).ready(function(){
   setTimeout(function(){
       // Paste all of your jquery related code here
   }, 500)
})

the value 500 is in ms

Answer 2

Probably your <div class="photo"> render after page load

Because of that,can you try replace

productImageZoom.click(function () { 

to

$(document).on("click",'.photo',function() {

I wonder if the productImageZoom length if it does not work

var productImageZoom = $('.photo');

console.log(productImageZoom.length);