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

First headline caption not showing on pageload #638

Closed djjshelley closed 8 years ago

djjshelley commented 9 years ago

Hello, I've ran anythingslider for a while and one day the initial caption stopped showing, I'm stumped. I tried updating everything but it blew up.

Feel free to checkout the code here: http://www.aldershotaudiology.com/

Thanks!

Josiah

Mottie commented 9 years ago

Hi Josiah!

Hmm, that is an odd error to see.

Would you please try to move the AnythingSlider initialization code block to the bottom of the page and see if that solves the problem.

djjshelley commented 9 years ago

I’ve added it to the bottom and I’m not finding any difference.

Thanks for helping me out!

Josiah

On Feb 19, 2015, at 3:01 PM, Rob G notifications@github.com wrote:

Hi Josiah!

Hmm, that is an odd error to see.

Would you please try to move the AnythingSlider initialization code block to the bottom of the page and see if that solves the problem.

— Reply to this email directly or view it on GitHub https://github.com/CSS-Tricks/AnythingSlider/issues/638#issuecomment-75124856.

Mottie commented 9 years ago

Oh, could you try the latest version. I see you're using v1.5.18 and the current version is 1.9.4. The fx file also has an update available.

djjshelley commented 9 years ago

I did update to the latest version but didn’t have any luck. In fact, it kind of blew up the slide selection menu. Probably because of the css used. I created this site about 4 years ago I’d say.

Josiah

On Feb 19, 2015, at 3:22 PM, Rob G notifications@github.com wrote:

Oh, could you try the latest version. I see you're using v1.5.18 and the current version is 1.9.4. The fx file also has an update available.

— Reply to this email directly or view it on GitHub https://github.com/CSS-Tricks/AnythingSlider/issues/638#issuecomment-75128471.

Mottie commented 9 years ago

Hmm, ok I guess the next thing to try is this... the first line of code:

$(function () {
$('#slider').anythingSlider({

change that to:

$(window).load(function () {
$('#slider').anythingSlider({
djjshelley commented 9 years ago

Tried it at the top and bottom of the page, no luck.

On Feb 19, 2015, at 3:41 PM, Rob G notifications@github.com wrote:

Hmm, ok I guess the next thing to try is this... the first line of code:

$(function () { $('#slider').anythingSlider({ change that to:

$(window).load(function () { $('#slider').anythingSlider({ — Reply to this email directly or view it on GitHub https://github.com/CSS-Tricks/AnythingSlider/issues/638#issuecomment-75131687.

Mottie commented 9 years ago

Hmm, a tough one...

Well first off, you might want to change that back LOL. The images stacked on top of each other is distracting ;)

The problem I am seeing is that there is an error on the page caused by the fx code. For some reason it isn't recognizing that AnythingSlider is already initialized. So I think separating the code like this might help crosses fingers

$(function () {
    $('#slider').anythingSlider({
        height          : '415',
        expand          : true,
        delay           : 7000,
        startStopped    : false,
        resizeContents  : true,
        pauseOnHover    : true,
        buildArrows     : false,
        InfinitiveSlides: false,
        autoPlayLocked  : true, // If true, user changing slides will not stop the slideshow
        navigationFormatter : function(i, panel){
            // Add Preview Items here
            return '<img src="img/pictures/slider/slider-item-' + ['1', '2', '3', '4'][i - 1] + '-thumb.jpg">';
        }
    });

    $(".thumbNav").hide();

    //Slider Controls - external
    $('#slider-wrapper').hover(function() {
        $(".slideforward").stop(true, true).fadeIn();
        $(".slidebackward").stop(true, true).fadeIn();
        $(".thumbNav").stop(true, true).fadeIn();
    }, function() {
        $(".slideforward").fadeOut();
        $(".slidebackward").fadeOut();
        $(".thumbNav").fadeOut();
    });

    $(".slideforward").click(function(){
        $('#slider').data('AnythingSlider').goForward();
    });

    $(".slidebackward").click(function(){
        $('#slider').data('AnythingSlider').goBack();
    });
});

$(window).load(function(){
    $('#slider').anythingSliderFx({
        '.slider-caption-top'    : [ 'caption-Top', '300px', '400', 'easeOutExpo' ],
        '.slider-caption-left'    : [ 'caption-Left', '300px', '400', 'easeInQuad' ],
        '.slider-caption-right'    : [ 'caption-Right', '300px', '400', 'easeInQuad' ],
        '.slider-caption-bottom'    : [ 'caption-Bottom', '300px', '400', 'easeOutExpo' ]
    });
});
djjshelley commented 9 years ago

Can’t go wrong with a challenge.

I switched it, no affect on the website. I also tried it at the bottom of the page.

Josiah

On Feb 19, 2015, at 4:26 PM, Rob G notifications@github.com wrote:

Hmm, a tough one...

Well first off, you might want to change that back LOL. The images stacked on top of each other is distracting ;)

The problem I am seeing is that there is an error on the page caused by the fx code. For some reason it isn't recognizing that AnythingSlider is already initialized. So I think separating the code like this might help crosses fingers

$(function () { $('#slider').anythingSlider({ height : '415', expand : true, delay : 7000, startStopped : false, resizeContents : true, pauseOnHover : true, buildArrows : false, InfinitiveSlides: false, autoPlayLocked : true, // If true, user changing slides will not stop the slideshow navigationFormatter : function(i, panel){ // Add Preview Items here return ''; } });

$(".thumbNav").hide();

//Slider Controls - external
$('#slider-wrapper').hover(function() {
    $(".slideforward").stop(true, true).fadeIn();
    $(".slidebackward").stop(true, true).fadeIn();
    $(".thumbNav").stop(true, true).fadeIn();
}, function() {
    $(".slideforward").fadeOut();
    $(".slidebackward").fadeOut();
    $(".thumbNav").fadeOut();
});

$(".slideforward").click(function(){
    $('#slider').data('AnythingSlider').goForward();
});

$(".slidebackward").click(function(){
    $('#slider').data('AnythingSlider').goBack();
});

});

$(window).load(function(){ $('#slider').anythingSliderFx({ '.slider-caption-top' : [ 'caption-Top', '300px', '400', 'easeOutExpo' ], '.slider-caption-left' : [ 'caption-Left', '300px', '400', 'easeInQuad' ], '.slider-caption-right' : [ 'caption-Right', '300px', '400', 'easeInQuad' ], '.slider-caption-bottom' : [ 'caption-Bottom', '300px', '400', 'easeOutExpo' ] }); }); — Reply to this email directly or view it on GitHub https://github.com/CSS-Tricks/AnythingSlider/issues/638#issuecomment-75139416.

Mottie commented 9 years ago

Oh, ok I think I see the problem now!

if you look at line 99, you'll see a lonely $(this):

$(this)

    // bind events for "OUT" effects - occur when leaving a page
    .bind('slide_init', function(e, slider){

change it to

var base = $(this)

You'll see that it is set this way in the latest fx code version

Then you should be able to go back to your original code (sorry!)

$(function () {
    $('#slider').anythingSlider({
        height          : '415',
        expand          : true,
        delay           : 7000,
        startStopped    : false,
        resizeContents  : true,
        pauseOnHover    : true,
        buildArrows     : false,
        InfinitiveSlides: false,
        autoPlayLocked  : true, // If true, user changing slides will not stop the slideshow
        navigationFormatter : function(i, panel){
            // Add Preview Items here
            return '<img src="img/pictures/slider/slider-item-' + ['1', '2', '3', '4'][i - 1] + '-thumb.jpg">';
        }
    }).anythingSliderFx({
        '.slider-caption-top'    : [ 'caption-Top', '300px', '400', 'easeOutExpo' ],
        '.slider-caption-left'   : [ 'caption-Left', '300px', '400', 'easeInQuad' ],
        '.slider-caption-right'  : [ 'caption-Right', '300px', '400', 'easeInQuad' ],
        '.slider-caption-bottom' : [ 'caption-Bottom', '300px', '400', 'easeOutExpo' ]
    });

    $(".thumbNav").hide();

    //Slider Controls - external
    $('#slider-wrapper').hover(function() {
        $(".slideforward").stop(true, true).fadeIn();
        $(".slidebackward").stop(true, true).fadeIn();
        $(".thumbNav").stop(true, true).fadeIn();
    }, function() {
        $(".slideforward").fadeOut();
        $(".slidebackward").fadeOut();
        $(".thumbNav").fadeOut();
    });

    $(".slideforward").click(function(){
        $('#slider').data('AnythingSlider').goForward();
    });

    $(".slidebackward").click(function(){
        $('#slider').data('AnythingSlider').goBack();
    });
});
djjshelley commented 9 years ago

Hmm…. thank you for all your help but I’m still seeing the issue… I’ve updated line 99 of anythingslider.fx.

Am I missing an update?

Josiah

On Feb 19, 2015, at 4:46 PM, Rob G notifications@github.com wrote:

Oh, ok I think I see the problem now!

if you look at line 99, you'll see a lonely $(this):

$(this)

// bind events for "OUT" effects - occur when leaving a page
.bind('slide_init', function(e, slider){

change it to

var base = $(this) You'll see that it is set this way in the latest fx code version https://github.com/CSS-Tricks/AnythingSlider/blob/master/js/jquery.anythingslider.fx.js#L112 Then you should be able to go back to your original code (sorry!)

$(function () { $('#slider').anythingSlider({ height : '415', expand : true, delay : 7000, startStopped : false, resizeContents : true, pauseOnHover : true, buildArrows : false, InfinitiveSlides: false, autoPlayLocked : true, // If true, user changing slides will not stop the slideshow navigationFormatter : function(i, panel){ // Add Preview Items here return ''; } }).anythingSliderFx({ '.slider-caption-top' : [ 'caption-Top', '300px', '400', 'easeOutExpo' ], '.slider-caption-left' : [ 'caption-Left', '300px', '400', 'easeInQuad' ], '.slider-caption-right' : [ 'caption-Right', '300px', '400', 'easeInQuad' ], '.slider-caption-bottom' : [ 'caption-Bottom', '300px', '400', 'easeOutExpo' ] });

$(".thumbNav").hide();

//Slider Controls - external
$('#slider-wrapper').hover(function() {
    $(".slideforward").stop(true, true).fadeIn();
    $(".slidebackward").stop(true, true).fadeIn();
    $(".thumbNav").stop(true, true).fadeIn();
}, function() {
    $(".slideforward").fadeOut();
    $(".slidebackward").fadeOut();
    $(".thumbNav").fadeOut();
});

$(".slideforward").click(function(){
    $('#slider').data('AnythingSlider').goForward();
});

$(".slidebackward").click(function(){
    $('#slider').data('AnythingSlider').goBack();
});

}); — Reply to this email directly or view it on GitHub https://github.com/CSS-Tricks/AnythingSlider/issues/638#issuecomment-75144083.

Mottie commented 9 years ago

smack head

We're also missing the part from line 181:

Sorry, I have way too many distractions at the moment.

So, change this code in the fx file from this:

            });

            // call gotoPage to trigger intro animation
            $(window).load(function(){ base.gotoPage(base.currentPage, base.playing); });

to this:

            }).data('AnythingSlider');

            // call gotoPage to trigger intro animation
            $(window).load(function(){ base.gotoPage(base.currentPage, base.playing); });

And yes, this could "probably" have been fixed by updating to the latest "jquery.anythingslider.fx.js" file.

djjshelley commented 9 years ago

Success!!! Thank you so much!!

On Feb 19, 2015, at 5:07 PM, Rob G notifications@github.com wrote:

smack head

We're also missing the part from line 181 https://github.com/CSS-Tricks/AnythingSlider/blob/master/js/jquery.anythingslider.fx.js#L181:

Sorry, I have way too many distractions at the moment.

So, change this code in the fx file from this:

        });

        // call gotoPage to trigger intro animation
        $(window).load(function(){ base.gotoPage(base.currentPage, base.playing); });

to this:

        }).data('AnythingSlider');

        // call gotoPage to trigger intro animation
        $(window).load(function(){ base.gotoPage(base.currentPage, base.playing); });

And yes, this could "probably" have been fixed by updating to the latest "jquery.anythingslider.fx.js" file https://github.com/CSS-Tricks/AnythingSlider/blob/master/js/jquery.anythingslider.fx.js.

— Reply to this email directly or view it on GitHub https://github.com/CSS-Tricks/AnythingSlider/issues/638#issuecomment-75148702.

Mottie commented 9 years ago

YAY! you're welcome... whew