Changing size of first image in Slider?

[eabigelow]

Hi--

This is a wonderful slider: good to look at (with some nice options in themes), fluid, and with multiple uses. Thanks very much for the wonderful work!

I do have a problem, however. I have been trying (for the last two days, actually) to increase the size of the image on the first frame of the slider and then revert to a smaller size for the rest of the images.

I have an sample url here where the first image is not as large as I would like it (it's a title page, so I'd like to have the image larger than the rest) URL: http://www.webyarns.com/LASTWORDS2/index5.html

I was also able to make it work with a little hacking, but the problem then was the white space that is now between the images while the slider moves--sample URL: http://www.webyarns.com/WhiteSpace/WhiteSpace.html

Again, great work. Any help on this problem would be most appreciated!!!!!

Many thanks!

P.S. I have the slider set for vertical. I am also using caption-top at the top plus current-caption below the image. Trying height="450" within the img tag can decrease the height, but not increase it (unless the slider height is also changed and is higher).

[Mottie]

Hi eabigelow!

You just need to set the resizeContents option to false, then set each panel dimension. I made this demo for you.

Note that I set the dimension of each panel and each image.

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

$('#slider').anythingSlider({

    // If true, solitary images/objects in the panel will expand to fit the viewport
    resizeContents: false,
    // If true, all panels will slide vertically; they slide horizontally otherwise
    vertical: true

});

[eabigelow]

Thanks very, Mottie. I will give this a go tomorrow (all tuckered out right now). Your reply is much appreciated!

[eabigelow]

PS Will this work for a background image, too?

[Mottie]

Yes, the slider resizes to match the panel size (LI size in the above example).

[eabigelow]

Hi, Mottie. Thanks very much for this. It does what I wanted in that I am now able to resize the various images within the panels. That's great!

There is a problem, though, with the smoothness of the animations in the caption-top at the top plus current-captions below the images. Instead of a smooth alpha tween on opening, they pretty much just pop up in a jerky manner. I noticed this when I first tried to set the resizeContents: false. (example here: http://webyarns.com/LastWordsWorksButJerky/index5.html)

Is there a way to regain that smoothness in the animations?

Many thanks for any help!

[Mottie]

Hmm, that is really jerky... I messed around with the timing and it didn't seem to help, so maybe the best thing to try would be to use an easing of "easeInOutCubic"

[eabigelow]

Hi, Mottie. I tried putting "easeInOutCubic" in the "easing" category of anythingslider.js, and I imported <script type='text/javascript' src="js/jquery.easing.1.2.js"></script> into the header of the main page.

Did I do this correctly? In any case, the jerkiness is still there...

Any thoughts?

Many thanks!

[eabigelow]

That is, I imported js/jquery.easing.1.2.js into the main page...

[eabigelow]

Hi--

I may have been a bit unclear with the above comments (tried to cut and paste the script code into the message, and it was left out).

Anyway, I put "easeInOutCubic" in the "easing" category of anythingslider.js, and I then imported js/jquery.easing.1.2.js into the header of the main page. Was this correct?

Again, many thanks!

[Mottie]

Yes that is right; but from looking again at your page I can't see where you added it. It should be included along with the resizeContents option in the "exteriorcaption.js" file as follows:

// JavaScript Document

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

$('#slider').anythingSlider({

    easing: "easeInOutCubic",

    resizeContents : false,

    // *********** 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); }

});
});//]]>

Then remove this from the main page - I'm surprised it isn't causing any errors:

   <script>(function($) {

    $.anythingSlider = function(el, options) {
        var base = this, o;
                       $.anythingSlider.defaults = {
        resizeContents      : false,}
        base.init();
        }});  </script>

[eabigelow]

Hi. Mottie--

Thanks for the feedback. I have changed the "exteriorcaption.js" file as you suggested, and removed script from the main page.

Unfortunately, the action is still jerky. I tried changing the speeds, and although that had some effect, the jerkiness remains.

I wish there was a way to fix this... Do you have any other suggestions? Would it help for me to make my files available to you? Also, since this might take some time, would you be willing to accept a donation for your time on this?

[eabigelow]

Oops! Here is a link to the most recent page: http://webyarns.com/sound/sound.html

[Mottie]

Hmm, after copying the code locally, it still seems like it's still a bit jumpy. I think it might be the affect of the video inside of the slider. I'm not really sure what to do about that.

[eabigelow]

Hi, Mottie. If it were the video, wouldn't it effect performance in the resizeContents : true,} mode, as well?

[Mottie]

Ok, so it wasn't jerky at all when all of the slides were the same size right?

I think it might just be the extra animation that resizes the outer wrapper because the first slide is bigger, but all of the remaining slides are the same size. So, I'll look into disabling the outer wrapper animation if it animates between two slides of the same size and see if that fixes the problem. But I won't be able to do it until a bit later, as I once again have a very busy day =/