search

CSS-Tricks / AnythingSlider

A jQuery Slider plugin for anything.
http://css-tricks.github.io/AnythingSlider/
GNU Lesser General Public License v3.0
1.15k stars 380 forks source link

Can I hide all images until loaded in AnythingSlider? #570

Closed alicetheblue closed 11 years ago

alicetheblue commented 11 years ago

My portfolio site has thumbnails on the home page that link to AnythingSlider in a new page.

(Each thumbnail has a hashtag that can link directly to a specific slide in AnythingSlider.)

The first image in AnythingSlider always briefly loads under the specified slide.

I wondered if AnythingSlider doesn't the images before they are loaded, which is causing this effect. I am new to js, by the way.

thank-you

JamyGolden commented 11 years ago

I can't see your html/css/js, but try this: CSS

#anythingslider img { display: none; }

JS

$(window).load(function(){
    $('#anythingslider img').show();
});

Random note: without javascript enabled the images won't show. There are various things you can do to have them show with JS disabled. I'd suggest looking at modernizr and playing around with the .no-js class applied to the <html> element.

alicetheblue commented 11 years ago

I'll try that. Thank-you.

I have my site up for a test here : http://www.marshamarshamarsha.ca/mmm/index.php

Also, I am a newbie at all that is js. ;-)

JamyGolden commented 11 years ago

Ah ok great I just had a look. I'm first going to suggest something different: in your HTML you have this:

// DOM Ready
$(document).ready(function(){
    $('#slider').anythingSlider({
    //bui...

Try replace the $(document).ready(function(){ part with $(window).load(function(){. So it would look like this:

// DOM Ready
$(window).load(function(){
    $('#slider').anythingSlider({
    //bui...

That will force the slider to initialize only once the page has loaded.

alicetheblue commented 11 years ago

Brilliant I was just to figure out how to post my code here. lol

I will try that out.

alicetheblue commented 11 years ago

Still the same with

// DOM Ready
$(window).load(function(){
        $('#slider').anythingSlider({
        autoPlay       : false,
        buildStartStop : false,
        mode: 'fade',
    }); //end ready

    $("#slide-jump").click(function(){
        $('#slider').anythingSlider(13);

        $('#slider').addClass('animated fadeIn');   
    });
});
alicetheblue commented 11 years ago

Wait - forgot something - will test again on internal server

alicetheblue commented 11 years ago

Still happening

JamyGolden commented 11 years ago

Line 37 of view-source:http://www.marshamarshamarsha.ca/mmm/indexhero.php#slider1&panel1-1 is still dom.ready:

$(document).ready(function(){
alicetheblue commented 11 years ago

I tested on MAMP on internal server.

I'll have to log on to server then and change for you to see

alicetheblue commented 11 years ago

done

JamyGolden commented 11 years ago

Ok cool - that's actually good news :p What exactly do you want it to look like while it loads the images in the background?

alicetheblue commented 11 years ago

What I didn't want was Slide 1 showing up briefly before the specified Slide. Looked like a mistake.

How long would they all take to load? Would there just be a blank nothing until they loaded.

JamyGolden commented 11 years ago

Ok. Sorry, I misunderstood. Could you change back to the document ready.

Add this to your CSS:

#slider {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
}

.anythingWindow #slider {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
}

That should fix the problem. The gross filter is for IE8 support.

alicetheblue commented 11 years ago

done.

alicetheblue commented 11 years ago

Looking on Mac

Firefox good Safari - Only after going back and forth from work to individual slider a lot of times does it happen :) Chrome - Only after going back and forth from work to individual slider -Once

alicetheblue commented 11 years ago

Thank-you JamyGolden

On the iPad it looks just perfect - It was the worst culprit. And now it is all better :-)

alicetheblue commented 11 years ago

Question:

This filter is for IE? Why would it make a difference on other browsers?

Oh I see - other browsers are opacity: 0; and opacity: 1;

So much to learn!

Mottie commented 11 years ago

Hi @alicetheblue!

Sorry for taking so long to respond!

filter is only used by IE; but some browsers might ignore any css below a line it encounters with css it doesn't recognize, so it might be best to make the filter the last line in that block of css. Like this:

#slider {
    opacity: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}

.anythingWindow #slider {
    opacity: 1;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}
alicetheblue commented 11 years ago

Thanks Mottie!