Beste SD'ers,

Ik loop op dit moment vast met een horizontal slider. Ik wil het volgende:

Ik heb een frame (600*400px) daarin wil ik dat div(2) de volle breedte behoudt. Klik ik op de "next" button, dan wil ik dat deze div(2) horizontaal verdwijnt en div(3) eraan klevend naar binnen slide.

Ik krijg het gewoon niet voor elkaar,
Weet iemand hoe ik dit op moet lossen?

met vriendelijke groet,
Tom Giesbergen

Frames gebruiken is niet nodig.

Een mogelijke opzet is als volgt:
Je maakt een division met een vaste breedte en hoogte (dus 600*400px), de overflow van deze division zet je op hidden en de padding op nul.
Binnen die divisions plaats je de afbeeldingen die allemaal 600*400px zijn. De floating van de divisions zet je op left.
Tot slot varieer je de padding-left van de division waar de afbeeldingen in staan met jquery.

Ik bedoelde als frame een div frame, dus een div waarin de overige divs moeten komen.
Zie bijlagen als vb.

Het is dus de bedoeling als ik op de next button klik,dat div 1 --> naar rechts beweegt en div2 hetzelfde (eraan vast klevend) en als ik op de previous button klik, het omgekeerde

Ik wil het volgende ongeveer creëren: http://livedemo00.template-help.com/drupal_37082/

Origineel gepost door Tom giesbergen

Ik bedoelde als frame een div frame, dus een div waarin de overige divs moeten komen.
Zie bijlagen als vb.

Het is dus de bedoeling als ik op de next button klik,dat div 1 --> naar rechts beweegt en div2 hetzelfde (eraan vast klevend) en als ik op de previous button klik, het omgekeerde

Dat is toch precies wat ik omschreef (enige verschil is dat je in plaats van afbeeldingen nu divisions in de hoofddivision plaatst)?
Wat heb je nu als code?

<script type="text/javascript">
var tijd = 500;
var totaal = 3
var active = 1;

$(".itemforward").mouseenter(
function () {
$("#slideitem" + (totaal - active)).css("float", "left");
$("#slideitem" + active).css("float", "right");
$("#slideitem" + active).animate({
marginLeft: 600,
width: 0
}, tijd);
$("#slideitem" + (active + 1)).animate({
width: 600,
height: 396
}, tijd);
active = active + 1;
}
);
$(".itemback").mouseenter(
function () {
$("#slideitem" + (totaal - active)).css("float", "left");
$("#slideitem" + active).css("float", "right");
$("#slideitem" + active).animate({
marginRight: 596,
width: 0
}, tijd);
$("#slideitem" + (active - 1)).animate({
width: 596,
marginLeft: 0,
height: 396
}, tijd);
$(".hom_content_top_right_top_item_active").css("w idth", "70");
active = active - 1;
}
);

Mijn code, ik snapte alleen niet precies wat u bedoelde

Origineel gepost door Tom giesbergen

Mijn code, ik snapte alleen niet precies wat u bedoelde

Dit is de module die ze in je voorbeeld gebruiken: http://lunarclips.com/cycle-demo
Bij downloads kan je de cycle plugin downloaden, kan je die dan niet gewoon als basis gebruiken?

En wat gaat er nu mis met je code, heb je een live voorbeeld dat gaat wat makkelijker