Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

collapse

* Alles hat ein Ende...

April 2017

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

Absturz bei FTP Publizierung
von nettesekel
16. April 2017, 12:51:56

E-Masil Adresse herausfinden
von nettesekel
11. April 2017, 16:16:20

Keine Neuinstallation möglich
von nettesekel
10. April 2017, 16:00:27

Publizieren geht nicht
von musikavokale
09. April 2017, 23:15:50

NOF 15
von nettesekel
04. April 2017, 23:55:26

Feststehender Seitenbereich
von nettesekel
01. April 2017, 17:37:12

Aufklappbare Navigation
von nettesekel
31. März 2017, 12:50:30

Nov 12 zum hare ausreisen
von Jim Panse
26. März 2017, 11:48:03

Lytebox Dateiablage
von fahrzeugseiten
21. März 2017, 23:23:23

* Schatznasen Feed

* Aquablogger Feed

* Strickzeugs Feed

* Links für Katzenfreunde

* ...

Fachanwalt für Internet-Recht C.Schmietenknop

* Friendship

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

Autor Thema: Kleine Wechsel-Bild-Galerie mit mouseover-Effekt und scrollenden Thumbs  (Gelesen 5965 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
Kürzlich habe ich auf Wunsch eines Users den Einfau dieser Galerie nochmal ausfühlich erläutert. https://www.nof-community.de/index.php?topic=1961.0

Nun habe ich das kleine Script, welches ich auch für den Contentslider verendet habe genutzt, um diese Galerie ein wenig auszubauen.

Während bei der einfachen Variante 4 Thumbs starr über dem großen Bild lagen und weitere Thumbs dann darüber oder daneben platziert werden mussten, kann man bei der modifizierten Variante nun einfach den Thumb-Container scrollen.

Wie das in NOF eingebaut aussieht, dazu gibt es wie immer ein Beispielprojekt:
http://demos.nof-community.de/kleine-wechselbildgalerie-mit-scrollenden-thumbs-in-netobjects-fusion/demo.html

Achtung! Damit der -Thumb-Slider auch im IE fehlerfrei funktioniert, publiziert die Seite bitte unter dem Doctype LOOSE.
Für Nutzer älterer NOF-Versionen gibt es hierfür eine Komponente von SwissKnife die ihr hier downloaden könnt: http://www.nof-academy.de/html/SwissKnife-Komponenten_fuer_NetObjects_Fusion.php

Und hier findet ihr eine Anleitung zur Verwendung der Kompo: http://www.nof-academy.de/SwissKnife-Tutorials/DocType/
« Letzte Änderung: 09. Juli 2014, 19:01:23 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
Re: Kleine Wechsel-Bild-Galerie mit mouseover-Effekt und scrollenden Thumbs
« Antwort #1 am: 16. Februar 2014, 16:46:56 »
Der Slider besteht im Prinzip auch 3 Bestandteilen:
jQuery
CSS
HTML

Platziert also zunächst mal die folgende Verlinkung zwischen den head-Tags der Seite, auf welcher der Slider laufen soll:
Code: HTML5

Wer nicht weiß, wie das geht, findet ihr eine Anleitung dazu: www.nof-community.de/index.php/topic,851.0
Da der Slider wahrscheinlich nicht auf allen Seiten laufen soll, würde ich empfehlen die Verlinkung im Layout-html (F9) einzutragen.

Zusätzlich fügt ihr dieses kleine Javascript am Body-Ende der Seite ein. Habt ihr euch bei der Verlinkung fürs Layout-html entschieden, so solltet ihr auch diese Einfügung im Layout-html vornehmen.

Code: Javascript
  1. <script type="text/javascript">
  2. var $gal = $('#gallery'),
  3.     $sli = $('#slider'),
  4.     $box = $('div.slide',$sli),
  5.     W    = $gal.width(), // 500
  6.     N    = $box.length,  // 3
  7.     C    = 0;            // a counter
  8.  
  9. $sli.width(W*N);
  10.  
  11.  
  12. $('#prev, #next').click(function(){
  13.   C = (this.id=='next' ? ++C : --C) <0 ? N-1 : C%N;
  14.   $sli.stop().animate({left: -C*W },800);
  15. });
  16. </script>


« Letzte Änderung: 16. Februar 2014, 16:48:47 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
Re: Kleine Wechsel-Bild-Galerie mit mouseover-Effekt und scrollenden Thumbs
« Antwort #2 am: 16. Februar 2014, 16:52:49 »
Als nächstes wenden wir uns der CSS-Datei zu. Im Beispielprojekt habe ich die CSS zwischen den head-Tags der Seite eingefügt, was grundsätzlich kein Problem darstellt. Möchtet ihr in eurem Projekt genauso vorgehen, dann fügt ihr folgenden Code zwischen den Head-tags eurer Seite ein. Ihr könnt ihn im Prinzip direkt eine Zeile (eventuell eine Leerzeile dazwischen) unter der vorher eingefügten Verlinkung einfügen.

Code: HTML5
  1. <style type="text/css">
  2. #gallery{
  3.   position:relative;
  4.   margin: 0 auto;
  5.   overflow:hidden;
  6.   width:502px;
  7.   height:128px; /* +20 = space for buttons */
  8.   text-align:center; /* to center the buttons */
  9. }
  10. #slider{
  11.   position:absolute;
  12.   left:0;
  13.   height:108px;  
  14.   text-align:left; /* to reset text inside slides */
  15. }
  16. #slider > div {
  17.   position:relative;
  18.   float:left;
  19.   width:502px;
  20.   height:108px;
  21. }
  22. #prev, #next{
  23.   color: gray;
  24.   display:inline-block;
  25.   position:relative;
  26.   top:108px;
  27.   cursor:pointer;
  28. }
  29. #prev{
  30.   padding-right:230px;
  31. }
  32. #next{
  33.   padding-left:230px;
  34. }
  35. .first{
  36.   margin-right:20px;
  37.   width:105px;
  38.   height:105px;
  39. }
  40. .image{
  41.   border: 1px solid gray;
  42.   width:105px;
  43.   height:105px;
  44. }



Alternativ könnt ihr die Styleangaben aber auch in eine eigene Styledatei schreiben und dann eine Verlinkung zu dieser Datei zwischen den head-Tags der Seite einbinden.
Dazu öffnet ihr euren Editor kopiert ihr diesen Code in eine leer Datei und speichert sie unter slider.css ab.

Code: HTML5
  1. #gallery{
  2.   position:relative;
  3.   margin: 0 auto;
  4.   overflow:hidden;
  5.   width:502px;
  6.   height:128px; /* +20 = space for buttons */
  7.   text-align:center; /* to center the buttons */
  8. }
  9. #slider{
  10.   position:absolute;
  11.   left:0;
  12.   height:108px;  
  13.   text-align:left; /* to reset text inside slides */
  14. }
  15. #slider > div {
  16.   position:relative;
  17.   float:left;
  18.   width:502px;
  19.   height:108px;
  20. }
  21. #prev, #next{
  22.   color: gray;
  23.   display:inline-block;
  24.   position:relative;
  25.   top:108px;
  26.   cursor:pointer;
  27. }
  28. #prev{
  29.   padding-right:230px;
  30. }
  31. #next{
  32.   padding-left:230px;
  33. }
  34. .first{
  35.   margin-right:20px;
  36.   width:105px;
  37.   height:105px;
  38. }
  39. .image{
  40.   border: 1px solid gray;
  41.   width:105px;
  42.   height:105px;
  43. }

Diese Datei kopiert dann in den html-Ordner eurer lokalen Publizierung und ebenfalls in den html-Order auf eurem Server.

Anstelle des CSS-Codes fügt ihr dann nur noch die Verlinkung zu dieser Datei zwischen den Head-Tags eurer Seite ein. Achtet darauf dass beim Einsatz auf der Startseite der Pfad zur Style-Datei mit nur einem Punkt beginnen darf!

Code: HTML5
  1. <link rel="stylesheet" type="text/css" href="../html/slider.css">


Eine dritte Variante ist die, die Datei direkt in NOF einzubinden. Wie das funktioniert, ist hier beschrieben: https://www.nof-community.de/index.php/topic,1536.0



Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
Re: Kleine Wechsel-Bild-Galerie mit mouseover-Effekt und scrollenden Thumbs
« Antwort #3 am: 16. Februar 2014, 16:55:22 »
Kommen wir nun zu den Bildern. Um eine solche Galerie zu erstellen, benötigt ihr von jedem Bild je eine kleine und eine große Version.
Alle Maße der kleinen Bilder sollten identisch sein, alle Maße der großen Bilder ebenfalls, damit die Bilder später nicht hüpfen und ein einheitliches Bild ergeben.

Auch solltet Ihr die Bezeichnungen für die zueinandergehörenden Bilder immer so wählen, dass ihr sie gut zuordnen könnt. Also wie in meinem Beispiel
galerie1.jpg >> galerie1-s.jpg (s für small = klein)

Meine kleinen Bilder heißen:
galerie1-s.jpg
galerie2-s.jpg
galerie3-s.jpg
galerie4-s.jpg
usw.

Meine großen Bilder heißen:
galerie1.jpg
galerie2.jpg
galerie3.jpg
galerie4.jpg
usw.


Nun fügt ihr die große Version des Bildes in der Arbeitsansicht ein, das zuerst in eurer Galerie erscheinen soll. Legt dieses Bild am besten auf einen Layoutbereich, so lassen sich ungewollte Abstände zwischen Slider und großem Bild besser unterbinden.




Im zweiten Schritt geben wir dem großen eingefügten Bild einen Namen, damit der Browser später weiß, welches Bild bei Mouseover durch die anderen Bilder ausgetauscht werden soll.

Hierzu kopiert ihr euch zunächst folgenden Code:
Code: HTML5
  1. name="wechselbild"

In NOF markiert ihr nun das große Bild mit einem einfachen Klick und klickt im Anschluss den "html"-Button auf der EP. Es öffnet sich ein Fenster und ihr sucht euch am oberen Fensterrand das Icon für "Innen".
Klickt das Icon an... und dort wo nun der Cursor blinkt, fügt ihr den kopierten Codeschnipsel ein. Mit einem Klick auf den OK-Button am untern Fensterrand ist der Vorgang abgeschlossen.



Im Anschluss bindet ihr alle anderen großen Bilder und alle euren kleinen Bilder als zusätzliche Assets in euer Projekt ein. Eine Anleitung dazu, wie man das macht, findet ihr hier: www.nof-community.de/index.php/topic,11.0

Achtet bitte auch darauf dass ihr eure Publizierungsstruktur auf "nach Assettyp" gestellt habst, ansonsten wird die Galerie nicht funktionieren. Wie man das - falls nötig - umstellen kann, ist hier beschrieben. www.nof-community.de/index.php/topic,1540.0

« Letzte Änderung: 16. Februar 2014, 17:51:23 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
Re: Kleine Wechsel-Bild-Galerie mit mouseover-Effekt und scrollenden Thumbs
« Antwort #4 am: 16. Februar 2014, 17:49:20 »
Nun fügt ihr oberhalb eures großen Bildes, linksbündig ein Textfeld ein (ebenfalls auf den Layoutbereich).




Ins html dieses Textfeldes gebt ihr nun den Code für euren Thumbnail-Slider ein. Wie da geht, ist hier beschrieben: www.nof-community.de/index.php/topic,47.0

Code: HTML5
  1. <div id="gallery">
  2.   <div id="slider">
  3.      <div>
  4.        <img src="./assets/images/galerie1-s.jpg" title="" onMouseover="wechselbild.src='./assets/images/galerie1.jpg';" class="first image">
  5.        <img src="./assets/images/galerie2-s.jpg" title="" onMouseover="wechselbild.src='./assets/images/galerie2.jpg';" class="first image">
  6.        <img src="./assets/images/galerie3-s.jpg" title="" onMouseover="wechselbild.src='./assets/images/galerie3.jpg';" class="first image">
  7.        <img src="./assets/images/galerie4-s.jpg" title="" onMouseover="wechselbild.src='./assets/images/galerie4.jpg';" class="image">
  8.      </div>
  9.      <div>
  10.        <img src="./assets/images/galerie5-s.jpg" title="" onMouseover="wechselbild.src='./assets/images/galerie5.jpg';" class="first image">
  11.        <img src="./assets/images/galerie6-s.jpg" title="" onMouseover="wechselbild.src='./assets/images/galerie6.jpg';" class="first image">
  12.        <img src="./assets/images/galerie7-s.jpg" title="" onMouseover="wechselbild.src='./assets/images/galerie7.jpg';" class="first image">
  13.        <img src="./assets/images/galerie8-s.jpg" title="" onMouseover="wechselbild.src='./assets/images/galerie8.jpg';" class="image">
  14.      </div>
  15.      <div>
  16.        <img src="./assets/images/galerie9-s.jpg" title="" onMouseover="wechselbild.src='./assets/images/galerie9.jpg';" class="first image">
  17.        <img src="./assets/images/galerie10-s.jpg" title="" onMouseover="wechselbild.src='./assets/images/galerie10.jpg';" class="first image">
  18.        <img src="./assets/images/galerie11-s.jpg" title="" onMouseover="wechselbild.src='./assets/images/galerie11.jpg';" class="first image">
  19.        <img src="./assets/images/galerie12-s.jpg" title="" onMouseover="wechselbild.src='./assets/images/galerie12.jpg';" class="image">
  20.      </div>
  21.      <div>
  22.        <img src="./assets/images/galerie13-s.jpg" title="" onMouseover="wechselbild.src='./assets/images/galerie13.jpg';" class="first image">
  23.        <img src="./assets/images/galerie14-s.jpg" title="" onMouseover="wechselbild.src='./assets/images/galerie14.jpg';" class="first image">
  24.        <img src="./assets/images/galerie15-s.jpg" title="" onMouseover="wechselbild.src='./assets/images/galerie15.jpg';" class="first image">
  25.        <img src="./assets/images/galerie16-s.jpg" title="" onMouseover="wechselbild.src='./assets/images/galerie16.jpg';" class="image">
  26.      </div>
  27.      <div>
  28.        <img src="./assets/images/galerie17-s.jpg" title="" onMouseover="wechselbild.src='./assets/images/galerie17.jpg';" class="first image">
  29.        <img src="./assets/images/galerie18-s.jpg" title="" onMouseover="wechselbild.src='./assets/images/galerie18.jpg';" class="first image">
  30.        <img src="./assets/images/galerie19-s.jpg" title="" onMouseover="wechselbild.src='./assets/images/galerie19.jpg';" class="first image">
  31.        <img src="./assets/images/galerie20-s.jpg" title="" onMouseover="wechselbild.src='./assets/images/galerie20.jpg';" class="image">
  32.      </div>
  33.   </div>
  34.   <span id="prev">&#38;#9664;</span>
  35.   <span id="next">&#38;#9654;</span>
  36. </div>

Eine Erklärung zur Anpassung von html-und CSS-Code findet ihr unter folgendem Link: http://demos.nof-community.de/ContentNewsSlider/html/erklarung_slidegalerie.html

Nach dem Publizieren sollte euere Galerie nun über einen Thumb-Slider verfügen.

Gutes Gelingen!

« Letzte Änderung: 28. Oktober 2014, 19:58:08 von nettesekel »

Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion