Neuigkeiten
  • Die modified eCommerce Shopsoftware ist kostenlos, aber nicht umsonst.
    Spenden
  • Damit wir die modified eCommerce Shopsoftware auch zukünftig kostenlos anbieten können:
    Spenden
  • Thema: Slider (Banner) flashing der Bilder bei Page Load

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.990
    • Geschlecht:
    Hallo Community.
    Hier mal ein Tipp um folgendes Problem mit dem in modified 2.0.x integrierten Slider/Banner zu beheben:
    Der verwendete bxSlider wird im HTML als unordered list ausgegeben
    Code: XML  [Auswählen]
    <ul class="bxcarousel_slider">
        <li>
            <img src="blabla.jpg" alt="bla" />
        </li>
        <li>
            <img src="blabla.jpg" alt="bla" />
        </li>
        <li>
            <img src="blabla.jpg" alt="bla" />
        </li>
    </ul>

    Die Styles werden dynamisch per Javascript gesetzt (height, position:absolute, usw.).
    Ich habe nun Umgebungen wo
    • bei Pageload die Bilder vertikal untereinander auf-flashen bevor das Javascript greift (trotz $(document).ready(function(){)
    • es kein Fallback für deaktiviertes Javascript gibt,
      was bedeutet, daß bei deaktiviertem Javascript die Bilder des Sliders untereinander angezeigt werden

    Mich würde interessieren ob noch jemand das Flashing-Problem hat.

    Hier eine Lösung:
    In der /index.html des Templates folgendes
    Code: XML  [Auswählen]
    {if isset($SLIDER)}
        <div class="content_banner cf">
            <ul class="bxcarousel_slider">
                {foreach name=outer item=slider from=$SLIDER}
                <li>{$slider.IMAGE}</li>
                {/foreach}
            </ul>
        </div>
        {/if}

    hiermit ersetzen:
    Code: XML  [Auswählen]
    {if isset($SLIDER)}
        <div class="content_banner cf">
            <ul class="bxcarousel_slider">
                {foreach name=outer item=slider from=$SLIDER}
                <li{if !$slider@index eq 0} style="display:none;"{/if}>{$slider.IMAGE}</li> {*added hard coded display:none for not first images, since images flash stacked vertically while loading page, noRiddle*}
                {/foreach}
            </ul>
        </div>
        {/if}

    Damit wird
    • das Flashing behoben
      und
    • bei deaktiviertem Javascript nur das erste Bild angezeigt

    Javascript setzt die nötigen Styles dann dynamisch (z.B. display:block auf die li).

    In der Hoffnung, daß es dem ein oder anderen hilft,
    Gruß,
    noRiddle

    Linkback: https://www.modified-shop.org/forum/index.php?topic=37675.0

    p3e

    • Experte
    • Beiträge: 2.426
    Re: Slider (Banner) flashing der Bilder bei Page Load
    Antwort #1 am: 28. August 2017, 14:37:13
    Ich hatte das Problem gelöst, indem der Slider in einer DIV-Box mit fester Größe (=Größe der einzelnen Slider-Grafiken) liegt. Das Ergebnis ist das selbe aber Deine Lösung mit display:none ist definitiv schöner  :worship:
    Danke.

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.990
    • Geschlecht:
    Re: Slider (Banner) flashing der Bilder bei Page Load
    Antwort #2 am: 28. August 2017, 14:40:26
    Danke dir für das Feedback, p3e.

    DIV-Box mit fester Größe, geht das bei responsive Design ?
    Ich weiß, in der größt-möglichen Ansicht ja, aber wenn man dann mal das Browser-Fenster schmal macht, flashen die Bilder wieder auf, eben so weit wie die Höhe des DIV angegeben ist.
    Oder wie genau hast du's gemacht ?

    Gruß,
    noRiddle

    p3e

    • Experte
    • Beiträge: 2.426
    Re: Slider (Banner) flashing der Bilder bei Page Load
    Antwort #3 am: 29. August 2017, 10:06:38
    Ja das geht, ehrlich gesagt hatte ich mir mit jquery aber einen simplen eigenen Slider gebaut. Ich habe der DIV Box die Eigenschaft overflow: hidden; und dem Inhalt float: left; gegeben. Wenn die Box über die Fensterbreite geht und ich zB. 4 Slidergrafiken nutze, gebe ich dem Inhalt eine Größe von 400% und scrolle den schrittweise nach links (habe leider kein Beispiel mehr, da ich momentan keinen Slider mehr nutze).

    PS: Seit HTML5 brauchst Du eigentlich kein JS mehr für einen Slider weil Du da auch mit CSS weich animieren kannst. So eine Lösung finde ich viel besser.

    Andreas Kroll

    • Fördermitglied
    • Beiträge: 249
    • Geschlecht:
    Re: Slider (Banner) flashing der Bilder bei Page Load
    Antwort #4 am: 29. August 2017, 11:14:04
    Guten Morgen in die Runde

    Mal eine ganz doofe Frage:
    Ist es sinnvoll neben dem Alt-Tag auch einen Title-Tag einzupflegen?
    Falls ja, fänd ich es gut wenn ihr mir schreiben könntet, wo ich die Änderung vornehmen muss.

    Vielen Dank im voraus
    Andreas

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.990
    • Geschlecht:
    Re: Slider (Banner) flashing der Bilder bei Page Load
    Antwort #5 am: 29. August 2017, 14:57:18
    @p3e
    Jau, mit float:left und einer hohen width für ul hatte ich's auch probiert. Das geht aber bei dem bxSlider nicht. (Eigene Slider habe ich auch, viel simpler als der bxSlider und effektiv.)
    In der Tat sind reine CSS-Slider nice, sie können aber nicht immer alles was man möchte.

    @Andreas Kroll
    Das Backend sieht keine title-tag Eingabe vor.
    Was bei "Titel des Banners:" eigegeben wird wird der alt-tag des Bildes.
    Wenn ein title-tag gewünscht ist würde ich ihn allerdings auf den a-tag setzen und nicht auf das Bild, für den Fall, daß ein Bild verlinkt ist.
    Wenn du als title-tag das was auch der alt-tag des Bildes ist (s.o.) für Links einfügen willst müsstest du normalerweise die Datei /inc/xtc_display_banner.inc.php anpassen.
    Du kannst es aber auch direkt im Template versuchen:
    In der /index.html des Templates diesen Code suchen
    Code: XML  [Auswählen]
          {if isset($SLIDER)}
            <div class="content_banner cf">
              <ul class="bxcarousel_slider">
              {foreach name=outer item=slider from=$SLIDER}
                <li>{$slider.IMAGE}</li>
              {/foreach}
              </ul>
            </div>
          {/if}

    und so anpassen
    Code: XML  [Auswählen]
          {if isset($SLIDER)}
            <div class="content_banner cf">
              <ul class="bxcarousel_slider">
              {foreach name=outer item=slider from=$SLIDER}
                <li>{$slider.IMAGE|replace:'a href':"a title='`$slider.TITLE`' href"}</li>
              {/foreach}
              </ul>
            </div>
          {/if}

    Gruß,
    noRiddle

    Andreas Kroll

    • Fördermitglied
    • Beiträge: 249
    • Geschlecht:
    Re: Slider (Banner) flashing der Bilder bei Page Load
    Antwort #6 am: 29. August 2017, 15:31:27
    Vielen Dank mal wieder für die schnelle Hilfe.

    Bisher sah der Quellcode so aus:
    Code: XML  [Auswählen]
    <a href="https://www.angelcenter-soest.de/redirect.php?action=banner&goto=16">
    <img src="https://www.angelcenter-soest.de/images/banner/slyder-liegen.png" alt="Liegen" width="800" height="200">
    </a>

    Nach der Anpassung so:
    Code: XML  [Auswählen]
    <a title="Liegen" href="https://www.angelcenter-soest.de/redirect.php?action=banner&goto=16">
    <img src="https://www.angelcenter-soest.de/images/banner/slyder-liegen.png" alt="Liegen" width="800" height="200">
    </a>

    Ich hätte aber gerne das der "<img src" Code um den Title ergänzt wird.
    Habe mir dazu schon die inc/xtc_display_banner.inc.php angesehen und ein wenig was probiert, aber leider reichen meine Kenntnisse dafür absolut nicht aus.

    Ich vertraue auf euch ;-)
    mfg
    Andreas

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.990
    • Geschlecht:
    Re: Slider (Banner) flashing der Bilder bei Page Load
    Antwort #7 am: 29. August 2017, 15:52:11
    Der title-tag wird bei Mouseover angezeigt und ist eigtl. nur bei Links sinnvoll.
    Der bereits vorhandene alt-tag des Bildes ist 1. dazu da einen Alternativ-Text anzuzeigen im Falle das Bild nicht geladen werden kann und 2. um den Suchmaschinen einen Anhaltspunkt zu geben um was es in dem Bild geht.

    Du kannst den title-tag aber im Template anstelle für den Link für das Bild machen, indem du es dann eben so machst:
    Code: XML  [Auswählen]
          {if isset($SLIDER)}
            <div class="content_banner cf">
              <ul class="bxcarousel_slider">
              {foreach name=outer item=slider from=$SLIDER}
                <li>{$slider.IMAGE|replace:'img src':"img title='`$slider.TITLE`' src"}</li>
              {/foreach}
              </ul>
            </div>
          {/if}

    Den Core-Code nicht zu verändern ist sehr wertvoll für spätere Updates.

    Gruß,
    noRiddle

    *NACHTRAG*
    Das Thema gehört eigtl. nicht in diesen Thread, denn hier geht es um das Verhindern des Aublitzens der Bilder bei Page-Load.

    Andreas Kroll

    • Fördermitglied
    • Beiträge: 249
    • Geschlecht:
    Re: Slider (Banner) flashing der Bilder bei Page Load
    Antwort #8 am: 29. August 2017, 16:16:12
    Vielen Dank nochmals für die Hilfe.
    Werde deinen Rat befolgen und demnächst besser aufpassen.

    mfg
    Andreas

    Roberto

    • Frisch an Board
    • Beiträge: 84
    Re: Slider (Banner) flashing der Bilder bei Page Load
    Antwort #9 am: 31. August 2017, 17:03:24
    Das Flashing konnte ich bei mir nicht beobachten aber das bei deaktiviertem JavaScript alle Images angezeigt werden, hat etwas gestört.
    Daher DANKE für den Code!

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.990
    • Geschlecht:
    Re: Slider (Banner) flashing der Bilder bei Page Load
    Antwort #10 am: 31. August 2017, 17:36:30
    Das Flashing kannst du immer dann nachvollziehen wenn du ein responsive Template benutzt welches keine feste Höhe für den Parent-Container des Sliders angegeben hat.
    Gibt es eine feste Höhe gibt's kein Flashing, wie auch bereits durch p3e und meine Wenigkeit in diesem Thread geklärt wurde.

    Gruß,
    noRiddle

    Markus

    • modified Team
    • Beiträge: 1.396
    • Geschlecht:
    Re: Slider (Banner) flashing der Bilder bei Page Load
    Antwort #11 am: 21. September 2019, 10:21:19
    Hi zusammen,

    ich habe das ganze jetzt komplett über das CSS gelöst.
    So sollte kein Flashing mehr kommen ... und wenn Javascript deaktiviert ist kommt nur der 1. Slider.
    Auch das "springen" wegen der Höhe sollte damit behoben sein, da der erste Slider direkt ein "display:block;" bekommt.

    Code: CSS  [Auswählen]
    ul.bxcarousel_slider {
      list-style-type:none;
    }
    ul.bxcarousel_slider li {
      display:none;
    }
    ul.bxcarousel_slider li:first-child {
      display:block;
    }

    Korrigiert in r12139 im SVN

    Markus

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.990
    • Geschlecht:
    Re: Slider (Banner) flashing der Bilder bei Page Load
    Antwort #12 am: 21. September 2019, 19:10:55
    Ohne dir zu nahe treten zu wollen, hast du das getestet ?
    Ich weiß gerade nicht mehr, ob nicht auch die display-Eigenschaft per JS gesetzt wird und damit das CSS überschreibt (zumindest wenn ohne !important). Ich erinnere mich nur, daß ich damals im August 2017 keine CSS-Lösung gefunden hatte, was aber auch an mangelnden Ideen gelegen haben kann.

    Gruß,
    noRiddle

    Markus

    • modified Team
    • Beiträge: 1.396
    • Geschlecht:
    Re: Slider (Banner) flashing der Bilder bei Page Load
    Antwort #13 am: 21. September 2019, 19:52:13
    Hi noRiddle,

    ja ich habs getestet :-)

    Die "li"s bekommen vom Javascript ein display:block ... von daher kann ich ein display:none setzen. Wenn ich das aber important verwenden würde, dann würde das display:block vom Javascript verlieren.
    Das !important setzt sich auch über den inline-Style. Das darf ich also nicht machen.

    Daher steuer ich einfach den ersten an und gib dem ein display:block. Wenn dann kein Javascript aktiv ist, zündet auch nur der erste ... da der ja von mir ein display:block bekommt und die anderen stehen auf display:none. Ist vielleicht ein bischen tricky .. .aber funktioniert. :-)

    Markus

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.990
    • Geschlecht:
    Re: Slider (Banner) flashing der Bilder bei Page Load
    Antwort #14 am: 22. September 2019, 14:46:17
    Stimmt !important geht ja auch über Inline-Style ich Hirni.
    Alles klar, danke für die Erklärung.

    Gruß,
    noRiddle
    Werbung / Banner buchen
    6 Antworten
    1945 Aufrufe
    12. Juni 2020, 00:00:35 von Timm
    12 Antworten
    4215 Aufrufe
    06. Februar 2017, 16:10:36 von JanineB
    0 Antworten
    1173 Aufrufe
    22. November 2017, 07:42:15 von weichen-walter
    6 Antworten
    8607 Aufrufe
    26. Juli 2012, 19:29:25 von WayneTsun
               
    anything