jQuery Bilderstapel Galerie in NetObjects Fusion einbinden Version 2

[nettesekel]

***Quelle***

Wer Interesse an einer solchen Bild-Galerie hat, findet im folgenden Tutorial Hilfe bei der Integration dieser Galerie in sein NOF-Projekt.

Der Unterschied zwischen Version 1 und Version 2 besteht darin, dass in Version 2 die Bilder mittels CSS gedreht und gerahmt werden, während in Version 1 hierfür ein Grafikprogramm bemüht werden muss.

Viel Spaß beim mit- und nachmachen! 

[nettesekel]

Ladet euch die benötigten Dateien unter folgendem Link herunter
http://demos.nof-community.de/Stack2/Galerie.zip
und platziert die zwei enthalten Ordner "css" und "js" samt ihrem Inhalt im Rootverzeichnis eures Webservers, also dort, wo auch die index.html zu sehen ist. 

------------------------------------------------------------------------------------------
Achtung! Diese Dateien sind nicht identisch mit denen aus Version 1!
------------------------------------------------------------------------------------------

(Hierzu benötigt ihr ein FTP-Programm wie z.B. FileZilla. Den Umgang mit diesem Programm hat Dada in einem seiner Tutorials anschaulich erläutert. )

Wenn ihr die Galerie auch bei lokaler Publizierung testen möchtet, dann kopiert die zwei Ordner ebenfalls in den Ordner "lokale Publizierung" eures Projekts.

[nettesekel]

Öffnet die Seite eures Projekts auf welcher ihr die Galerie einbinden möchtet und fügt den folgenden Code zwischen den head-Tag der Seite ein. Wer nicht weiß wie das geht, findet hier eine Beschreibung dazu.
Der Code für die Startseite unterscheidet sich minimal von dem Code für die Unterseiten. (ausgehend von Publizierung nach Assettyp)
Wählt den entsprechenden Code für eure Einfügung aus.


------------------------------------------------------------------------------------------------------
Code für die Startseite
------------------------------------------------------------------------------------------------------

Code: HTML5

1. <link rel="stylesheet" type="text/css" media="screen" href="css/galerie.css" />
2. <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
3. <script type="text/javascript" src="js/galerie.js"></script>

------------------------------------------------------------------------------------------------------
Code für Unterseiten
------------------------------------------------------------------------------------------------------

Code: HTML5

1. <link rel="stylesheet" type="text/css" media="screen" href="../css/galerie.css" />
2. <script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
3. <script type="text/javascript" src="../js/galerie.js"></script>

[nettesekel]

Als nächstes bereitet ihr die Bilder für eure Galerie vor. Für diese Version der Galerie reicht es jedoch, wenn ihr die Bilder auf ein einheitliches Maß bringt.

Die im Beispielprojekt verwendeten Bilder sehen im Rohzustand ohne CSS so aus:






Danach bindet ihr die Bilder in euer Projekt ein. Dafür gibt es zwei mögliche Vorgehensweisen.
Entweder ihr kopiert die Bilder von Hand (also wieder m.H. des FTP-Programms) in den Ordner assets >> images.

(für die lokale Funktion auch in den entsprechenden Ordner eurer lokalen Publizierung)

Oder aber ihr bindet die Bilder als zusätzliche Assets in euer Projekt ein, dann werden sie NOF automatisch mit publiziert und ihr müsst euch um nichts weiter kümmern. Wie das Einbinden zusätzlicher Assets funktioniert, könnt ihr hier nachlesen: www.nof-community.de/index.php/topic,11.0.html

[nettesekel]

Nun öffnet ihr die Seite, in welche die Galerie eingebunden werden soll, fügt an der Stelle an welcher der Bilderstapel erscheinen soll ein Textfeld ein und fügt ins html dieses Textfeldes den folgenden Code ein.
Wie das geht, ist hier beschrieben: www.nof-community.de/index.php/topic,47.0.html
Wählt auch hier wieder aus ob ihr den Code für die Startseite oder für eine Unterseite benötigt.


------------------------------------------------------------------------------------------------------
Code für die Startseite
------------------------------------------------------------------------------------------------------

Code: HTML5

1.      
2. <div>
3.   <div class="grid_2" id="gallery">
4.     <div id="pictures">
5.       <img src="./assets/images/1.jpg" alt="" class="rotation_1"/>
6.       <img src="./assets/images/2.jpg" alt="" class="rotation_2"/>
7.       <img src="./assets/images/3.jpg" alt="" class="rotation_3"/>
8.       <img src="./assets/images/4.jpg" alt="" class="rotation_4"/>
9.       <img src="./assets/images/5.jpg" alt="" class="rotation_5"/>
10.       <img src="./assets/images/6.jpg" alt="" class="rotation_6"/>
11.       <img src="./assets/images/7.jpg" alt="" class="rotation_1"/>
12.     </div>
13.   <div class="grid_1 alpha" id="prev">
14.       <a href="#previous" class="GalleryLink">« Previous Picture</a>
15.   </div>
16.   <div class="grid_1 omega" id="next">
17.       <a href="#next" class="GalleryLink">Next Picture »</a>
18.   </div>
19.   </div>
20. </div>
21.  

------------------------------------------------------------------------------------------------------
Code für die Unterseiten
------------------------------------------------------------------------------------------------------

Code: HTML5

1.      
2. <div>
3.   <div class="grid_2" id="gallery">
4.     <div id="pictures">
5.       <img src="../assets/images/1.jpg" alt="" class="rotation_1"/>
6.       <img src="../assets/images/2.jpg" alt="" class="rotation_2"/>
7.       <img src="../assets/images/3.jpg" alt="" class="rotation_3"/>
8.       <img src="../assets/images/4.jpg" alt="" class="rotation_4"/>
9.       <img src="../assets/images/5.jpg" alt="" class="rotation_5"/>
10.       <img src="../assets/images/6.jpg" alt="" class="rotation_6"/>
11.       <img src="../assets/images/7.jpg" alt="" class="rotation_1"/>
12.     </div>
13.   <div class="grid_1 alpha" id="prev">
14.       <a href="#previous" class="GalleryLink">« Previous Picture</a>
15.   </div>
16.   <div class="grid_1 omega" id="next">
17.       <a href="#next" class="GalleryLink">Next Picture »</a>
18.   </div>
19.   </div>
20. </div>
21.  

In diesem Code müsst ihr eigentlich nur die Namen eurer Bild-Dateien anpassen. Wollt ihr mehr oder weniger Bilder in eurer Galerie anzeigen lassen, dann müsst ihr den Code entsprechend kürzen oder erweitern.

Also entweder eine dieser Zeilen:
     

Code: HTML5

1. <img src="./assets/images/7.png" alt="" class="rotation_1"/>

entfernen oder hinzufügen.

Im Gegensatz zur Variante 1 werden in dieser Galerie die Bilder per CSS formatiert. Das heißt der weiße Rand, die Schattierung und auch die Drehung der Bilder kommen aus der CSS-Datei. Da die Bilder nicht alle im selben Radius gedreht werden sollen, benötigt man mehrere CSS-Klassen mit verschiedenen Rotationen. Ich habe 6 Klassen angelegt die sich nacheinander zugewiesen habe.

Code: HTML5

1. class="rotation_1"
2. class="rotation_2"
3. class="rotation_3"
4. class="rotation_4"
5. class="rotation_5"
6. class="rotation_6"

Bei Bild 7 habe ich wieder die erste Klasse verwendet, gäbe es ein achtes Bild würde ich diesem wieder die zweite Klasse zuweisen. Berücksichtigt das bitte  falls ihr eure Galerie um zusätzliche Bilder erweitert.

[nettesekel]

Nötige Anpassungen im CSS...
Wenn ihr die galerie.css im Editor öffnet, dann findet ihr ganz zu Beginn der CSS-Datei folgende zwei Klassen, die wie folgt anzupassen sind.

width = ½ Bildbreite

Code: HTML5

1. .grid_1{width:225px;display:inline;float:left;margin-left:10px;margin-right:10px;}

width = Bildbreite

Code: HTML5

1. .grid_2{width:450px;display:inline;float:left;margin-left:10px;margin-right:10px;}

Das wars eigentlich auch schon... nun sollte eure Bilderstapel-Galerie funktionieren.

Gutes Gelingen!