Starting from last panel in version 1.7.4

burningbee commented 13 years ago

Hi,

I saw in the FAQ that this problem had been fixed, "Update AnythingSlider to version 1.5.13+ to fix this issue!" but for my use it seems to be acting up again in the latest version 1.7.4

While trying to use the "external captions" mode the slider always starts out on the last slide, even as I've recreated the demo you have posted for this mode to see where I went wrong.

If it will help, I'll happily share my page code.

Mottie commented 13 years ago

Hi Burningbee!

Hmm, are you using hash tags? The demo seems to be working correctly, so maybe I do need to see the code you are using.

burningbee commented 13 years ago

I kept this bare-bones to see where my problem was but obviously I'm ??? Copied this over and saw my script from var updateCaption = ... needed a couple carriage returns deleted and some better indentation for your ease of reading.

<script type="text/javascript">
var updateCaption = function(slider){
    var cap = slider.$currentPage.find('.caption').html();
    $('#current-caption')
        .html(cap)
        .fadeIn(200);
};

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

        theme: 'metallic',

        // *********** Callbacks ***********
        // Callback when the plugin finished initializing
        onInitialized: function(e, slider) { updateCaption(slider); },

        // Callback before slide animates
        onSlideBegin: function(e, slider) {
            $('#current-caption').fadeOut(200); },

        // Callback when slide completes - no event variable!
        onSlideComplete: function(slider) { updateCaption(slider); }

    });
});
</script>

Made the above changes and it works just fine. (You can see the original below.)

I've never run into that level of finicky behavior before. Was it just my hack-dash style that broke it? Would appreciate any insight into this that might help me to code better rather than remain dumb.

Thanks for your help. -TREVOR

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>
<title>Save the Roman Kwasniewski Collection | mkephotomemory.uwm.edu</title>
<style>
img.full {
    max-width: 100%;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

<link rel="stylesheet" href="css/anythingslider.css" type="text/css" media="screen">
<script type="text/javascript" src="js/jquery.anythingslider.js"></script>
<!-- <link rel="stylesheet" href="css/print.css" type="text/css" media="print"> -->
<link rel="stylesheet" href="css/theme-metallic.css" type="text/css" media="screen">
<!-- Older IE stylesheet, to reposition "anything slider" navigation arrows, added AFTER the theme stylesheet above -->
<!--[if lte IE 7]>
<link rel="stylesheet" href="css/anythingslider-ie.css" type="text/css" media="screen">
<![endif]-->

<script type="text/javascript" src="scripts/iepngfix_tilebg.js"></script>

<script type="text/javascript">

var updateCaption = function(slider){
    var cap = slider.$currentPage.find('.caption').html();
    $('#current-caption')
        .html(cap)
        .fadeIn(200);
};

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

    theme: 'metallic',

    // *********** Callbacks ***********
    // Callback when the plugin finished initializing
    onInitialized: function(e, slider) { updateCaption(slider); },

    // Callback before slide animates
    onSlideBegin: function(e, slider) {
        $('#current-caption').fadeOut(200); },

    // Callback when slide completes - no event variable!
    onSlideComplete: function(slider) { updateCaption(slider); }

});
});

</script>
</head>

<body>
<div id="wrap">

    <ul id="slider">
        <li>
        <!-- <img src="img/blank.gif" alt="" title=""> -->
            <img src="img/carousel-960x690/carousel-1.jpg" alt="" title="" class="full">
            <div id="viewport1"></div>
            <div class="caption descript-txt">
            <h3 class="descript-tagline">Polonia</h3>
            <p>In its heyday, Milwaukee’s Polish-American community was among the largest in the United States. The first Polish inhabitant of Milwaukee arrived as early as 1842, and
            by the turn of the century Polish-Americans formed the second largest ethnic group in the city. Most settled in a four-square mile area on the South Side known as “Polonia.”</p>
            </div>
        </li>
        <li>
            <img src="img/carousel-960x690/carousel-2.jpg" alt="" title="" class="full">
            <div id="viewport2"></div>
            <div class="caption descript-txt">
            <h3 class="descript-tagline">Premiere Photographer</h3>
            <p>Studio photographer Roman B.J. Kwasniewski, the son of Polish immigrants, created a rich visual record of his community in the years between World War I and II. 
            From his studio on Lincoln Avenue, Kwasniewski captured important events in the lives of thousands of Polish-Americans: First Communions, confirmations, graduations, weddings, and anniversaries. 
            He was widely regarded as his community’s premiere Polish-American photographer.</p>
            </div>
        </li>
    </ul>

    <div id="current-caption"></div>

</div> <!-- /wrap -->
</body>
</html>

Mottie commented 13 years ago

Hmm, with the latest version (1.7+) of the slider, you need to define the width and height of the slider in the css:

#slider {
  width: 960px;
  height: 690px;
}

because when you set the image width to 100%, it resizes to fit inside the LI which is the same width as the UL which is 100% page width, unless your '#wrap` has a defined width. So I'm guessing that might be why you see the last slide.... which is really a clone of the last slide positioned in front of the first.

burningbee commented 13 years ago

Thanks for your help Mottie. Things got a little much while I was trying to add a re-sizeable "viewport" div to contain some zoomable images. After the little bit of copy/paste good luck and your previous comment the whole thing is working pretty smoothly.

CSS-Tricks / AnythingSlider

Starting from last panel in version 1.7.4 #142