How do I add "ALT" and "TITLE" attribute to jqzoom image?

[gdinari]

Hi everybody,

 

I ran my site through an SEO auditor and it showed that certain products aren't optimized for search engines. On the product pages the jqzoom image is missing both the alt and title tag. I would like to use the product name as the value both of these attributes.

 

When I inspect the source code the file that I need to edit is not the first image within <div class="zoomPad">. The image that I need to edit is within <div class="zoomWrapperImage">. The image is generated within this div and the only way to edit it is with the function below.

 

I have located the file and function that controls the jqzoom image, but I dont know how to do this. Id really appreciate some assistance with this. Here are the details.

 

File location: /js/plugins/jqzoom/jqzoom.js

What I need: To add product name as ALT and TITLE attributes for zoomWrapperImage image

Function (line 623 v.1.6): 

function Largeimage() {
            var $obj = this;
            this.node = new Image();
            this.loadimage = function (url) {
                //showing preload
                loader.show();
                this.url = url;
                this.node.style.position = 'absolute';
                this.node.style.border = '0px';
                this.node.style.display = 'none';
                this.node.style.left = '-5000px';
                this.node.style.top = '0px';
                document.body.appendChild(this.node);
                this.node.src = url; // fires off async
            };
            this.fetchdata = function () {
                var image = $(this.node);
                var scale = {};
                this.node.style.display = 'block';
                $obj.w = image.width();
                $obj.h = image.height();
                $obj.pos = image.offset();
                $obj.pos.l = image.offset().left;
                $obj.pos.t = image.offset().top;
                $obj.pos.r = $obj.w + $obj.pos.l;
                $obj.pos.b = $obj.h + $obj.pos.t;
                scale.x = ($obj.w / smallimage.w);
                scale.y = ($obj.h / smallimage.h);
                el.scale = scale;
                document.body.removeChild(this.node);
                $('.zoomWrapperImage', el).empty().append(this.node);
                //setting lens dimensions;
                lens.setdimensions();
            };
            this.node.onerror = function () {
                throw 'Problems while loading the big image.';
            };
            this.node.onload = function () {
                //fetching data
                $obj.fetchdata();
                loader.hide();
                el.largeimageloading = false;
                el.largeimageloaded = true;
                if (settings.zoomType == 'drag' || settings.alwaysOn) {
                    lens.show();
                    stage.show();
                    lens.setcenter();
                }
            };
            this.setposition = function () {
                var left = -el.scale.x * (lens.getoffset().left - smallimage.bleft + 1);
                var top = -el.scale.y * (lens.getoffset().top - smallimage.btop + 1);
                $(this.node).css({
                    'left': left + 'px',
                    'top': top + 'px'
                });
            };
            return this;
        };

 

Thanks a lot

jquery.jqzoom.html