shaekuronen / jquery.flexloader Goto Github PK

This plugin is exactly what I was looking for!!! I'm so stoked cause I had picturefill and flexslider already set up and working, but I wanted lazyload too and stumbled upon this, so thank you for making it ;)

My issue is that after setting it all up im just pulling the 1x1.gif everywhere. Here is an example of my HTML

<div class="flexslider">
    <ul class="slides">
        <li class="slide slide-01">
            <span data-picture>
                <span 
                    data-src="images/1x1.gif"
                    data-original="images/small/strap-logo_small.jpg">
                </span>
                <span 
                    data-src="images/1x1.gif"
                    data-original="images/small/strap-logo_small.jpg"
                    data-media="(max-width: 400px)">
                </span>
                <span
                    data-src="images/1x1.gif"
                    data-original="images/strap-logo.jpg"
                    data-media="(min-width: 400px)">
                </span>
                <noscript>
                    <img src="images/strap-logo.jpg" />
                </noscript>
                </span>
            </span>
        </li>
    </ul>
</div>

The JS for flexslider-init.js looks like

$(window).load(function() {
    $('.flexslider').flexslider({
        animation: "fade",
        slideshow: true,
        animationLoop: true,
        controlNav: false,
        directionNav: true,
        prevText: "",
        nextText: "",
        start: function(slider) {
            $.flexloader(slider, {
                'picturefill': true
            });
        },
        after: function(slider) {
            $.flexloader(slider, {
                'picturefill': true
            });
        }
    });
});

Other libraries I'm using are
jquery.scrollTo.min.js

jquery.videoBG.min.js

jquery.isotope.min.js
jquery.isotope.sloppy-masonry.min.js
jquery.isotope-init.min.js

jquery.fitvids.min.js
jquery.fitvids-init.min.js

jquery.flexloader.js
jquery.flexslider.min.js
jquery.flexslider-init.min.js

external/matchmedia.js
picturefill.js

Any help would be great! Thanks!

If Flexslider's smoothHeight option is enabled and Flexloader is being used, the first slide will display with a height of 1px. Any kind of click will cause Flexslider to resize the slider appropriately, and all but the first slide work fine. It's just that first slide.

I'm happy to help troubleshoot and fix it. Just not sure where to start with this one.

First of all: thanks for this marvelous piece of code.

I got an issue using flexslider2 smoothHeigth: i'm using latest version with "Slider w/thumbnail slider" pattern, so a main slider synced with a thumbnail slider.

When the page load, the main slider height isn't consistent with the height of the slide.
With Firefox(latest) and IE11 i'm seeing a square frame whathever orientation of the image is displaying.
Chrome and Opera show me a main slider of few pixel height (24)
I suppose smoothHeight is unable to determine the right slider heigth at moment of its execution, if the played image is a lazy loaded image.
If i play the main slider ffwd, smoothHeigth is able to keep the right framing. If i jump some slides using the thumbnail slider (involving lazyloading), the issue come back.

I have checked the html and i noticed the issue is related to flex-vieport div that assumes an incorrect height (pretty sure driven directly via JS smoothHeigth). The version without flexloader is running fine, so i'm sure my styling is not causing the issue... But man... i really need lazyloading, because i have to display dozens of hd-images in a page and do it without going lazy is pushing bandwidth too much.

If someone suggest me a way to solve.. i think should be fine rerun the smoothHeight utility after loading completion, or maybe running it after some delay, but i'm not able to do it right now.

Thank so much in advance.

Hi,
Amazing plugin! And it looks like it also supports fade animation for sliders.
However, my intuitive config:
animation: "fade",
smoothHeight: true,
doesn't seem to work (presents some issues):

• the fading itself works, but
• the last but one slide gets a double height, covering all the content below the slider and rendering a potential navigation carousel below unusable
  Am I doing anything wrong here?
  Thank you,
  Eros

Hi there,
This is exactly what I was looking for! I'm just wundering if this will work with the new markup of Picturefill 2.0?

<picture>
    <!--[if IE 9]><video style="display: none;"><![endif]-->
    <source srcset="examples/images/large.jpg, examples/images/extralarge.jpg 2x" media="(min-width: 800px)">
    <source srcset="examples/images/small.jpg, examples/images/medium.jpg 2x">
    <!--[if IE 9]></video><![endif]-->
    <img srcset="examples/images/small.jpg, examples/images/medium.jpg 2x" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
</picture>

Thanks a lot!

It's working good on Chrome but on Firefox just the demo Flexslider Slideshow (no Flexloader) is working. I wish I could give you some help about the issue but I couldn't understand the problem.

It's looking great. Thanks for the awesome plugin.

Hi there,

Running into an issue, took examples straight from the demo site but for whatever reason I keep running into "TypeError: e.flexloader is not a function" issue. I believe the newest version of flexslider may have some sort of incompatibility issue?

Hello,
Looking into the NAV section of the FireBug, I noticed that ALL the image resources are loaded up-front, not lasy-loaded, as described ("On Flexslider start, Flexloader will update the img src of Slides 1, c1, 2, 16, & c16 ("c" prefix indicates cloned slide). When the next slide is animated to, Flexloader will update the img src of Slide 3. Slides 1, c1, & 2 are already loaded and will not updated.")
Is this a bug, or is it intended to work that way?
Eros

I use flexslider to load html content. is it possible to load htmls instead of pictures?