Skip to content

FAQ

Jump to bottom Edit New page
Mottie edited this page Aug 26, 2011 · 24 revisions

Wiki: Home | FAQ | Setup | Usage ( Appearance , Navigation , Slideshow , Callbacks , Video, FX , Interactivity ) | Themes | Change | Credits

##List of FAQ

  • How do I prevent image flickering on page initialization?
  • I have multiple sliders, how do I make sure a specific one is active?
  • How do I make one slide last longer during the slideshow?
  • How do I get the slider to play through my slides, then return to the first one and stop?
  • Why aren't the contents of my slider showing properly, or why are the dimensions of my slider off?
  • Why doesn't AnythingSlider show my images in Chrome and Safari?
  • Why does my AnythingSlider malfunction after X number of slides (past 10,000 pixels from the start)?
  • AnythingSlider is starting from the last panel instead of the first. How do I fix it?

##How do I prevent image flickering on page initialization?

This "flickering" is called the Flash Of Unstyled Content (or FOUC) and is common when css/js is kicking in during the initial page load of some websites. There are two methods you can use to prevent this:

Method 1 (Demo)

Set the width, height and overflow of the UL in the css. The width and height should match the initial slider width and height. Best for those with javascript disabled. Here is an example, adjust the css width and height to match your dimensions:

CSS

#slider { height: 200px; width: 300px; overflow-y: auto; overflow-x: hidden }

HTML

<ul id="slider">
  <li><img src="http://placekitten.com/300/200" alt="" /></li>
  <li><img src="http://placekitten.com/300/200" alt="" /></li>
</ul>

Method 2 (Demo)

Hide all but the first slide. AnythingSlider will automatically show the other slides because each LI gets the "panel" class which has "display: block". This is not an optimal solution for those with javascript disabled. Here is an example:

CSS

.hide { display: none; }

HTML

<ul id="slider">
  <li><img src="http://placekitten.com/300/200" alt="" /></li>
  <li class="hide"><img src="http://placekitten.com/300/200" alt="" /></li>
  <li class="hide"><img src="http://placekitten.com/300/200" alt="" /></li>
</ul>

##I have multiple sliders, how do I make sure a specific one is active?

Each slider automatically sets itself as active (keyboard navigation controls it) when it is initialized. So the best method would be to add a snippet of code once the window has loaded, which is after all the sliders have been initialized.

Version 1.6.1+ only

$(window).load(function(){
  $('#slider').data('AnythingSlider').makeActive(); // only works in version 1.6.1+
});

Version 1.6 and older

$(window).load(function(){
  // Use the following with AnythingSlider versions 1.6 and older
  $('.activeSlider').removeClass('activeSlider'); // make sure only one slider is active
  $('.anythingSlider:eq(0)').addClass('activeSlider'); // finds the first slider, then makes it active
});

##How do I make one slide last longer during the slideshow?

Method 1 (Demo)

This code sets a "base" slideshow delay time, then adds additional time for the specific slides you choose in the "slideTimes" object. I used a very short slideshow time to make the differences more obvious.

// *** Vary slideshow time ***
var baseSlideShowTime = 500, // time in milliseconds
    slideTimes = {
      3 : 3000, // slide 3 = baseSlideShowTime + 3 seconds
      5 : 500   // slide 5 = baseSlideShowTime + 1/2 second
    };

$('#slider').anythingSlider({
  delay: baseSlideShowTime,
  onSlideComplete : function(slider){
    // make current slide last longer in the slideshow
    if (slideTimes.hasOwnProperty(slider.currentPage)) {
      slider.clearTimer(true); // stop slideshow
      setTimeout(function(){
        slider.startStop(slider.playing, true); // restart slideshow
      }, slideTimes[slider.currentPage]);
    }
  }
});

Method 2 (Demo)

Here is another version provided by Pubmem (source)

// *** Vary slideshow time ***
var slideShowDelay = 10000, // fallback
  slideTimes = {
    1 : 1000,
    2 : 2000,
    3 : 3000,
    5 : 5000
  };

$('#slider').anythingSlider({
  autoPlay : true,
  delay: slideTimes[1],
  onSlideComplete : function(slider){
    slider.clearTimer(true); // stop slideshow
    // Change delay time based on saved timings
    if (slideTimes.hasOwnProperty(slider.currentPage)) {
      slider.options.delay = slideTimes[slider.currentPage];
    } else {
      slider.options.delay = slideShowDelay;
    }
    slider.startStop(slider.playing, true); // restart slideshow
  }
});

##How do I get the slider to play through my slides, then return to the first one and stop?

You'll need the AnythingSlider version 1.5.10 or newer to get this to work because of a bug in older versions. Include the following options when initializing the script

$('#slider').anythingSlider({
  stopAtEnd  : true,  // If true & the slideshow is active, the slideshow will stop on the last page.
  onShowStop : function(e, slider){
    setTimeout(function(){
      // only go to the first page if the last page is visible
      if (slider.currentPage === slider.pages) { slider.gotoPage(1); }
    }, slider.options.delay);
  }
});

Basically this script sets the stopAtEnd option to stop the slideshow at the end. The script also uses the onShowStop callback function to work, but this callback occurs as soon as the slider starts animating to the last slide. So we'll need to set a timer to give the user time to read or look at the last slide (5000 milliseconds in the example above; adjust as needed). Lastly, inside the timer we need to check to make sure the slider is on the last page, in case the user moved away from it or stopped the slideshow early.

##Why are the contents of my slider showing properly? Why are the dimensions of my slider off?

This problem is mostly likely due to version 1.7+ now requiring the width and height of the slider to be set in the CSS.

#slider { width: 500px; height: 300px; }

Additionally, if the resizeContents option is set to false, each panel dimension needs to be set as well.

#slider, #slider li { width: 500px; height: 300px; } 
/* Define any differently sized panels */
#slider li.panel2 { width: 300px; height: 250px; }
#slider li.panel5 { width: 400px; height: 200px; }

##Why doesn't AnythingSlider show my images in Chrome and Safari?

When this problem occurs the slider in Chrome and Safari ends up only showing the arrow buttons and a collapsed border. This happens because those browsers initialize too fast, so that the images haven't even started loading. You can fix this by (1) defining all of your image dimensions inline or in the css, or (2) by using $(window).load(function(){...}) instead of $(document).ready(function(){...}).

##Why does my AnythingSlider malfunction after X number of slides (past 10,000 pixels from the start)?

There was a bug in jQuery prior to version 1.5 that never returned a negative left value of more than 10,000 pixels. So for a short time the plugin was changed to use scrollLeft instead of left to bypass this issue, but that also had problems (see the next FAQ entry). So, if you have this issue (brought up in issue #97), please upgrade to the newest jQuery and AnythingSlider versions.

##AnythingSlider is starting from the last panel instead of the first. How do I fix it?

Update AnythingSlider to version 1.5.13+ to fix this issue! This problem was happening because older versions of AnythingSlider used scrollLeft to position the slides in the view port. When the slider was hidden, as it would be in a popup, in a tab or inside an accordion, the scrollLeft value could not be set and it defaulted to zero, the position of the last slide clone.

Wiki: Home | FAQ | Setup | Usage ( Appearance , Navigation , Slideshow , Callbacks , Video, FX , Interactivity ) | Themes | Change | Credits

Add a custom footer
Clone this wiki locally