Pop Up Gallery Next and Prev Buttons

You are here

Home » Forums » Site Templates » Hillter
meraghu
Offline
Last seen: 1 year 3 weeks ago
Sat, 07/16/2016 - 17:51
#1
Pop Up Gallery Next and Prev Buttons

Hi, I have bought HTML 5 version of your Hillter theme and I am trying to customize it, while working I found that the Gallery Pop Up does not show a Next and Previous arrow buttons. I tried to check into CSS, JS but could not find anyway to fix it.

Can you pleae help me out, I am working right now on my local system so I cannot show you my URL, simple I need a Next and Previous arrow buttons to be shown and functions on Home page Gallery section and on the Gallery Page.

Look forward for your help and support.

hattt13
Offline
Last seen: 8 hours 18 min ago
Mon, 07/18/2016 - 10:56

Hi there, you can find the code:

/* Popup Gallery */
    GalleryPopup();
    function GalleryPopup() {


        if($('.gallery_item').length) {


            $('.gallery_item').each(function(index, el) {
                $(this).magnificPopup({
                    delegate: 'a', // the selector for gallery item
                    type: 'image',
                    mainClass: 'mfp-with-zoom',
                    zoom: {
                        enabled: true,
                        duration: 300,
                        easing: 'ease-in-out', 
                    },
                    gallery: {
                        enabled:true,
                        arrowMarkup: '<button title="%title%" type="button" class="mfp-prevent-%dir% hillter-icon-%dir%-arrow"></button>',
                        tPrev: '',
                        tNext: ''
                    }
                });
            });
        }
    }

change with the code js:

/* Popup Gallery */
    GalleryPopup();
    function GalleryPopup() {


        if($('.gallery_item').length) {


            $('.gallery_item').each(function(index, el) {
                $(this).magnificPopup({
                    delegate: 'a', // the selector for gallery item
                    type: 'image',
                    mainClass: 'mfp-with-zoom',
                    zoom: {
                        enabled: true,
                        duration: 300,
                        easing: 'ease-in-out', 
                    },
                    gallery: {
                        enabled:true,
                        arrowMarkup: '<button title="%title%" type="button" class="mfp-prevent-%dir% hillter-icon-%dir%-arrow"></button>',
                        navigateByImgClick: true,
                    }
                });
            });
        }
    }

meraghu
Offline
Last seen: 1 year 3 weeks ago
Mon, 07/18/2016 - 13:01

Thanks,

Unfortunately this did not work, I did this but it does not make it work the things are all same. I could not see "Previous" and "Next" button at all, do send me the updated file if you can.

Raghu

meraghu
Offline
Last seen: 1 year 3 weeks ago
Mon, 07/18/2016 - 13:52

Do I need to make any changes to Index.html where the Gallery is listed? I have uploaded my file to our testing server, pleae have a look http://xpertwebdevelopment.com/preview/cabinrentals/index.html

Check at the Gallery section you can see the Next and Previous button does not appear, can you please help me out on this.? Also I have notiiced a slow loading time of the website page, is there any settings to make the page load faster?

Look back for your reply.

Raghu

hattt13
Offline
Last seen: 8 hours 18 min ago
Mon, 07/18/2016 - 15:39

you can find this code to fix the runtime page 

$(window).load(function() {            $('#preloader').delay(1000).fadeOut('400', function() {                    $(this).fadeOut()            });            $('body').append('<div class="awe-popup-overlay" class="awe-popup-wrap" class="awe-popup-content"></div><span class="awe-popup-close">            GalleryIsotope();            GuestBookMasonry();            AttractionMap();            ContactMap();        });

and you should use this code:

/* Popup Gallery */GalleryPopup();function GalleryPopup() {    if($('.gallery_item').length) {        $('.gallery_item').each(function(index, el) {            $(this).magnificPopup({                delegate: 'a', // the selector for gallery item                type: 'image',                mainClass: 'mfp-with-zoom',                zoom: {                    enabled: true,                    duration: 300,                    easing: 'ease-in-out',                 },                gallery: {                    enabled:true,                    arrowMarkup: '<button title="%title%" type="button" class="mfp-prevent-%dir% hillter-icon-%dir%-arrow"></button>',                    navigateByImgClick: true,                }            });        });    }}

and remove this code: 

/* Popup Gallery */GalleryPopup();function GalleryPopup() {    if($('.gallery_item').length) {        $('.gallery_item').each(function(index, el) {            $(this).magnificPopup({                delegate: 'a', // the selector for gallery item                type: 'image',                mainClass: 'mfp-with-zoom',                zoom: {                    enabled: true,                    duration: 300,                    easing: 'ease-in-out',                 },                gallery: {                    enabled:true,                    arrowMarkup: '<button title="%title%" type="button" class="mfp-prevent-%dir% hillter-icon-%dir%-arrow"></button>',                    tPrev: '',                    tNext: ''                }            });        });    }}

Thanks

meraghu
Offline
Last seen: 1 year 3 weeks ago
Mon, 07/18/2016 - 18:10

Sorry it did not work, however the load speed is improved when I coped your windows.load function. But the next and previous buttons on Gallery images still does not appear. 

I need your proper guidence here, you are simply sending codes which when replaced does not do anything, please check my script.js at http://xpertwebdevelopment.com/preview/cabinrentals/js/scripts.js

Hope you will help me resolve this.

Raghu

hattt13
Offline
Last seen: 8 hours 18 min ago
Tue, 07/19/2016 - 09:37

you can delete this code:

/* Popup Gallery */
GalleryPopup();
function GalleryPopup() {




    if($('.gallery_item').length) {




        $('.gallery_item').each(function(index, el) {
            $(this).magnificPopup({
                delegate: 'a', // the selector for gallery item
                type: 'image',
                mainClass: 'mfp-with-zoom',
                zoom: {
                    enabled: true,
                    duration: 300,
                    easing: 'ease-in-out', 
                },
                gallery: {
                    enabled:true,
                    arrowMarkup: '<button title="%title%" type="button" class="mfp-prevent-%dir% hillter-icon-%dir%-arrow"></button>',
                    tPrev: '',
                    tNext: ''
                }
            });
        });
    }
}

changed by this code

/* Popup Gallery */
GalleryPopup();
function GalleryPopup() {




    if($('.gallery_item').length) {




        $('.gallery_item').each(function(index, el) {
            $(this).magnificPopup({
                delegate: 'a', // the selector for gallery item
                type: 'image',
                mainClass: 'mfp-with-zoom',
                zoom: {
                    enabled: true,
                    duration: 300,
                    easing: 'ease-in-out', 
                },
                gallery: {
                    enabled:true,
                    arrowMarkup: '<button title="%title%" type="button" class="mfp-prevent-%dir% hillter-icon-%dir%-arrow"></button>',
                    navigateByImgClick: true,
                }
            });
        });
    }
}

meraghu
Offline
Last seen: 1 year 3 weeks ago
Tue, 07/19/2016 - 13:41

I am not sure what you are telling or that you are not giving me an exact idea, i am changing this in js/scripts.js file do confirm that if that is correct. I tried almost 5 times the same thing i.e I deleted and changed does not work, I made it comment and chnage does not work. It is not working at all. And here I am getting the same repeated answer, please guide me properly.

Check the JS now, I deleted and pasted the code you have sent but still it is same does not work. Why dont you check at your end and send me the proper file.?

http://xpertwebdevelopment.com/preview/cabinrentals/js/scripts.js

Now please do not send me the same line of code "delete this" and "change by this", do let me know in which file I should change and better you check at your end before you send. I tested on your Themeforest page live preview even there it does not work.

Raghu

cindy
cindy's picture
Offline
Last seen: 14 hours 7 min ago
Tue, 07/19/2016 - 14:57

Hi,

Please try this solution:

Open your file js and replace:

 .gallery_item 

with:

.gallery-content

meraghu
Offline
Last seen: 1 year 3 weeks ago
Tue, 07/19/2016 - 15:14

Thanks, now it worked.

When I replaced .gallery_item to .gallery-content it worked, I think you did not informed this earlier so that was a confusion as I am not that technical guy it took me some time.

Thank your support anyway.

Raghu

Log in or register to post comments

Welcome back, Buddy!

Forgot password