Question

I’m trying to remove one javascript effect from a page on this site. Every time I try to remove the id causing the effect it kills all the js on the entire page. I even tried removing the reference to the id in the js file, but that also killed all the js on the page.

I don’t want to edit the function in the js file, because I want to keep the js effect on other pages.

Here is basic the HTML:

        <div class="large-image" id="large-image">
            <img src="{{ product.images.first | product_img_url: 'large' }}" class="image-zoom" alt="Picture of {{ product.title | escape }}">
        </div>

If I remove id="large-image" all the js on the page stops working.

Here is the full HTML (it’s using liquid templating engine):

{% if product.images != nil %}
    <div class="half left product-images">
        <div class="large-image" id="large-image">
            {% if product.compare_at_price_max > product.price %}<span class="sale-banner">Sale</span>{% endif %}
            <img src="{{ product.images.first | product_img_url: 'large' }}" class="image-zoom" alt="Picture of {{ product.title | escape }}">
        </div>

Here is the relevant js:

(function() {
        if (document.getElementById('product')) {
            var p = document.getElementById('product'),
                b = document.getElementById('large-image'),
                i = b.getElementsByTagName('img')[0],
                l = document.getElementById('product-image-list');

And here is the full function:

(function() {
    if (document.getElementById('product')) {
        var p = document.getElementById('product'),
            b = document.getElementById('large-image'),
            i = b.getElementsByTagName('img')[0],
            l = document.getElementById('product-image-list');
            if (l) {
                var a = l.getElementsByTagName('a');
            }

        i.onload = function(e) {
            var p = this.parentNode;
            p.className = p.className.replace(' loading', '');
        };

        if (window.innerWidth && window.innerWidth > 640) {
            var s = document.createElement('span');
            s.className = 'enlarge-icon';
            s.innerHTML = 'View Large Image';
            b.appendChild(s);
            b.className += ' action';
            b.onclick = function(e) {
                e = e || window.event; e = e.target || e.srcElement;
                e = getParentByTagName(e, 'DIV');
                if (e) {
                    if (p.className.indexOf('enlarged') !== -1) {
                        e.className += ' loading';
                        p.className = p.className.replace(' enlarged', '');
                        i.src = i.src.replace('grande', 'large');
                        s.innerHTML = 'View Large Image';
                    } else {
                        e.className += ' loading';
                        i.src = i.src.replace('large', 'grande');
                        p.className += ' enlarged';
                        s.innerHTML = 'View Smaller Image';
                    }
                }
            }
        }

        if (l) {
            l.onclick = function(e) {
                e = e || window.event; e = e.target || e.srcElement;
                e = getParentByTagName(e, 'A');
                if (e && e.className != 'current') {
                    b.className += ' loading';
                    var u = e.href;
                    if (p.className.indexOf('enlarged') === -1) {
                        u = u.replace('grande', 'large');
                    }
                    i.src = u;
                    for (var j=0; j<a.length; j++) {
                        if (a[j].className.indexOf('current') != -1) {
                            a[j].className = a[j].className.replace('current', '');
                        }
                    }
                    e.className = 'current';
                }
                return false;
            };
        }
    }
})();

Thanks for the help!

Answer 1

If you remove the id:

b = document.getElementById('large-image'); // will return "undefined"
i = b.getElementsByTagName('img')[0];       // will return an error

The second line will return an error, so the javascript code will not be evaluated.