Einen Flash-ähnlichen teaser mit jquery?
Eingetragen von morgenstern@dru... (88)am 19.07.2007 - 08:50 Uhr in
Hey Leute,
Viele Seiten wie z.B. http://www.heifer.org oder auch die Drupalseite http://www.mtv.co.uk haben so einen - ich nenn es mal - Teaser auf der Startseite in dem verschiedene Bilder mit Texten usw. kurze Einblicke in verschiedene Themenbereiche der Homepage geben.
Das ganze ist meistens schön animiert usw. und ich habe mich gefragt:
Muss es wirklich Flash sein? Könnte sowas nicht auch entweder mit CCK, jquery und einem entsprechenden Block (Alternative 1)oder mit einem neuen Modul (Alternative 2) umgesetzt werden?
(Alternative 1)
- CCK sammelt die Bilder, Texte und Verlinkungen in einem neuen Content-Type ('teaser').
- Ein Block wird in einer (neuen) region z.B. bei der Mission positioniert und zeigt
- via jQuery wechselnd und zufällig ausgewählt die veröffentlichten Inhalte 'teaser' an.
Hier komme ich an der Stelle nicht weiter wo der Inhalt 'weitergeblättert' wird. Muss ich an dieser Stelle den neuen Content via AJAX nachladen oder was wäre hier die beste Lösung?
(Alternative 2)
Könnte das ganze vielleicht einfacher mit einem komplett neuen Modul umgesetzt werden? In Module Development bin ich blutiger Anfänger.
[siehe auch: http://drupal.org/node/160115]
Vielen Dank für eure Hilfe und Ratschläge
Morgenstern
- Anmelden oder Registrieren um Kommentare zu schreiben
Die Alternative 1 klingt
am 19.07.2007 - 09:37 Uhr
Die Alternative 1 klingt doch gut, einen Inhaltstyp mit den Daten und mit den Views einen Block erzeugen der per Zufall einen dieser Typen ausgibt, dann mit Ajax (jquery) den Block neuladen lassen.
gruß pebosi
Alternative 1 - Lösung
am 19.07.2007 - 13:15 Uhr
Habe zu Alternative 1 mittlerweile eine gute Lösung gefunden. Per SQL werden im Block nach Zufall die Daten ausgelesen. Das sieht dann ungefähr so aus:
<?php$query = "SELECT * FROM " .
"{node} WHERE type = 'teaser'" .
"ORDER BY RAND()" .
"";
$queryResult = db_query($query);
?>
Dann werden einfach alle Daten via while schleife in folgender Form ausgegeben:
<div id="scrollup"><div class="teaser"> .... </div>
<div class="teaser"> .... </div>
<div class="teaser"> .... </div>
<div class="teaser"> .... </div>
</div>
und über dieses jQuery Skript (auch im Block enthalten) nacheinander dargestellt:
var teaser_count;
var teaser_interval;
var old_teaser = 0;
var current_teaser = 0;
$(document).ready(function(){
teaser_count = $("div.teaser").size();
$("div.teaser").hide();
$("div.teaser:eq("+current_teaser+")").show();
teaser_interval = setInterval(teaser_rotate,8000);
$('#scrollup').hover(function() {
clearInterval(teaser_interval);
}, function() {
teaser_interval = setInterval(teaser_rotate,8000);
teaser_rotate();
});
});
function teaser_rotate() {
current_teaser = (old_teaser + 1) % teaser_count;
$("div.teaser:eq(" + old_teaser + ")")
.fadeOut(2000);
$("div.teaser:eq(" + current_teaser + ")")
.fadeIn(2000);
old_teaser = current_teaser;
}
Dieser Lösungsansatz orientiert sich an folgendem Tutorial: http://www.learningjquery.com/2006/10/scroll-up-headline-reader
Eventuell könnte man das ganze noch mal mit AJAX etwas aufpeppen, so dass nicht alle Teaser Inhalte sofort geladen werden, aber so läuft es auf jeden Fall erst einmal.
Was mir noch fehlt ist eine extrem benutzerfreundliche Möglichkeit die hochgeladenen Hintergrundbilder für den Teaser zurechtzuschneiden. Ich glaube aber dass ich bei Lullabot (http://www.lullabot.com/articles/image_and_image_exact_sizes_vs_imagefie...) dafür eine Lösung finden werde.
Falls jemand Anmerkungen / Vorschläge zu der AJAX-Sache und dem Zurechtschneiden von Bildern hat, immer her damit :)
Sonnige Grüße
Morgenstern