0

Here is my website

I have four tabs, that when each one is clicked will display up a different gallery (Nextgen Pro gallery).

It works, but the performance is terrible, because I currently load EVERYTHING. I want to change it to load only when a tab is clicked so instead of loading up to 200 images in one hit, I will only load up 50 images at a time.

Currently my scripts to achieve this tab and display function is as follows (JavaScript);

jQuery(document).ready(function() {
        if (jQuery('.customtabs > br').length) {
            jQuery('.customtabs > br').remove();
        }
});

function displaycustom_tab(obj) {
        var totalSlides = jQuery(obj).parent().find('>div').length / 3;
        var tabi = 0;
        var slidei = jQuery(obj).index() + 1;
        if (slidei > (2 * totalSlides)) {
            tabi = slidei - (2 * totalSlides);
        } else if (slidei > (totalSlides)) {
            tabi = slidei - totalSlides;
        } else {
            tabi = slidei;
        }
        tabi--;
        jQuery('.customtabs > div').removeClass('activetab');
        jQuery('.customtabs > div:eq(' + tabi + ')').addClass('activetab');
    jQuery(window).trigger('resize');
}

Each tab has an img class named ".imgslide" and every time I click on one, the tab becomes active (the other 3 are hidden) and it's gallery (".customtabs") is displayed. I'm not even sure if it's an efficient way of doing it.

I created a further script to use AJAX:

jQuery(document).on( 'click', '.img.imgslide', function( event ) {
    console.log("ajax call worked");
    event.preventDefault();
    jQuery.ajax({
        url: loadgallery.ajaxurl,
        type: 'post',
        data: {
            action: 'load_gallery'
        },
        success: function( result ) {
            alert( result );
        }
    })
})

Nothing happens, including the console.log.

I've read these posts, but I am not sure how to go about doing either of them.

https://stackoverflow.com/questions/502391 https://stackoverflow.com/questions/3818063

I got the code source from this wordpress tutorial;

https://premium.wpmudev.org/blog/load-posts-ajax

I appreciate any help I can get.

EDIT 1

I guess the functionality I am after is similar to this.

Edit 2

Thank you @Vel for pointing out the syntax issue. The script loads up - but I am not sure it does anything.

I can see this being very...data heavy unless I can implement a way use the ajax code once per tab.

Even with the AJAX code, all images load on "page load". How can I prevent this?

Community
  • 1
  • 1
Anon
  • 147
  • 2
  • 16
  • 1
    only issue is you want to load the images on demand right? that is only when the tab is active... Also are you using bootstrap tabs? – Rajshekar Reddy Dec 18 '16 at 11:31
  • Hi @RajshekarReddy, that is correct. I want the images to load on demand. I read a question on here that had the src of the image swapped out on load and put back in place when a tab was clicked – Anon Dec 18 '16 at 22:18
  • 1
    I visited you website and man there are wayyy too many images that are loading.. it takes almost 6 - 7 secs only for images. Also I felt a bit tough going through your code and suggesting you an fix Rather I did a small fiddle which you can take a look and get the general idea on how to load on demand. https://jsfiddle.net/RajReddy/ka1m1t6n/3/ have a look at this and let me know if this helps.. – Rajshekar Reddy Dec 19 '16 at 07:31

1 Answers1

1

seems ajax not trigger. Change this code.

jQuery(document).on( 'click', '.img.imgslide', function( event ) {

to 

jQuery(document).on( 'click', 'img.imgslide', function( event ) {

.img is not a class in your code.

Vel
  • 9,027
  • 6
  • 34
  • 66
  • I can't believe it was a syntax error lol. Thank you so much! The page still loads up all the images though, even if clicking on the tab reloads them. Is there a way to make the images only go through the load process once with ajax and for no images to load on page load (other than the tab images)? – Anon Dec 18 '16 at 22:21
  • Don't load the image on page load. Make empty on page load. Can you post the load_gallary function code. – Vel Dec 19 '16 at 03:36
  • error console. Uncaught TypeError: Cannot read property 'click' of undefined – Vel Dec 19 '16 at 05:40