Patrick Fiedorowicz |  05.07.2011 | jQuery
jQuery: das umfangreichste und am meisten verbreiteste Javascript-Framework

Flash ist Out, jQuery ist In! Die Anzeige am Bildschirm zu manipulieren geht seit der Einführung von Javascript-Frameworks wie jQuery, Prototype oder Mootools so einfach wie nie zuvor, und das ohne umständliche Flash-Programmierungen benutzen zu müssen. Hier möchte ich eine Möglichkeit darbieten, wie man recht einfach Bilder anzeigen lassen und eine dazugehörige Bildunterschrift nur bei Bedarf, in meinem Fall beim Überfahren (sog. Hover-Effekt) eines Div-Containers mit der Maus, animiert darstellen kann.

1. HTML

Zu erst erstelle ich einen äußeren Container mit der Klasse "outer", welche ich später mit jQuery greifen kann. In diesen packe ich das Bild wie gewohnt und unterhalb die gewünschte Bildunterschrift wieder in einem eigenen Container "caption". Ich habe mich dabei für eine Überschrift und einen Absatz für längeren Text entschieden.

<div class="outer">
  <img src="image.jpg" alt="Mein Testbild" />
  <div class="caption">
    <h1>Wow, was fuer ein Bild!</h1>
    <p>Lorem Ipsum, das ist meine ausfuehrliche Bildbeschreibung...</p>
  </div>
</div>

2. CSS

Nun passe ich mit CSS die Darstellung des HTML-Codes an. Dem äußeren Div verpasse ich zur Vereinfachung eine fixe Breite und Höhe. Der innere Rahmen für die Bildunterschrift wird absolut zum Elternelement positioniert, daher ist wichtig, dass die Eigenschaft "overflow:hidden" beim Außen-Div verwendet wird, da sonst die Bildunterschrift unterhalb von der gewünschten Position unschön dargestellt wird.

/* CSS für den Aussen-Div */
div.outer {
  position: relative;
  /* WICHTIG: damit wird der caption-div versteckt */
  overflow: hidden;
  width: 400px;
  height: 400px; 
}
/* CSS fuer den Div mit der Bildunterschrift 
 * der Div wird absolut positioniert und 220px unterhalb vom Aussen-Div gesetzt */
div.caption {
  position: absolute;
  bottom: -220px;
  width: 400px;
  height: 200px;
  background: white;
  /* Hintergrund-Deckkraft 80% */
  opacity: 0.8;
  padding: 5px;
  margin: 0;
}

3. Javascript jQuery

Abschließend manipuliere ich nun mit Hilfe des Javascript-Frameworks jQuery die Anzeige meiner Bildunterschrift. Das Ergebnis soll sein, dass sobald die Maus über den Außen-Div fährt, die Bildunterschrift nach oben rutscht, und beim Verlassen wieder verschwindet.

Als Anmerkung: Das folgende jQuery-Snippet ist für den jQuery-NoConflict-Mode ausgelegt, falls jQuery zusammen mit Mootools oder Prototype auf der gleichen Seite verwendet werden würde. Außerdem muss die jQuery-Hauptdatei bereits eingebunden sein, z. B. mit Hilfe der Extension t3jquery oder eben manuell.

/* Wenn das Dokument fertig ist */
jQuery(document).ready(function($){
  // den Aussen-Div fassen; Funktion aufrufen, wenn mit der Maus ueber den Div gefahren wird
  $('div.outer').hover(function(){
    // das Kinderelement vom Aussen-Div fassen
    $(this).children('div.caption')
    // alte Animationen abbrechen
    .stop(false,true)
    // neue Animation (hochschieben, 200ms lang mit dem Effekt "easeOutQuart"
    .animate({bottom:0},{duration:200, easing: 'easeOutQuart'});
  },
  function(){
    // das gleiche nochmal, wenn man mit der Maus den Aussen-Div verlaesst
    $(this).children('div.caption').stop(false,true).animate({bottom:-220},{duration:200, easing: 'easeOutQuart'});
  });
});

Die easing-Effekte können natürlich angepasst oder auch ganz weggelassen werden, mehr dazu kann man der jQuery-API entnehmen.

Wer viele Bilder auf einer Seite hat, könnte auch überlegen, das ganze Javascript anders aufzurufen. Dadurch wird das jQuery-Konstrukt erst verfügbar, wenn auch alle Bilder fertig geladen sind:

jQuery(window).load(function($){
...
}

4. Demo

Damit man sich das Ergebnis auch mal anschauen kann, habe ich natürlich dazu auch noch die passende Demo. Auf meiner Portfolio-Seite kann man sehen, wie die Bildunterschrift beim Überfahren mit der Maus "nach oben slided" und beim Verlassen wieder verschwindet. Zusätzlich habe ich noch einen 2. Div mit dem Titel erstellt, welcher bei Bedarf "nach unten slidet".

  1. Jan Jan 06.08.2013
    Geschätzter Patrick
    Danke für dieses Snippet. Genau das hatte ich gesucht. Leider aktiviert es bei mir das jQuery nicht. Folgendes habe ich in meiner TYPO3 Installation gemacht.
    - HTML Code als HTML Element auf der Seite eingebunden;
    - CSS eingebunden;
    - jQuery Snippet als JS Datei gespeichert;
    - im TS-Setup jQuery Datei geholt (includeJS {
    file1 = fileadmin/tmpl/js/caption.js })
    Das t3jquery ist bereits als Extension installiert. Was du mit der jQuery-Hauptdatei meinst, verstehe ich jetzt nicht ganz?
    Für jede Hilfe danke ich bestens.
    Gruss Jan
    1. Patrick Fiedorowicz Patrick Fiedorowicz 06.08.2013
      Hi Jan,

      mit der jQuery-Hauptdatei meinte ich die jquery.min.js oder wie sie bei dir heißt, also eben jQuery selbst...

      Achte auch auf die Reihenfolge der JS-Scripte, also erst jQuery selbst, dann dein Snippet einbinden.

      Bekommst du im Firebug (Firefox) oder Developer Tools (Chrome) irgendwelche Fehler ausgespuckt?
      Ansonsten kann ich auch gerne mal ein Auge auf deine Arbeit werfen...

      Schöne Grüße
      Patrick
  2. Patrick Fiedorowicz Patrick Fiedorowicz 06.08.2013
    Hallo Thomas,

    interessantes Vorhaben. Kannst du mir deinen kompletten Code zeigen?
    Vielleicht habe ich eine Idee ;)

    Schöne Grüße
    Patrick
  3. Jan Jan 06.08.2013
    Hallo Patrick
    Danke für deine schnelle Hilfe.
    Die jquery.min.js ist als
    includeJS {
    file1 = fileadmin/tmpl/js/jquery.min.js
    file2 = fileadmin/tmpl/js/caption.js
    }
    eingebunden.
    Im Firebug aktiviert es das file2 nicht.
    Hast du sonst noch einen Tipp?
    Super Leistung hier. Danke.
    Gruss Jan
    1. Patrick Fiedorowicz Patrick Fiedorowicz 06.08.2013
      Hi Jan,

      wenn du die jquery.min.js manuell mit Typoscript einbindest, hast du dann t3jquery deaktiviert?

      Schau mal in den TypoScript-Object-Browser rein, vlt. klappt die Einbindung via TS ja schon nicht?!

      Ach, und du hast aber schon page.includeJS geschrieben oder? ;)

      Schöne Grüße
      Patrick
    2. Jan Jan 06.08.2013
      Hallo Patrick
      Ja, die jquery.min.js war drin ohne im t3jquery zu deaktivieren. Habe diese wieder manuell raus genommen. Im TypoScript-Object-Browser zeigt es alles an. Ja, page.includeJS ist geschrieben. Das page war noch oben angehängt.
      Leider alles ohne Erfolg.
      Ich befürchte fast es liegt am t3jquery. Wie soll ich bezüglich dem Snippet damit am besten umgehen?
      Vielleicht siehst du mit dem Link was im Firebug. Es ist das letzte Bild unten (Hundebiss).
      http://frontlinefocus.ch/cms/projekte.html
      Gruss Jan
    3. Patrick Fiedorowicz Patrick Fiedorowicz 06.08.2013
      Hi Jan,

      kann es sein, dass du file2 nochmal weiter unten in deinem Typoscript überschreibst?
      Verwende mal einen anderen Namen, den kannst du beliebig wählen, muss nicht mit file anfangen.

      Übrigens ist mir bei deiner Seite aufgefallen, dass du 3x jQuery, 1x Prototype und 1x Scriptaculous einbindest (=> 3 verschiedene Javascript-Frameworks). Das ergibt am Ende 1,8 MB, die über das Netz geladen werden müssen, pro Seite...

      Schöne Grüße
      Patrick
    4. Jan Jan 07.08.2013
      Hallo Patrick
      In der Tat, 3 verschiedene Javascript-Frameworks. Ich habe mal aufgeräumt:
      - bei den entsprechenden Extensions die mitgelieferte jQuery deaktiviert;
      - Eine aktuelle jQuery-Hauptdatei aktiviert;
      - t3jquery deinstalliert;
      - wo möglich über «JSFooterlibs / JSFooter» eingebunden.
      Gut, alle nötigen Snippets (inkl deiner) werden Angezeigt. Eine jQuery Aktivität ist aber immer noch nicht da.
      Jetzt bin ich langsam ausgeschossen, was ich noch machen kann.
      Auf jeden Fall danke für deine Hilfe.
      Gruss Jan
    5. Patrick Fiedorowicz Patrick Fiedorowicz 07.08.2013
      Hi Jan,

      du hast immer noch 4 JS-Fehler drin. Die solltest du erstmal beheben. Erst jQuery selbst laden, danach die jQuery-Plugins. Schau dir einfach mal deinen Quellcode an, dann siehst du das Chaos ;)
      Ich schätze, dass durch die Fehler alles weitere JS nicht mehr ausgeführt wird.

      Schöne Grüße
      Patrick
    6. Jan Jan 07.08.2013
      Hallo Patrick
      Ja, ich sehe die Fehler. Kann aber nur sagen, dass die Extensions mir hier alles durcheinander bringen. Ich habe keinen Plan wie ich hier aufräumen kann. Wo soll ich den rumdrehen?
      Besten Dank.
      Jan
    7. Patrick Fiedorowicz Patrick Fiedorowicz 08.08.2013
      Hi Jan,

      na jetzt hast du es doch geschafft :) Schaut gut aus!

      Schöne Grüße
      Patrick
    8. Jan Jan 08.08.2013
      Hallo Patrick
      Ja, jetzt funktionierts wie gewünscht. Habe es noch ein wenig angepasst (guckst du).
      Das mit den Scripten ist nicht ganz einfach. Schlussentlich hat das Einbinden über googleapis im Header, die restlichen Sripts im Footer, zum Erfolg geführt (ext t3jquery). Wünsche mir aber noch mehr Ordnung (arbeite daran). Cool wäre, wenn die benötigten Sripts zusammen komprimiert als eine Datei eingebunden werden können.
  4. Jan Jan 08.08.2013
    Habe fast noch vergessen, mich bei dir herzlich zu bedanken. Super Support. Herzlichen Dank.
    1. Patrick Fiedorowicz Patrick Fiedorowicz 08.08.2013
      Bitte bitte Jan, gern geschehen :)
      Schöne Grüße
      Patrick

Neuen Kommentar schreiben

Deine E-Mail-Adresse wird nicht veröffentlich. Bitte gib Sie an, um dein Gravatar-Bild anzuzeigen.

Zurück zu allen News