Jquery Bildwechsler für Netobjects Fusion

JQuery ist in aller Munde. Schöne und zeitgemäße Anwendungen in unendlicher Fülle. Klar, dass der NOF-User das auch haben möchte. Leider lässt sich vieles gar nicht oder nur schwer in NOF einbauen. Hier aber ein Bildwechsler mit echtem Text (Google zur Freude) der mit etwas Mut auch in NOF nutzbar ist.

Wichtig: leider spukt die rollover.js von NOF in die Anwendung. Daher kann das Script nur genutzt werden, wenn keine Javascript-Navi genutzt wird und auch das Rollover der Navi ausgeschaltet ist. (so wie ich es hier auch machen musste)

Vorbereitung in NOF: benötigte Dateien

Wir benötigen drei Dateien (hier), die wir als Asset einfügen (siehe hier). NOF packt die js-Dateien normalerweise in den Asset-Ordner und die CSS-Datei in den HTML-Ordner - ich habe die Pfade unten bereits angepasst. Anschließend werden diese Dateien im Head benannt.  Wir drücken f10, wenn der Wechsler auf allen Seiten genutzt werden soll - im Eigenschaftenfenster klicken wir auf den HTML-Button - es öffnet sich ein Fenster - wir klicken auf zwischen den Headtags und tragen ein

•   <script type="text/javascript" src="../assets/mootools.js"></script>
    <script type="text/javascript" src="../assets/slideshow.js"></script>
    <link rel="stylesheet" href="../html/slideshow.css" type="text/css">

Achtung: Soll der Wechsler auch auf der Startseite laufen, muss ein neuer Masterborder eingerichtet werden (dann dort die Pfade jeweils ohne ../am Anfang aller drei Pfade). Alternativ kann auch der absolute Pfad genutzt werden - also http:www.domain.de/assets....

Folgende Einfügung kommt in NOF an die gewünschte Stelle via HTML-Einfügung

• <div id="main_wrapper" align="center"> 
  <div id="slideshow"></div>
• <script type="text/javascript">
    window.RokSlideshowPath = '';
    window.addEvent('load', function(){
      var imgs = [];
  
           imgs.push({
        file: '../assets/images/bildname.jpg',
        title: 'Ich bin die erste Überschrift',
        desc: 'Ich bin der Text',
        url: 'http://www.ich-bin-der-link.de'
              });
  
           imgs.push({
        file: '../assets/images/galerie3.jpg',
        title: 'Überschrift 2',
        desc: 'Text 2',
        url: 'http://www.fusion-content.de'
              });       
  
      var myshow = new Slideshow('slideshow', {
       type: 'fade',
       showTitleCaption: 1,
       captionHeight: 60, <!-- höhe der teiltransparenten box in px-->
       width: 500, <!-- breite der bilder in px -->
       height: 210, <!-- höhe der bilder in px -->
       pan: 50,
       zoom: 50,
       loadingDiv: 0,
       resize: false,
       duration: [2000, 10000], <!-- zeit der ansicht UND fadingzeit -->
       transition: Fx.Transitions.linear,
       images: imgs,
       path: ''
      });   
  
      myshow.caps.h2.setStyles({
       color: 'green',     fontSize: '20px' <!-- zusätzlich textfarbe und größe der überschrift -->
      });
•     myshow.caps.p.setStyles({
       color: '#000',     fontSize: '12px' <!-- zusätzlich textfarbe und größe des text -->
      });   });
     </script></div>

Die nötigen Anpassungen:

In dem Scriptschnipsel sind alle notwendigen Anpassungen markiert (Bilder, Überschrift, Text) und alle Werte mit Kommentar versehen. Hier müssen eigene Werte eingetragen werden.

Ich gönne mir jetzt mal den Luxus, nicht alle Änderungen Stück für Stück zu erklären. Lest einfach mal aufmerksam und denkt scharf nach.

Auch in der slideshow.css müssen 2 Werte geändert werden.

Wer die Dateien als Asset eingefügt hat, kann nun in der Verwaltung die slideshow.css anklicken und die Datei dann mit der rechten Maustaste im Editor öffnen.

hier finden sich folgende Zeilen:

• #main_wrapper{
  margin:auto;
  width:635px;
  min-height:240px
  }

 Auch hier werden die Werte für width und min-heigth den tatsächlichen Werten des Bildes angepasst.

Das wars - viel Spaß damit