Startseite
  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche
Startseite › Forum › Drupalcenter.de › Module ›

Einen Flash-ähnlichen teaser mit jquery?

Eingetragen von morgenstern@dru... (88)
am 19.07.2007 - 08:50 Uhr in
  • Module
  • Drupal 5.x

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

‹ Projekt: Deutsche E-Commerce Übersetzung Wysiwyg-Editoren ›
  • Anmelden oder Registrieren um Kommentare zu schreiben

Die Alternative 1 klingt

Eingetragen von pebosi (2645)
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

gruß pebosi
--
https://pebosi.net

  • Anmelden oder Registrieren um Kommentare zu schreiben

Alternative 1 - Lösung

Eingetragen von morgenstern@dru... (88)
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

  • Anmelden oder Registrieren um Kommentare zu schreiben

Benutzeranmeldung

  • Registrieren
  • Neues Passwort anfordern

Aktive Forenthemen

  • Content Ex-/Import
  • Wer ist online Block
  • Doppelte Anzeige von Node im View
  • URL-Alias von bestehendem Link wird gelöscht und auf -0 gesetzt 404 Fehler entsteht
  • Ausblenden von Taxonomy wenn diese keinen Inhalt haben
  • Image als Anhang
  • [gelöst] Benutzer erstellen ohne Berechtigung zum ändern von E-Mail oder Passwort
  • HTTP ERROR 500, wenn der Node eines bestimmten Typs gespeichert wird oder ein neuer Inhalt dieses Typs erzeugt werden soll
  • Module modifizieren zb Statuses
  • Exposed Filter einer View in seperatem Block darstellen, wie kann ich die exposed Filter der zug. View deaktivieren
  • Website ohne öffentlichen Zugriff
  • »Geschwister« Nodes anzeigen
Weiter

Neue Kommentare

  • Ohne Fehlermeldungen zu
    vor 5 Stunden 15 Minuten
  • dinmikkith schrieb Ja du hast
    vor 2 Tagen 20 Stunden
  • SaarlandToday schrieb Es gibt
    vor 3 Tagen 3 Stunden
  • ich hab das Problem gefunden!
    vor 3 Tagen 4 Stunden
  • Sorry, das mit dem Theme war
    vor 3 Tagen 5 Stunden
  • Zitat: Es gibt in den
    vor 3 Tagen 5 Stunden
  • Es gibt in dem Template das
    vor 3 Tagen 15 Stunden
  • Zitat: da es dort eine
    vor 3 Tagen 16 Stunden
  • Sorry, dachte das ich das
    vor 3 Tagen 19 Stunden
  • Ich habe den Fehler gemacht
    vor 3 Tagen 20 Stunden

Statistik

Beiträge im Forum: 245940
Registrierte User: 18824

Neue User:

  • Damian1802
  • MrWebMV
  • kiba

» Alle User anzeigen

User nach Punkten sortiert:
wla9007
stBorchert6003
quiptime4972
Tobias Bähr4019
bv3916
ronald3829
md3717
Thoor3678
Alexander Langer3416
Exterior2903
» User nach Punkten
Zur Zeit sind 0 User und 5 Gäste online.

Hauptmenü

  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche

Quicklinks I

  • Infos
  • Drupal Showcase
  • Installation
  • Update
  • Forum
  • Team
  • Verhaltensregeln

Quicklinks II

  • Drupal Jobs
  • FAQ
  • Drupal-Kochbuch
  • Best Practice - Drupal Sites - Guidelines
  • Drupal How To's

Quicklinks III

  • Tipps & Tricks
  • Drupal Theme System
  • Theme Handbuch
  • Leitfaden zur Entwicklung von Modulen

RSS & Twitter

  • Drupal Planet deutsch
  • RSS Feed News
  • RSS Feed Planet
  • Twitter Drupalcenter
Drupalcenter Team | Impressum & Datenschutz | Kontakt
Angetrieben von Drupal | Drupal is a registered trademark of Dries Buytaert.
Drupal Initiative - Drupal Association