Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

collapse

* Neuigkeiten der NOF-Community

Einige Boards sind archiviert und stehen nur noch zum Lesen zur Verfügung. Support wird für die geschlossenen Boards zukünftig nicht mehr geleistet.

Die letzten Beiträge

Umstellung auf php
von Linus50
23. September 2016, 07:10:52

Website importieren
von frankkrill
21. September 2016, 13:40:14

Suchmaschinen-Optimierung
von nettesekel
21. September 2016, 11:19:09

9 Fehlermeldungen beim Puplizieren
von BurkhardS
21. September 2016, 10:20:57

Letzte Änderung anzeigen
von Linus50
19. September 2016, 20:12:16

NOF 12 auf NOF 15 upgrad
von nettesekel
19. September 2016, 17:19:28

NetObj. Fusion 2015 publizierenfehler
von Jucomit
19. September 2016, 09:15:18

lifestream einbinden
von ramada
18. September 2016, 10:26:29

CSS Eigenschaft per klick aendern
von visionbrasil
14. September 2016, 01:36:59

* Friendship

DER Katzenblog – mit tollen Tipps und Ideen für deine Katze(n) <3

Blogs zu unserem Forum

Button zum Forum Blog
Testbericht NOF 13

* Social Media...

onlinestreet.de - Verzeichnis redaktionell ausgewählter Webseiten
Verzeichnis ausgewählter Webseiten zum Thema:
Internet » Chats und Foren
Geführt im Verzeichnis ausgewählter Webseiten: NOF-Community - Deutschsprachiges NetObjects Fusion Forum
Fachanwalt für Internet-Recht C.Schmietenknop

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

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 7924
    • 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 »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 7924
    • 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 »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 7924
    • 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.
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 7924
    • 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 »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 7924
    • 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 »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 7924
    • 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 »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. 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... ;)