Okay
  Public Ticket #915652
Lightboxed/Enlarged Image to Next Image
Closed
  •  5
    Nick replied

    You can minimize all of the CSS/HTML/JS although we have minimized most of the JS assets already. But this will shave off just a few KBs for you. Other than that I can recommend you tryout CloudFlare if you haven't already.

    Thanks,
    Nick


    aetherthemes

  • Kenz replied

    Thanks, that is perfect. Alrighty, I'll swap out my pngs. Any other optimizations besides trimming the image file sizes? 

  •  5
    Nick replied

    Hey Kenz,

    Sorry but I got the impression that you were using a different template than Persona, so I gave you the wrong code. So basically replace the lightbox code with this:

    /* =Lightbox
        -------------------------------------------------------------- */
        $('.lightbox').magnificPopup({
            type: 'image',
            mainClass: 'mfp-with-zoom mfp-fade',
            zoom: {
                enabled: true,
                duration: 300,
                easing: 'ease-in-out',
                opener: function(openerElement) {
                    return openerElement.is('.atvImg') ? openerElement : openerElement.find('.atvImg');
                }
            },
            gallery:{
                enabled:true
             }
        });

    As for the optimizations, I wouldn't recommend pngs at all as they have no optimization for web. If you have photoshop just save your images with the 'Save for Web' feature within PS. You can control their quality from there and you should make sure that the thumbnails don't exceed 70/80 KB while the large images can be up to 100 - 180 KB.

    Thanks,
    Nick


    aetherthemes

  •   Kenz replied privately
  •  5
    Nick replied

    Hi Kenz,

    To enable this feature you need to edit your 'main.js' file. Scroll down to the Lightbox section on line 40, where you will find the following function:

    // Light box init
    $('.lightbox').magnificPopup({
        type: 'image',
        mainClass: 'mfp-with-zoom mfp-fade',
        zoom: {
            enabled: true,
            duration: 300,
            easing: 'ease-in-out',
        opener: function(openerElement) {
            return openerElement.is('img') ? openerElement : openerElement.find('img');
         }
        }
    });

    Replace this with:

    // Light box init
    $('.lightbox').magnificPopup({
            type: 'image',
             mainClass: 'mfp-with-zoom mfp-fade',
            zoom: {
                enabled: true,
                duration: 300,
                easing: 'ease-in-out',
                opener: function(openerElement) {
                    return openerElement.is('img') ? openerElement : openerElement.find('img');
                }
            },
             gallery:{
                enabled:true
             }
    });

    Thanks,
    Nick

    P.S. Can you please send me over a link to your site so I can check out what you can do to optimize your loading time.


    aetherthemes

  •   Kenz started the conversation