Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

collapse

* Neuigkeiten der NOF-Community

Die letzten Beiträge

Autor Thema:  jQuery Bilderstapel Galerie in NetObjects Fusion einbinden Version 2  (Gelesen 1423 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 7828
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit

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!  :-D
« Letzte Änderung: 09. Mai 2014, 20:42:56 von nettesekel »
Kannst du so machen, dann isses halt kacke.

Fragen - die inhaltlich ins Forum gehören - sind grundsätzlich im Forum zu stellen und werden auch nur dort beantwortet, damit Alle durch deren Erörterung lernen und von ihr profitieren können. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 7828
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: jQuery Bilderstapel Galerie in NetObjects Fusion einbinden (Version 2)
« Antwort #1 am: 08. Oktober 2013, 12:25:52 »
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.
« Letzte Änderung: 08. Oktober 2013, 12:28:44 von nettesekel »
Kannst du so machen, dann isses halt kacke.

Fragen - die inhaltlich ins Forum gehören - sind grundsätzlich im Forum zu stellen und werden auch nur dort beantwortet, damit Alle durch deren Erörterung lernen und von ihr profitieren können. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 7828
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: jQuery Bilderstapel Galerie in NetObjects Fusion einbinden (Version 2)
« Antwort #2 am: 08. Oktober 2013, 12:27:44 »
Ö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:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.



------------------------------------------------------------------------------------------------------
Code für Unterseiten
------------------------------------------------------------------------------------------------------
Code:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.
Kannst du so machen, dann isses halt kacke.

Fragen - die inhaltlich ins Forum gehören - sind grundsätzlich im Forum zu stellen und werden auch nur dort beantwortet, damit Alle durch deren Erörterung lernen und von ihr profitieren können. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 7828
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: jQuery Bilderstapel Galerie in NetObjects Fusion einbinden (Version 2)
« Antwort #3 am: 08. Oktober 2013, 12:33:23 »
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:

Screenshots sind nur für Mitglieder sichtbar. Bitte einloggen oder registrieren.



Screenshots sind nur für Mitglieder sichtbar. Bitte einloggen oder registrieren.


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
« Letzte Änderung: 08. Oktober 2013, 12:38:40 von nettesekel »
Kannst du so machen, dann isses halt kacke.

Fragen - die inhaltlich ins Forum gehören - sind grundsätzlich im Forum zu stellen und werden auch nur dort beantwortet, damit Alle durch deren Erörterung lernen und von ihr profitieren können. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 7828
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: jQuery Bilderstapel Galerie in NetObjects Fusion einbinden (Version 2)
« Antwort #4 am: 08. Oktober 2013, 12:37:12 »
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:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.



------------------------------------------------------------------------------------------------------
Code für die Unterseiten
------------------------------------------------------------------------------------------------------
Code:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.



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:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.


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:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.


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.
« Letzte Änderung: 15. Mai 2014, 10:55:46 von nettesekel »
Kannst du so machen, dann isses halt kacke.

Fragen - die inhaltlich ins Forum gehören - sind grundsätzlich im Forum zu stellen und werden auch nur dort beantwortet, damit Alle durch deren Erörterung lernen und von ihr profitieren können. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 7828
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: jQuery Bilderstapel Galerie in NetObjects Fusion einbinden (Version 2)
« Antwort #5 am: 08. Oktober 2013, 12:38:09 »
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:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.


width = Bildbreite
Code:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.



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

Gutes Gelingen!  (hi)
« Letzte Änderung: 03. Juli 2014, 13:46:13 von nettesekel »
Kannst du so machen, dann isses halt kacke.

Fragen - die inhaltlich ins Forum gehören - sind grundsätzlich im Forum zu stellen und werden auch nur dort beantwortet, damit Alle durch deren Erörterung lernen und von ihr profitieren können. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

 


Wenn dir dieser Artikel gefallen hat, dann empfehle ihn doch weiter... ;)