rotoGoto breaks the next and prev buttons

[jorgeacurcio]

Hi again, while experimenting width you awesome plug-in, I've found something strange that I can't solve myself.

My situation is this:

I want that on resize the slider jumps to the first slide. I was doing that width:

$(window).resize(function (){ $("#slider_normal").trigger("rotoGoto",0); $("#slider_normal").trigger("rotoContentChange"); });

That works just fine, but then I tried to implement a infobox with the current slider and the ability to navigate the slider with buttons.

If I don't resize the browser everything works just fine, but when I resize, the next and previous buttons stop working and the current slider no longer updates.

The problem seems to be in the 'rotoGoto' trigger, because if I don't trigger it, the content works normally.

Do you have any suggestions, or any possible cause for this? Maybe there's another way to achieve what I want..

[rdallasgray]

Hi Jorge,

I've tried all the steps I can to reproduce this, but I can't seem to. Can you reproduce it on the demo page (you can use FireBug to trigger events on the roto containers)?

Thanks,

Robert

[jorgeacurcio]

Hello, I cant upload the exact example but i've recreated the problem width this piece of code. I've used the first slider in test page included in the download file with the following code:

    $("#carousel").roto({ snap: true });
    $(".roto").css("visibility", "visible");

$("#carousel span img").css({width:'100%',height:'100%'});
var total_itens = $("#carousel li").size();

$("#carousel").bind("rotoChange", function (event, listitem) {
    var actual = ($(listitem).index() + 1)
    $("#count").html(actual + "/" + total_itens);
});

$(window).resize(function () {

    var _height = $(window).height() - 300;

    $("#carousel span").height(_height);
    $("#carousel>div").height(_height);
    $("#carousel span").width(_height);

    var padding = ($(window).width() - _height) * .5;
    $("#carousel span").css({ 'padding-left': padding, 'padding-right': padding })

    $("#carousel").trigger("rotoContentChange").trigger("rotoGoto",0)
});

Everything works fine until the window is resized.

This is want I to do width the slider, centre the images on the screen and adjust the height to window size. I thought it could be from the padding, but even if i remove it the problem persists.

Obs: I've commented the resize listener in the plugin js, so there is only one listener active.

Thanks in advance for the attention

Jorge Acúrcio

[rdallasgray]

Hi Jorge,

OK, I'm not totally sure I understand the code, but I can sort of get it working by reducing the padding. The amount of padding you're giving the elements there seems to make them larger than the window itself, which throws everything into confusion.

But I have to admit I'm not completely sure what you're trying to accomplish ...

[christopherdebeer]

@jorgeacurcio could you put an example on http://jsfiddle.net I wouldn't mind lending a hand as well, if I'm able.

[jorgeacurcio]

I've set up an example in jsfiddle. http://jsfiddle.net/jaE9d/

I want to resize the images according to the window size, so they always fit the middle space of my page. And in this section I also want to display only one image per screen. That's why I use the padding, to centre each image.

I'll comment the code a bit, so I can explain myself better.