Hi Craig,

If you have a slider that needs to be "bound" after Slimmage has done it's thing you need to use the readyCallBack, e.g.

    window.slimmage.readyCallback = function() {
        if (sliderActive == false) {
            sliderActive = true;
            $("#slider").cSlider({
                mode: 'fade',
                pauseOnHover: true,
                responsive: true
            });

        }

Make sense?

Jeavon

Thanks Jeavon, it worked, but...

Changed #slider to my slider's ID. Ran ok but with errors, doesn't know what sliderActive is, and to be honest, neither do I. Is it something in slimsy, flexslider or am I supposed to instantiate it somehow?

If we can clear that up it would be great.

Cheers

Great! That snippet was just a example, but sliderActive is there to ensure it's only executed once, I don't remember if there was occurrence when it was activated more than once so it's probably irrelevant.

  window.slimmage.readyCallback = function() {
        //activate your slider here
  }

This gets weirder.

I'm guessing the cSlider code is for the WordPress cSlider. It's also got JQuery in it so can't possibly run anyway if the code you suggest is placed with the window.slimmage = { verbose: false }; line which has to be the first line of JS, so JQuery isn't loaded yet.

So what I'd tried previously which somehow worked but gave "sliderActive is not defined" errors was, in the start of the JS loading (after all other HTML)

<script>
    window.slimmage = { verbose: false };
    window.slimmage.readyCallback = function() {
        if (sliderActive == false) {
            sliderActive = true;
            $("#slider").cSlider({
                mode: 'fade',
                pauseOnHover: true,
                responsive: true
            });

        }
}
</script>

Then in a common.js, loaded later, after JQuery, initiated the flexSlider:-

// Slider
if($('.flexslider').length > 0) {
    $('.flexslider').flexslider({
      useCSS: 'false',
      animation: 'slide',
      touch: 'true',
      prevText: 'Prev',
      nextText: 'Next'
    });
}

So modifying that setup in the light of your last answer, the initial line was left as original:-

window.slimmage = { verbose: false };

And the common.js flexSlider initiation changed to:-

    // Slider
if($('.flexslider').length > 0) {
    window.slimmage.readyCallback = function() {
        $('.flexslider').flexslider({
          useCSS: 'false',
          animation: 'slide',
          touch: 'true',
          prevText: 'Prev',
          nextText: 'Next'
        });
    }
}

This gives no errors but the original issue remains, that of initial low res pics until resized.

Just a thought but is there not something in Slimsy that can be called from the flexSlider initiation script that can do the necessary?

Please advise.

No, this is just a front end JS issue. But it should be be like this for your jQuery plugin:

jQuery(document).ready(function () {
    window.slimmage.readyCallback = function () {
        if ($('.flexslider').length > 0) {
            $('.flexslider').flexslider({
                useCSS: 'false',
                animation: 'slide',
                touch: 'true',
                prevText: 'Prev',
                nextText: 'Next'
            });
        }
    }
});

'fraid that doesn't work. Still loads low res images into the slider as before. No errors though.

So the HTML build sequence is:-

Load head with CSS

Load Google Translate script (don't ask!)

Load body

Then

<script>
    window.slimmage = { verbose: false };

</script>
<script src="/scripts/slimmage.min.js"></script>                      
<script src="/scripts/jquery-2.1.1.min.js"></script>   
<script src="/scripts/jquery-ui.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>          
<script src="/scripts/common.js?v=0"></script>

Load google Analytics

The initiation script is in the common.js. Could this be the issue?

That looks ok, no errors is interesting. Could you try adding some console.log in key positions or use Chrome debugger to see where it's getting to and when?

Is this online anywhere I could view?

Should be up on a temp test domain tomorrow but am having great trouble finding decent shared hosting. There are some muppets about! But that's another thread ;)

Cool, let me know when you have it online. I have a quick look at flexslider and I think it should be compatible. The test is if the images not in view still have computed width and height.

Finally, it's on test at http://test.tighruaraidh.co.uk/ awaiting final content loading. Any advice would be appreciated.

Could you try placing Slimmage.js in the head and changing verbose to true?

Done as requested.

Thanks, strange thing is I copied your html locally and it worked fine....

Is there a chance you could give me temporary Umbraco access so that I can edit the js files to try to work out what's going on?

Sent by Twitter DM (not that I don't trust the rest of you of course ;)) lol

Ok, solved :-)

Two issues here, first was to add the window.slimmage.readyCallback method in common.js and second is line 40 in flexslider.css which is hiding the images initially, this prevents Slimmage from being able to calculate the "computed" image size and so defaults to first step (160). To avoid this without hacking your vendor flexsider.css file, I've added a element override in your flexslider.cshtml Partial View. <li style="display:block"> I guess with other sliders they sometimes use z-index or off screen positioning rather than display which is why they haven't had this particular issue.

Jeavon

Thanks Jeavon but the display:block is causing issues with the slider position. The first slide comes in correctly then jumps up 20px. The next slide comes in at the +20px position, then the first slide repeats as before. However, it does fix the resolution issue. I guess there's some more digging to be done. I was thinking that some js must be fired when the browser resizes so couldn't that be fired manually so to speak, in the common.js on page load or just after the slider is initiated? Might just be easier to swap out the slider for another one, though I do like FlexSlider.

Ok, swapped out FlexSlider for bxSlider so problem has now gone away. Not as nice a slider though. Having done it, realised I should probably have not used slimsy for the slider. But hey-ho, got to get the site up in budget:)

Many thanks for your help Jeavon, beers are owed.

Craig

Cool, think I will create a Slider info section somewhere in the Slimsy docs and create a list of known Slimmage compatible plugins :-)

is working on a reply...