Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Backstretch mit Schriftzug?
#1
Hallo,
so alle Nas lang kommt es mal wieder:
Ich brauche ein Backstretch mit Schriftzug.
Nun haben wir zwar in StoreM4 einen Hintergrundslider, der fast alles gut macht, außer dem Bildwechsel. Das ist so ein damisches Geschiebe.
Oder gibt es dazu inzwischen einen Überblendungseffekt?
Tommy sagte mal irgendwann, dass es ab Bootstrap 4.2 standard ist.

Frank
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
Hallo
Du könntest dir selbst einen Hintergrundslider erstellen dafür musst du aber die Tags picture und scrset nutzen und die Hintergrundbilder auf den Body anwenden.
Ich habe auch eine Vorlage dazu muss aber erst meinen Rechner wieder am Laufen haben bevor ich da ran komme.
wenn du möchtest lass ich es dir dann zukommen.

Hier kannst du schon mal lesen auf dieser Basis habe ich den Slider aufgebaut..heute würde ich ihn allerdings per jquery animieren.

Link
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
Das mit dem Hintergrund als Body ist ja wie der Backstretch.
Nur ich brauche da halt Text zu.

Ich kaue gerade das hier durch, kennst Du den zufällig?
http://www.aaronvanderzwan.com/maximage/
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
Oberen Beitrag erweitert!
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
Moin,

suche mal bei Google nach:

backstretch slider with captions

... habe es selbst aber noch nicht probiert.

https://github.com/biwin/backstretch-slideshow-captions
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
Hm, da tut sich nix....
https://www.afripix.de/back/index.html
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
... ja - ich bekomme es auch noch nicht hin.

Es sollte eigentlich so gehen:

https://libraries.io/github/sebastiansul...ackstretch
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#8
Es fehlt meines Erachtens das Bild was angezeigt werden soll. Denn gleich im ersten Abschnitt wird geprüft ob das element images 0 ist oder undefiniert. Wenn dies so ist sollte eigentlich ein Text angezeigt werden "No images were supplied for Backstretch".

gebe dem Element images mal den Pfad zum Bild mit Bildernamen.

Kann es leider selbst nicht testen.

Code:
/* PLUGIN DEFINITION
  * ========================= */

  images = "../assets/images/Bild.jpg"; // Globale Variable

 $.fn.backstretch = function (images, options) {
   // We need at least one image or method name
   if (images === undefined || images.length === 0) {
     $.error("No images were supplied for Backstretch");
   }

   /*

So ist es in Github angegeben
Code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
   // To attach Backstrech as the body's background
   $.backstretch(
       [
           {
               "src" : "path/to/image.jpg",
               "caption" : "<h1>Image caption goes here</h1>"
           }
       ]
   );

   // You may also attach Backstretch to a block-level element
   $(".foo").backstretch(
       [
           {
               "src" : "path/to/image.jpg",
               "caption" : "<h1>Image caption goes here</h1>"
           }
       ]
   );

   // Or, to start a slideshow, just pass in an array of images
   $(".foo").backstretch(
       [
           {
               "src" : "path/to/image.jpg",
               "caption" : "<h1>Image caption goes here</h1>"
           },
           {
               "src" : "path/to/image2.jpg",
               "caption" : "<h1>Image 2 caption goes here</h1>"
           },
           {
              "src" : "path/to/image3.jpg",
              "caption" : "<h1>Image 3 caption goes here</h1>"
           }
       ],
       {
           fade: 750,
           duration: 4000,
           captionAppendTo: '#wrapper'
       }
   );
</script>

Achtung Eintrag erweitert !
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#9
Andy,

hast Du es getestet?

Es nutzt ja nichts das hier zu posten, wenn es in Mobirise nicht geht Sad

Das und mindestens ein Dutzend andere Scripts gingen bei mir nicht und genau dieser Code steht doch auch in dem Link von meinem letzten Beitrag#7 - auch nicht mit der neuesten "jquery.backstretch.min.js"

... zumindest hatte ich immer nur eine leere Seite.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#10
Da es erstmal nur ein Entwurf ist und die Interessentin die Sache noch nichtmals in Auftrag gegeben hat, habe ich es mir vorläufig einfach gemacht.

Das Erstdesign soll heute abgeliefert werden.
Hier meine erste Idee

https://www.afripix.de/SabineHandler/

Bitte Eure ersten Ideen dazu :D
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#11
@Tommy: bei mir auch nicht!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#12
Also ich kann es derzeit nicht mit Mobi testen.
Aber ich habe es in einer selbst geschriebenen Seite eingebunden und da funktioniert es ohne Probleme.

Gesamten Inhalt von backstretch auf Server packen.
dann auf der Seite am Ende des Body
dieses eintragen für ein Slider im body
Code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="./src/jquery.backstretch.js"></script>
<script src="jquery.backstretch.js"></script>  
<script src="jquery.backstretch.min.js"></script>    
<script>
    $.backstretch([
      "./examples/pot-holder.jpg",
      "./examples/coffee.jpg",
      "./examples/dome.jpg"
      ], {
        duration: 4000,
        transition: 'push_left|push_right|cover_up|cover_down|fade',
        transitionDuration: 250
    });
</script>

Habe jetzt auch nicht alle Funktionen aus diesem Script getestet aber das was ich getestet habe funktioniert.
Ich vermute mal, dass es beim Integrieren in Mobi Probleme gibt, da sich das Script mit dem im Mobi vorhandenen jquery 3.3.1 beißt. Ich mußte diese Version rausnehmen und dann hat es Funktioniert

Hier der Link zum Test
Benutzer:Test
PW: frei123
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#13
Moin Andy,

ja - so sollte es aussehen - aber eben nicht in Mobirise. Da gibt es noch einen Haufen anderer JavaScripts und da läuft es eben nicht. Zumindest habe ich es in Mobirise noch nicht geschafft.

Genau das ist doch immer das Problem mit externen Scripts, sie müssen an die richtige Stelle einer Software wie Mobirise und es müssen eventuell Scripts angepasst werden. In jedem Fall dürfen keine Dateien von Mobirise ausgetauscht oder verändert werden, denn das führt dann wieder an anderen Stellen zu Problemen und man kann keine Updates mehr machen.

P.S.:

und wieso verweist Du in dem Script oben 3 x auf die gleiche Datei?

Zitat:<script src="./src/jquery.backstretch.js"></script>
<script src="jquery.backstretch.js"></script>  
<script src="jquery.backstretch.min.js"></script>


Du hast doch auch in Deinem Beispiel überhaupt keinen Text am Script angegeben, sondern einen ganz normalen <div> Container auf der Seite, der nicht mit dem Bild wechselt :confused:

Code:
        <div class="text-center mt-5 pt-5" style="background-color:#fff; border:1px solid #888; border-radius:10px; display:flex; align-content: center;flex-direction: column;justify-content: center;">
           <h1>Bootstrap starter template</h1>
           <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
       </div>


... das habe ich doch auf meiner Seite schon immer so:

http://www.mobirise-tutorials.com/Portfo...-Show.html

Was gewünscht ist, ist eine individuelle Beschriftung der unterschiedlichen Backstretch-Bilder.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#14
Zitat:und wieso verweist Du in dem Script oben 3 x auf die gleiche Datei?
Es sind tatsächlich unterschiedliche Inhalte.

Code:
<script src="./src/jquery.backstretch.js"></script> " Diese hier liegt in einem anderen Ordner"
<script src="jquery.backstretch.js"></script>  "Diese ist im Hauptverzeichnis"
<script src="jquery.backstretch.min.js"></script> "Diese liegt auch im Hauptverzeichnis ist aber schwer zu kontrollieren was da wirklich alles drin steht"

Es scheint für die verschiedenen Möglichkeiten verschiedenen Js -Dateien zugeben.
Zitat:Du hast doch auch in Deinem Beispiel überhaupt keinen Text am Script angegeben, sondern einen ganz normalen <div> Container auf der Seite, der nicht mit dem Bild wechselt :confused:
Das ist korrekt. Aus Zeitmangel habe ich nicht alle Varianten getestet. Aber das Beispiel ist ja in Github gut erklärt und gezeigt. Ich hoffe das diese Variante auch funzt.
Ich hatte hier nur die Varianten für ein festes Bild im Hg und so wie es jetzt ist als Slider getestet.

Hier der Code für die variante mit der Caption
Code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
   // To attach Backstrech as the body's background
   $.backstretch(
       [
           {
               "src" : "path/to/image.jpg",
               "caption" : "<h1>Image caption goes here</h1>"
           }
       ]
   );

   // You may also attach Backstretch to a block-level element
   $(".foo").backstretch(
       [
           {
               "src" : "path/to/image.jpg",
               "caption" : "<h1>Image caption goes here</h1>"
           }
       ]
   );

   // Or, to start a slideshow, just pass in an array of images
   $(".foo").backstretch(
       [
           {
               "src" : "path/to/image.jpg",
               "caption" : "<h1>Image caption goes here</h1>"
           },
           {
               "src" : "path/to/image2.jpg",
               "caption" : "<h1>Image 2 caption goes here</h1>"
           },
           {
              "src" : "path/to/image3.jpg",
              "caption" : "<h1>Image 3 caption goes here</h1>"
           }
       ],
       {
           fade: 750,
           duration: 4000,
           captionAppendTo: '#wrapper'
       }
   );
</script>

Es funktioniert so auch nur wenn alles auf den Server hochgeladen ist!!!

Zitat:Genau das ist doch immer das Problem mit externen Scripts, sie müssen an die richtige Stelle einer Software wie Mobirise und es müssen eventuell Scripts angepasst werden. In jedem Fall dürfen keine Dateien von Mobirise ausgetauscht oder verändert werden, denn das führt dann wieder an anderen Stellen zu Problemen und man kann keine Updates mehr machen.

Also wenn ich es jetzt versuchen wollte, würde ich zusehen das ich das Script definitiv hinter die Scripte von Mobi bekomme. Notfalls im Nachgang per Editor. Aber keine Garantie das es wirklich funzt. :D
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#15
also - es geht doch NUR um das "Caption" Script und das habe ich nicht in Mobirise zum Laufen bekommen.

Es ist in jedem Fall nur 1 backstretch.js zu verlinken.

Meinst Du das alles richtig ist, was bei "Github" steht :eek: Selbst ich habe da was zu stehen :D Da kann jeder Dödel was posten ...
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren


Möglicherweise verwandte Themen...
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Mobirise - Backstretch Hintergrund Doris Rehhausen 6 642 07.04.2017, 19:18
Letzter Beitrag: Doris Rehhausen



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!