Suche Photo Stack Gallery für Nof

[rollerfahrer]

Nabend,

bin auf der suche nach einer Photo Stack Gallery (Fotos übereinander-gestapelt) für meine Homepage (Startseite)
Habe auch schon ein paar wenige im Netz gefunden (Flash) wo es dann aber entweder am Einbau in Nof scheitert oder eine index.html Datei vorhanden ist, welche dann meine index.html auf dem Server von der Startseite überschreiben würde.

Hat jemand vielleicht einen guten Tipp für eine tolle Photo Stack Gallery mit Einbauanleitung in Nof???

Danke,

LG

[nettesekel]

Meinst du sowas?

https://www.nof-community.de/index.php/topic,370.msg2212.html#msg2212

Hatte die Idee, ein Tut dazu zu schreiben mangels Interessenten damals verworfen...

[rollerfahrer]

Danke erstmal,

das ist imPrinzip genau sowas! Am liebsten wäre mir aber so eine Gallery ohne prev...next Buttons. Habe sowasin Flash gesehen, da klickt man auf die Bilder selber und dann wechselt das Foto von vorne nach hinten usw..

[nettesekel]

Was Anderes habe ich auf die Schnelle nicht. Flash würde ich schnell verwerfen, denn das können viele neue Geräte gar nicht mehr anzeigen und es gibt unzufriedene Seitenbesucher...

[rollerfahrer]

habe hier ein paar nette Gallerien gefunden.
http://slidesjs.com/
Kann man diese bei Nof einbauen? Wenn ja, wasmüßte ich machen?

Dankefür die tolleHilfe hierimForum!!!

[nettesekel]

Welche genau würde dich denn interessieren?

[rollerfahrer]

diese hier http://slidesjs.com/examples/images-with-captions/

LG

[nettesekel]

1. Ruf mal den Quelltext dieser Slider-Seite auf... dort sind zwei Dateien verlinkt, welche du dir speichern müsstest... nämlich die "global.css" und die "slides.min.jquery.js". Schiebe die Dateien in den html-Ordner deiner lokalen Publizierung und ebenso in den html-Ordner auf deinem Server. (oder binde sie als Asset ein und schiebe sie in der Publizierenansicht in den html-Ordner)

2. Wenn du den Slider auf einer Seite nutzen willst, trägst du folgenden Code ins Layout-html zwischen die Head-Tags ein, soll er auf mehreren Seiten laufen, fügst du ihn ins Masterrahmen-HTML zwischen die Head-tags ein.

<link rel="stylesheet" href="./global.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="./slides.min.jquery.js"></script>
   
<script>
      $(function(){
         $('#slides').slides({
            preload: true,
            preloadImage: 'img/loading.gif',
            play: 5000,
            pause: 2500,
            hoverPause: true,
            animationStart: function(current){
               $('.caption').animate({
                  bottom:-35
               },100);
               if (window.console && console.log) {
                  // example return of current slide number
                  console.log('animationStart on slide: ', current);
               };
            },
            animationComplete: function(current){
               $('.caption').animate({
                  bottom:0
               },200);
               if (window.console && console.log) {
                  // example return of current slide number
                  console.log('animationComplete on slide: ', current);
               };
            },
            slidesLoaded: function() {
               $('.caption').animate({
                  bottom:0
               },200);
            }
         });
      });
   </script>

(für die Startseite die Pfade anpassen)

<link rel="stylesheet" href="./html/global.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="./html/slides.min.jquery.js"></script>

3.
Füge folgenden Code ins html eines Textfeldes ein. Die Bilder müsstest du an den angegebenen Ort auf deinen Server schieben... Pfade, Bildmaße, Titel, Texte müssen natürlich von dir angepasst werden.

<div id="slides">
        <div class="slides_container">
                <div class="slide">
                        <a href="http://www.bildlink.de" title="Bildtitel" target="_blank"><img src="http://www.deinedomian.de/bilder/bild1.jpg" width="570" height="270" alt="Slide 1">[/url]
                        <div class="caption" style="bottom:0">
                                <p>Text unter Bild</p>
                        </div>
                </div>
                <div class="slide">
                        <a href="http://www.bildlink.de" title="Bildtitel" target="_blank"><img src="http://www.deinedomian.de/bilder/bild2.jpg" width="570" height="270" alt="Slide 2">[/url]
                        <div class="caption">
                                 <p>Text unter Bild</p>
                        </div>
                </div>
                <div class="slide">
                         <a href="http://www.bildlink.de" title="Bildtitel" target="_blank"><img src="http://www.deinedomian.de/bilder/bild3.jpg" width="570" height="270" alt="Slide 3">[/url]
                         <div class="caption">
                                 <p>Text unter Bild</p>
                         </div>
                </div>
                <div class="slide">
                         <a href="http://www.bildlink.de" title="Bildtitel" target="_blank"><img src="http://www.deinedomian.de/bilder/bild4.jpg" width="570" height="270" alt="Slide 4">[/url]
                         <div class="caption">
                                 <p>Text unter Bild</p>
                         </div>
                </div>
          </div>
                                <a href="#" class="prev"><img src="./assets/images/arrow-prev.png" width="24" height="43" alt="Arrow Prev">[/url]
                                <a href="#" class="next"><img src="./assets/images/arrow-next.png" width="24" height="43" alt="Arrow Next">[/url]
          </div>
                        <img src="./assets/images/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
</div>

für jedes weiter Bild im Slider muss dieser Absatz an der entsprechenden Stelle eingefügt werden:

                <div class="slide">
                        <a href="http://www.bildlink.de" title="Bildtitel" target="_blank"><img src="http://www.deinedomian.de/bilder/bild1.jpg" width="570" height="270" alt="Slide 1">[/url]
                        <div class="caption" style="bottom:0">
                                <p>Text unter Bild</p>
                        </div>
                </div>

4. Die Grafiken "example-frame.png", "arrow-next.png", "arrow-prev.png", müsstest du dir auch mit eienm Rechtsklick speichern und im Ordner assets>>images platzieren... (lokale Publ. + Server)

Viel Spaß beim Umsetzen! 

Erkundige dich bitte, unter welchen Bedingungen du das Teil nutzen darfst!

[rollerfahrer]

Super, danke vielmals für die tolle Beschreibung!!!

Werds nachher mal probieren! 

LG

[rollerfahrer]

Also Einbau hat soweit super geklappt.
Funktioniert auch bis auf eine kleine Sache tadelos.

Und zwas habe ich nun 3 Fotos hinzugefügt. Unter dem Frame werden nun aber trotzdem 6 Punkte angezeigt und nur jeder 2 Punkt beinhaltet das Foto von mir. Das heisst also: 1.Punkt: Foto-->klick weiter nach rechts 2.Punkt: leer---> klick weiter nach rechts 3.Punkt: Foto usw...

habe diesen Quellcode eingesetzt

<div id="slides">
        <div class="slides_container">
                <div class="slide">
                        <a href="http://www.bildlink.de" title="Bildtitel" target="_blank"><img src="./assets/images/1.jpg" width="570" height="270" alt="Slide 1">
                        <div class="caption" style="bottom:0">
                                <p>Foto1</p>
                        </div>
                </div>
                <div class="slide">
                        <a href="http://www.bildlink.de" title="Bildtitel" target="_blank"><img src="./assets/images/2.jpg" width="570" height="270" alt="Slide 2">
                        <div class="caption">
                                 <p>Foto2</p>
                        </div>
                </div>
                <div class="slide">
                         <a href="http://www.bildlink.de" title="Bildtitel" target="_blank"><img src="./assets/images/3.jpg" width="570" height="270" alt="Slide 3">
                         <div class="caption">
                                 <p>Foto3</p>
                         </div>
               
                </div>
          </div>
                                <a href="#" class="prev"><img src="./assets/images/arrow-prev.png" width="24" height="43" alt="Arrow Prev">
                                <a href="#" class="next"><img src="./assets/images/arrow-next.png" width="24" height="43" alt="Arrow Next">
          </div>
                        <img src="./assets/images/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
</div>

[nettesekel]

Ich schau mal...

[nettesekel]

Jo, ich würde mal sagen du warst beim Löschen ein wenig zu großzügig... Du hast die Link-Tags nicht geschlossen...
jeweils das was zwischen /// FEHLT /// und /// FEHLT /// steht, hast du zu viel entfernt. Trage es ein und es funktioniert.

Code: [Auswählen]

<div id="slides">
        <div class="slides_container">
                <div class="slide">
                        <a href="http://www.bildlink.de" title="Bildtitel" target="_blank"><img src="./assets/images/1.jpg" width="570" height="270" alt="Slide 1">/// FEHLT ///[/url]/// FEHLT ///
                        <div class="caption" style="bottom:0">
                                <p>Foto1</p>
                        </div>
                </div>
                <div class="slide">
                        <a href="http://www.bildlink.de" title="Bildtitel" target="_blank"><img src="./assets/images/2.jpg" width="570" height="270" alt="Slide 2">/// FEHLT ///[/url]/// FEHLT ///
                        <div class="caption">
                                 <p>Foto2</p>
                        </div>
                </div>
                <div class="slide">
                         <a href="http://www.bildlink.de" title="Bildtitel" target="_blank"><img src="./assets/images/3.jpg" width="570" height="270" alt="Slide 3">/// FEHLT ///[/url]/// FEHLT ///
                         <div class="caption">
                                 <p>Foto3</p>
                         </div>
               
                </div>
          </div>
                                <a href="#" class="prev"><img src="./assets/images/arrow-prev.png" width="24" height="43" alt="Arrow Prev">
                                <a href="#" class="next"><img src="./assets/images/arrow-next.png" width="24" height="43" alt="Arrow Next">
          </div>
                        <img src="./assets/images/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
</div>

[rollerfahrer]

Bor, Hammer!!!
Ich bin durchaus begeistert von der GRANDIOSEN Hilfe hier!!!

Weiter so! So macht Nof endlich wieder Spaß!!!

[rollerfahrer]

Guten morgen!

Da ich mir über Nacht wieder einige Gedanken gemacht habe, möchte ich nun folgendes verändern.

Ich denke jetzt geht es ans Eingemachte:

Ich würde gerne die Größe des Sliders verändern (Kleiner) da er mir etwas zu groß für meinen Head-Bereich ist.
Den Rahmen habe ich mit PS schon entsprechen angepasst. Die Fotos auch. Nur sind die Fotos und die rechts-links Pfeile nicht mehr an der richtigen Stelle. Alles ist versetzt. Welche Height+Width muß ich anpassen/verändern? Oder geht das nicht so einfach?

LG

[nettesekel]

Na in dem Code in dem du den Pfad zum Bild eingibst, befinden sich doch direkt im Anschluss die entsprechenden Angaben zu height und width...

<img src="./assets/images/2.jpg" width="570" height="270" alt="Slide 2">/// FEHLT ///[/url]/// FEHLT ///