Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

collapse

* Alles hat ein Ende...

Eine Weisheit der Dakota-Indianer sagt:
"Wenn Du entdeckst, dass Du ein totes Pferd reitest, steig ab!"

Vor fast fünf Jahren habe ich die NOF-Community gegründet und nachdem just zu diesem Zeitpunkt das „alte NOF-Forum“ quasi über Nacht vom Betreiber geschlossen wurde, war mein Forum für viele Nutzer von NetObjects Fusion eine willkommene Alternative.

Inzwischen sind weit über 5000 NetObjects-Nutzer in der NOF-Community registriert und täglich kommen weitere hinzu. An interessierten Mitgliedern fehlt es also nicht. Was aber fehlt, sind Mitglieder, die Lust haben, anderen Nutzern bei der Lösung ihrer vielfältigen Probleme in der Anwendung von NetObjects Fusion zu helfen. Vielleicht, weil viele von ihnen - ebenso wie ich - das Interesse an NOF verloren haben und zwischenzeitlich mit anderen Programmen arbeiten.

Aktuell ist es so, dass der Support wie die Kosten für den Betrieb der NOF-Community fast ausschließlich von mir übernommen werden. Dies, und die Tatsache, dass ich die Arbeit mit NetObjects Fusion nicht mehr für zeitgemäß halte, veranlasst mich, den aktiven Forenbetrieb zu beenden. Die Beiträge, Tipps und Anleitungen aus den letzten Jahren stehen ab heute nur noch als Nachschlagewerk zur Verfügung.

Ich bedanke mich an dieser Stelle ganz herzlich bei allen, die mich und die NOF-Community in den vergangenen Jahren unterstützt haben.

Beste Grüße nettesekel

Die letzten Beiträge

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

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • 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: 8181
    • 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: 8181
    • 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: 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>
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: 8181
    • 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:






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: 8181
    • 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: 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.
« 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: 8181
    • 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: 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!  (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... ;)