lightbox popup close button issue

Hi, here is url http://staging.exceptionalroofing.ca/

under 3rd navigational link our works, when I click any image it shows the image in lightbox popup but when i press close button, after closing the image its taking me at the top of page instead of staying there to open a new image and adding # at url.

Please tell me how to fix this issue, your quick reply will be highly appreciated.

This soon should be fixed with template update. Meanwhile you can try to replace smooth scrolling script in gk.scripts.js with this one:

Code: Select all

// smooth anchor scrolling
    $('a[href*="#"]').on('click', function (e) {
        e.preventDefault();
        if(this.hash !== '') {
            if(this.hash !== '' && this.href.replace(this.hash, '') == window.location.href.replace(window.location.hash, '')) {
                var target = $(this.hash);
                if(target.length && this.hash !== '#') {
                    $('html, body').stop().animate({
                        'scrollTop': target.offset().top
                    }, 1000, 'swing', function () {
                        if(this.hash !== '#') {
                            window.location.hash = target.selector;
                        }
                    });
                } else {
                    if(this.hash !== '#') {
                        window.location = $(this).attr('href');
                    }
                }
            } else {
                if(this.hash !== '#') {
                    window.location = $(this).attr('href');
                }
            }
        }
    });


Thank you dear but its doing two things,

1- hiding the text from main slider image

2- scrolling is not working for top navigation and navigation is jumping to anchor links.

I have removed your code as client is currently reviewing so don't want to show him without text on slider image and scrolling I hope you understand.

I need to see it live, so please after client's review replace the code back and let me know.

Hi, I have include the code, now you can see the points which I have mention. There is a h1 heading on the main header image which is not visible now and second its now jumping to navigational links instead of scrolling.

Hi, couple of more things to notify within the same area.

At tablet and mobile views, lightbox popup images are stretched and bigger in size. How can I fix that?

Second thing, when we open lightbox popup image, how can we have Next Previous button to display all images as library?

Your quick reply will be very much appreciated.

With questions not related to popup problem, please create new forum threads.

If it goes to close button, one more fix. Please replace previous code with:

Code: Select all

    jQuery('a[href*="#"]').on('click', function (e) {
        e.preventDefault();
        if(this.hash !== '') {
            if(this.hash !== '' && this.href.replace(this.hash, '') == window.location.href.replace(window.location.hash, '')) {
                var target = $(this.hash);
                if(target.length && this.hash !== '#') {
                    jQuery('html, body').stop().animate({
                        'scrollTop': target.offset().top
                    }, 1000, 'swing', function () {
                        if(this.hash !== '#') {
                            window.location.hash = target.selector;
                        }
                    });
                } else {
                    if(this.hash !== '#') {
                        window.location = jQuery(this).attr('href');
                    }
                }
            } else {
                if(this.hash !== '#') {
                    window.location = jQuery(this).attr('href');
                }
            }
        }
    });


Thank you dear. H1 heading is back on main image but now main navigation is totally stopped working.

Ok, one more change I have forget about:

Code: Select all

jQuery('a[href*="#"]').on('click', function (e) {
        e.preventDefault();
        if(this.hash !== '') {
            if(this.hash !== '' && this.href.replace(this.hash, '') == window.location.href.replace(window.location.hash, '')) {
                var target = jQuery(this.hash);
                if(target.length && this.hash !== '#') {
                    jQuery('html, body').stop().animate({
                        'scrollTop': target.offset().top
                    }, 1000, 'swing', function () {
                        if(this.hash !== '#') {
                            window.location.hash = target.selector;
                        }
                    });
                } else {
                    if(this.hash !== '#') {
                        window.location = jQuery(this).attr('href');
                    }
                }
            } else {
                if(this.hash !== '#') {
                    window.location = jQuery(this).attr('href');
                }
            }
        }
    });


working fine. Thanks alot

No problem.
Please let me know if you would have any additional questions regarding this topic.