Hallo und Moin,
ich bin gerade dabei, mich in jquery einzuarbeiten und versuche, eine scrollbare Gallery zu erstellen.
Dabei sollen alle Bilder geladen aber nur einige angezeigt werden. Das Verstecken mache ich über display:none.
Wenn ich scrolle, werden die Bilder über display:inline und eine animation eingeblendet und verschoben:
function zeileeinblenden(zeile,range,vorzeichen){
for(var qq = 0; qq <=range[2]; qq++){
$('.imageframe:eq(' + zeile[qq] + ')').css('display','inline');
$('.imageframe:eq(' + zeile[qq] + ')').animate({
height: '160px',
top: vorzeichen + range[3],
opacity: '1'
}, 700);
}
}
Andere Bilder sollen hingegen ausgeblendet werden, wobei der style display:none wieder eingestellt werden soll. Dies deshalb, damit im Hauptfenster kein scrollbalken auftaucht, wenn zu viele Bilder - wenn auch nicht sichtbar - auf der Seite erscheinen.
Dies versuche ich so:
function zeileausblenden(zeile,range,vorzeichen){
for(var qq = 0; qq <=range[2]; qq++){
$('.imageframe:eq(' + zeile[qq] + ')').animate({
opacity: '0',
top: vorzeichen + range[3],
}, 700,function() {
$('.imageframe:eq(' + zeile[qq] + ')').css('display','none');
});
}
}
Eigentlich funktioniert soweit alles, bis auf dieses display:none. Wenn ich mir das im Ergebnis nach dem scrollen im Firebug ansehe, werden die Bilder zwar unsichtbar aber der Style 'display' bleibt auf 'inline'.
Was läuft da falsch?
Ein Beispiel liegt unter http://www.rabe-photo.de/csstest
Viele Grüße
Ralph
ich bin gerade dabei, mich in jquery einzuarbeiten und versuche, eine scrollbare Gallery zu erstellen.
Dabei sollen alle Bilder geladen aber nur einige angezeigt werden. Das Verstecken mache ich über display:none.
Wenn ich scrolle, werden die Bilder über display:inline und eine animation eingeblendet und verschoben:
function zeileeinblenden(zeile,range,vorzeichen){
for(var qq = 0; qq <=range[2]; qq++){
$('.imageframe:eq(' + zeile[qq] + ')').css('display','inline');
$('.imageframe:eq(' + zeile[qq] + ')').animate({
height: '160px',
top: vorzeichen + range[3],
opacity: '1'
}, 700);
}
}
Andere Bilder sollen hingegen ausgeblendet werden, wobei der style display:none wieder eingestellt werden soll. Dies deshalb, damit im Hauptfenster kein scrollbalken auftaucht, wenn zu viele Bilder - wenn auch nicht sichtbar - auf der Seite erscheinen.
Dies versuche ich so:
function zeileausblenden(zeile,range,vorzeichen){
for(var qq = 0; qq <=range[2]; qq++){
$('.imageframe:eq(' + zeile[qq] + ')').animate({
opacity: '0',
top: vorzeichen + range[3],
}, 700,function() {
$('.imageframe:eq(' + zeile[qq] + ')').css('display','none');
});
}
}
Eigentlich funktioniert soweit alles, bis auf dieses display:none. Wenn ich mir das im Ergebnis nach dem scrollen im Firebug ansehe, werden die Bilder zwar unsichtbar aber der Style 'display' bleibt auf 'inline'.
Was läuft da falsch?
Ein Beispiel liegt unter http://www.rabe-photo.de/csstest
Viele Grüße
Ralph