Gästebuch   Impressum

 

>> Startseite    >> Scripting    >> jquery: Bildwechsler  
 

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

 


Dieses Tutorial

Version: alle versionen
Download: klick
Schwierigkeitsgrad: kniffelig

Neue Tutorials

Suchfunktion einbauen
MLR kopieren
SuMa-Optimierung
Alle Filme wieder online
Weicher Bildwechsler mit Text
Die 2-Minuten-Newsbox
Das erste eigene Buttonset
Datepicker für Formulare
Includieren in NOF
Bildkomprimierung
Publizierungseinstellungen
Assetverwaltung

Content Management für Netobjects Fusion

Inhalte und Bilder ohne NOF aktualisieren
Fusion Content 3

Shop für Netobjects Fusion

Der kleine nahtlose Shop für eure NOF-Projekte
dank php und einer Datenbank ist eure NOF-Datei schlank und alle Daten bleiben bei eventuellen Crashes oder Layoutumstellungen unberührt
NOF-Shop 1.1

Haste mal nen Euro?

Die NOF-Tips sind werbefrei
Wenn die Tutorials geholfen haben, freuen wir uns auf deine kleine Spende via PayPal an paby@paby.de

Online-Support

Werktags: 9.00 - 14.00h
0160 37 87 652
WE oder Abends nach Absprache möglich
Schnelle Hilfe via Online-Tool 1,00 euro/min

Schulungen & Seminare

Online-Schulungen ab 35,00 Euro/Std.

Friendship (suma-hilfe)

Burlesque Korsetts und mehr
Triumed
Lebensfreude-konzept
Sportfotos
Fliegenruten
 

-
Fatal error: Uncaught Error: Call to undefined function ereg_replace() in /kunden/290678_86558/rp-hosting/1/1/web/nof-tips/jquery-netobjects-fusion/jquery_bildwechsler_in_netobje.php:304 Stack trace: #0 {main} thrown in /kunden/290678_86558/rp-hosting/1/1/web/nof-tips/jquery-netobjects-fusion/jquery_bildwechsler_in_netobje.php on line 304