Support » Plugin: Boxers and Swipers » Improve photoswipe loading with data-size

  • Resolved Ninos

    (@ninos-ego)


    Hey there,
    if data-size is defined on a-tag you should not load the image because of performance reasons. It’s enough to use the informations from data-size.
    For using data-size if available, just change following file:
    /photoswipe/jquery.photoswipe.js

    $target.each(function(){
                        if( $(this).is('a') ){
                            $(this).attr(uidkey,uid);
                            var imgSrc = $(this).attr('href');
                            if( ! ( imgSrc in images )  ){
                                var img = new Image();
                                img.src = imgSrc;
                                images[imgSrc] = null;
                                img.onload = function(){
                                    images[imgSrc] = img;
                                };
                                img.onerror = function(){
                                    images[imgSrc] = img;
                                }
                            }
                            ++uid;
                        }
                    });

    to

    $target.each(function(){
                        if( $(this).is('a') ){
                            $(this).attr(uidkey,uid);
                            var imgSrc = $(this).attr('href');
                            if( ! ( imgSrc in images )  ){
    							if( $(this).attr('data-size') ) {
    								var size = $(this).attr('data-size').split('x');
    								images[imgSrc] = {
    									src: imgSrc,
    									width: size[0],
    									height: size[1]
    								};
    							} else {
    								var img = new Image();
    								img.src = imgSrc;
    								images[imgSrc] = null;
    								img.onload = function(){
    									images[imgSrc] = img;
    								};
    								img.onerror = function(){
    									images[imgSrc] = img;
    								}
    							}
                            }
                            ++uid;
                        }
                    });

    Best regards

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Author Katsushi Kawamori

    (@katsushi-kawamori)

    Thank you for the report.

    Plugin Author Katsushi Kawamori

    (@katsushi-kawamori)

    I confirmed.
    It got better.
    Thanks!!

    I will distribute the corrected version in the next version.
    I wrote your WordPress account and Website to Photoswipe.js.

    Perfect, thank you! BTW: There’s also data-m-size for smaller resolutions, but did not know how to implement it atm.. 🙂

    Another improvement. Sometimes after sharing an image the DOM is loaded too late, so you get an js-error and photoswipe is not working anymore. Because of that I recommend adding the DOM element via addJS to the body footer.
    Just edit /inc/BoxersAndSwipersAddJs.php on line 275 and change following:

    $boxersandswipers_add_js .= <<<BOXERSANDSWIPERS3
    
            });
        });
    });
    </script>

    to

    $boxersandswipers_add_js .= <<<BOXERSANDSWIPERS3
    
            });
        });
    });
    </script>
    <!-- Root element of PhotoSwipe. Must have class pswp. -->
    <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    
        <!-- Background of PhotoSwipe. 
             It's a separate element as animating opacity is faster than rgba(). -->
        <div class="pswp__bg"></div>
    
        <!-- Slides wrapper with overflow:hidden. -->
        <div class="pswp__scroll-wrap">
    
            <!-- Container that holds slides. 
                PhotoSwipe keeps only 3 of them in the DOM to save memory.
                Don't modify these 3 pswp__item elements, data is added later on. -->
            <div class="pswp__container">
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
            </div>
    
            <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
            <div class="pswp__ui pswp__ui--hidden">
    
                <div class="pswp__top-bar">
    
                    <!--  Controls are self-explanatory. Order can be changed. -->
    
                    <div class="pswp__counter"></div>
    
                    <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
    
                    <button class="pswp__button pswp__button--share" title="Share"></button>
    
                    <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
    
                    <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
    
                    <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                    <!-- element will get class pswp__preloader--active when preloader is running -->
                    <div class="pswp__preloader">
                        <div class="pswp__preloader__icn">
                          <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                          </div>
                        </div>
                    </div>
                </div>
    
                <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                    <div class="pswp__share-tooltip"></div> 
                </div>
    
                <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
                </button>
    
                <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
                </button>
    
                <div class="pswp__caption">
                    <div class="pswp__caption__center"></div>
                </div>
    
            </div>
    
        </div>
    
    </div>

    Best regards

    Plugin Author Katsushi Kawamori

    (@katsushi-kawamori)

    Thanks again.
    You are a genius.

    Plugin Author Katsushi Kawamori

    (@katsushi-kawamori)

    I wrote your name and Website in readme.txt.

    Wow, you’re very fast and thanks you! I have another improvement XD If you’re using boxersandswipers for the thumbnail and you have no images in content (the_content()), then the lib is not loaded. Therefore I added following additional check in /inc/BoxersAndSwipers.php on line 243:
    if (strstr($contents, '="boxersandswipers"') && $this->foot_count == 0) {
    to
    if ( (has_post_thumbnail() || strstr($contents, '="boxersandswipers"') ) && $this->foot_count == 0) {

    Best regards 🙂

    PS: Following has better performance:
    if ($this->foot_count == 0 && ( strstr($contents, '="boxersandswipers"') || has_post_thumbnail() )) {

    Plugin Author Katsushi Kawamori

    (@katsushi-kawamori)

    Thanks so much!!

    However, I think that it is unnecessary to pop-up Featured Images(Post Thumbnails). Because I think it is almost always to use it duplicated in articles. I think that it should be independent of itself.

    Thanks!

    Hmm, yeah there you’re right. So then I would do something like that 🙂
    if ($this->foot_count == 0 && ( strstr($contents, '="boxersandswipers"') || apply_filters( 'boxersandswipers_enable_js', false ) )) {

    Best regards 🙂

    Plugin Author Katsushi Kawamori

    (@katsushi-kawamori)

    It may be good to add the option “Popup Featured Images (Post Thumbnails)”.
    It’s easy, but there are many other projects, so please wait for a moment.

    Ah ok, that would be perfect. No stress, atm I’m just changing the relevant code part 🙂

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Improve photoswipe loading with data-size’ is closed to new replies.