ilch Forum » Ilch CMS 2.X » Allgemein » Slider ändern

Geschlossen
  1. #1
    User Pic
    TomTom81 Mitglied
    Registriert seit
    05.03.2019
    Beiträge
    6
    Beitragswertungen
    0 Beitragspunkte
    Kann ich den slider im Header ändern so das die Bilder reingezoomt werden zb. ?

    Habe das Design schlicht in schwarz/blau gehalten doch im Forum wird noch der weisse hintergrund angezeigt .

    Muss ich das auch in der css ändern oder doch wo anders ?

    MFG
    Tom


    verwendete ilch Version: 2.1.x

    betroffene Homepage: tomsurlaub.de
    0 Mitglieder finden den Beitrag gut.
  2. #2
    User Pic
    Slipi ilch.de Design
    Registriert seit
    19.01.2018
    Beiträge
    938
    Beitragswertungen
    117 Beitragspunkte
    Ja, dies wäre die forum.css. Diese findest du unter application/modules/forum/static/css

    Slipi
    1 Mitglieder finden den Beitrag gut.
  3. #3
    User Pic
    TomTom81 Mitglied
    Registriert seit
    05.03.2019
    Beiträge
    6
    Beitragswertungen
    0 Beitragspunkte
    Super danke
    0 Mitglieder finden den Beitrag gut.
  4. #4
    User Pic
    wiesenflieger Mitglied
    Registriert seit
    03.12.2017
    Beiträge
    200
    Beitragswertungen
    12 Beitragspunkte
    ZitatZitat geschrieben von TomTom81
    Kann ich den slider im Header ändern so das die Bilder reingezoomt werden zb. ?


    Das würde mich auch Brennend interesieren ob das geht.
    0 Mitglieder finden den Beitrag gut.
  5. #5
    User Pic
    Baujahr73 gelöschter User
    Guten Morgen,

    meint Ihr sowas !?

    bootsnipp.com/snippets/Q04Om
    0 Mitglieder finden den Beitrag gut.
  6. #6
    User Pic
    wiesenflieger Mitglied
    Registriert seit
    03.12.2017
    Beiträge
    200
    Beitragswertungen
    12 Beitragspunkte
    ja genau das meinte ich
    0 Mitglieder finden den Beitrag gut.
  7. #7
    User Pic
    Baujahr73 gelöschter User
    @Slipi,

    wollte mal deine Seite besuchen, aber bekomme die Meldung das diese nicht Sicher ist.





    Schade, wollte eigentlich mal was bei Dir bestellen!
    0 Mitglieder finden den Beitrag gut.
  8. #8
    User Pic
    wiesenflieger Mitglied
    Registriert seit
    03.12.2017
    Beiträge
    200
    Beitragswertungen
    12 Beitragspunkte
    Ach was die seite ist sicher
    0 Mitglieder finden den Beitrag gut.
  9. #9
    User Pic
    Slipi ilch.de Design
    Registriert seit
    19.01.2018
    Beiträge
    938
    Beitragswertungen
    117 Beitragspunkte
    ZitatZitat geschrieben von Baujahr73
    @Slipi,

    wollte mal deine Seite besuchen, aber bekomme die Meldung das diese nicht Sicher ist.





    Schade, wollte eigentlich mal was bei Dir bestellen!


    Zertifikat ist drauf und auch aktuell. Werde mir ansehen was da sein kann, danke für die Info, aber meine Seite ist sicher.

    Slipi
    0 Mitglieder finden den Beitrag gut.
  10. #10
    User Pic
    wiesenflieger Mitglied
    Registriert seit
    03.12.2017
    Beiträge
    200
    Beitragswertungen
    12 Beitragspunkte
    ok und was ist jetzt mit dem slider. Es gibt doch bestimmt eine möglichkeit wo ich das umstellen kann zum beispiel fade in oder fade out oder sehe ich das falsch


    Zuletzt modifiziert von wiesenflieger am 16.03.2019 - 13:33:53
    0 Mitglieder finden den Beitrag gut.
  11. #11
    User Pic
    M.vittel Mitglied
    Registriert seit
    16.11.2018
    Beiträge
    328
    Beitragswertungen
    24 Beitragspunkte
    Wenn ich das richtig sehe ist der Code doch dabei für PHP und CSS klicke mal oben rechts.
    RealLife ... das ist doch das Game mit der geilen Grafik und der scheiss Story
    0 Mitglieder finden den Beitrag gut.
  12. #12
    User Pic
    Baujahr73 gelöschter User
    ZitatZitat geschrieben von wiesenflieger
    ok und was ist jetzt mit dem slider. Es gibt doch bestimmt eine möglichkeit wo ich das umstellen kann zum beispiel fade in oder fade out oder sehe ich das falsch


    Benutzt Du ein eigenes Design, oder hast Du das Standard Design angepasst?

    Beim Standard Design einfach den Code vom alten Slider mit diesem austauschen.
    <div class="container">
                    <div class="gaming">
                        <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
       
      </ol>
    
      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
      
     
        <div class="item active">
          <img src="https://images.unsplash.com/photo-1445280471656-618bf9abcfe0?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1400" alt="Chania"  width="100%">
        </div>
        
          <div class="item ">
          <img src="https://images.unsplash.com/photo-1419064642531-e575728395f2?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1400" alt="Chania"  width="100%">
        </div>
    
        <div class="item">
          <img src="https://images.unsplash.com/photo-1445280471656-618bf9abcfe0?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1400" alt="Flower" width="100%">
        </div>
    
      </div>
    
      <!-- Left and right controls -->
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>


    In die style.css am besten ganz unten dann den css Teil einfügen.
    @-webkit-keyframes zoom {
      from {
        -webkit-transform: scale(1, 1);
      }
      to {
        -webkit-transform: scale(1.5, 1.5);
      }
    }
    
    @keyframes zoom {
      from {
        transform: scale(1, 1);
      }
      to {
        transform: scale(1.5, 1.5);
      }
    }
    
    .carousel-inner .item > img {
      -webkit-animation: zoom 20s;
      animation: zoom 20s;
    }



    Zuletzt modifiziert von Baujahr73 am 16.03.2019 - 14:58:16
    0 Mitglieder finden den Beitrag gut.
  13. #13
    User Pic
    Baujahr73 gelöschter User
    ZitatZitat geschrieben von Slipi
    [quote=Baujahr73]@Slipi,

    wollte mal deine Seite besuchen, aber bekomme die Meldung das diese nicht Sicher ist.





    Schade, wollte eigentlich mal was bei Dir bestellen!

    Zertifikat ist drauf und auch aktuell. Werde mir ansehen was da sein kann, danke für die Info, aber meine Seite ist sicher.


    Vielleicht spinnt auch nur meine Sicherheitssoftware!
    0 Mitglieder finden den Beitrag gut.
  14. #14
    User Pic
    wiesenflieger Mitglied
    Registriert seit
    03.12.2017
    Beiträge
    200
    Beitragswertungen
    12 Beitragspunkte
    Hey cool danke passt. Habe allerdings nur den css teil genommen, nach dem Link für das Bild habe ich das alt="Chania" alt="Chania" zugefügt und das funzt auch
    1 Mitglieder finden den Beitrag gut.
  15. #15
    User Pic
    M.vittel Mitglied
    Registriert seit
    16.11.2018
    Beiträge
    328
    Beitragswertungen
    24 Beitragspunkte
    Haste Gut gemacht, passt gut bei dir in den Header.
    RealLife ... das ist doch das Game mit der geilen Grafik und der scheiss Story
    0 Mitglieder finden den Beitrag gut.
  16. #16
    User Pic
    wiesenflieger Mitglied
    Registriert seit
    03.12.2017
    Beiträge
    200
    Beitragswertungen
    12 Beitragspunkte
    Ja finde ich auch. Der Bildübergang stört noch etwas aber egal.
    0 Mitglieder finden den Beitrag gut.
  17. #17
    User Pic
    Slipi ilch.de Design
    Registriert seit
    19.01.2018
    Beiträge
    938
    Beitragswertungen
    117 Beitragspunkte
    Werde mir das WE das ganze mal ansehen, so das die Bilder sich nicht rein Slidern, sondern wie auf meiner Seite "Support Bereich".

    Slipi
    0 Mitglieder finden den Beitrag gut.
  18. #18
    User Pic
    wiesenflieger Mitglied
    Registriert seit
    03.12.2017
    Beiträge
    200
    Beitragswertungen
    12 Beitragspunkte
    wow klasse. Die pfeile können auch weg lächeln
    0 Mitglieder finden den Beitrag gut.
  19. #19
    User Pic
    Slipi ilch.de Design
    Registriert seit
    19.01.2018
    Beiträge
    938
    Beitragswertungen
    117 Beitragspunkte
    Hab da eine Idee wegen dem Wechsel der Grafiken.

    !!!!!Wichtig vorher ein Backup durchführen!!!!

    Layout index.php, bitte zwischen </nav> und </header> diese Zeillen einfügen damit die Slider Navigation nicht mehr angezeigt wird.

    <div class="container">
            <div class="gaming">
               <div id="carousel-generic" class="carousel slide carousel-fade" data-ride="carousel">
                 <div class="carousel-inner" role="listbox">
                    <div class="item active">
                      <img src="<?=$this->getLayoutUrl('img/slider/slider_1.jpg') ?>" alt="Slider 1">
                    </div>
                    <div class="item">
                       <img src="<?=$this->getLayoutUrl('img/slider/slider_2.jpg') ?>" alt="Slider 2">
                    </div>
                    <div class="item">
                      <img src="<?=$this->getLayoutUrl('img/slider/slider_3.jpg') ?>" alt="Slider 2">
                    </div>
                   </div>
                  </div>
                 </div>
                </div>


    Sollte die Slider Navigation erhalten bleiben, füge die class="carousel fade" hinzu

    <div id="carousel-generic" class="carousel slide carousel-fade" data-ride="carousel">


    Die Index ist fertig, jetzt kommt die style.css, dazu füge dies in deiner style.css ein

    .carousel-inner {
      height: 100%;
    }
    
    /*-- Zoom efekt Anfang--*/
    
    @-webkit-keyframes zoom {
      from {
        -webkit-transform: scale(1, 1);
      }
      to {
        -webkit-transform: scale(1.5, 1.5);
      }
    }
    
    @keyframes zoom {
      from {
        transform: scale(1, 1);
      }
      to {
        transform: scale(1.5, 1.5);
      }
    }
    
    .carousel-inner .item  {
      -webkit-animation: zoom 20s;
      animation: zoom 20s;
    }
    
    /*-- Zoom efekt ende--*/
    
    .carousel-fade .carousel-inner .item {
      opacity: 0;
      transition-property: opacity;
    }
    
    .carousel-fade .carousel-inner .active {
      opacity: 1;
    }
    
    .carousel-fade .carousel-inner .active.left,
    .carousel-fade .carousel-inner .active.right {
      left: 0;
      opacity: 0;
      z-index: 1;
    }
    
    .carousel-fade .carousel-inner .next.left,
    .carousel-fade .carousel-inner .prev.right {
      opacity: 1;
    }
    
    .carousel-fade .carousel-control {
      z-index: 2;
    }
    
    @media all and (transform-3d), (-webkit-transform-3d) {
        .carousel-fade .carousel-inner > .item.next,
        .carousel-fade .carousel-inner > .item.active.right {
          opacity: 0;
          -webkit-transform: translate3d(0, 0, 0);
                  transform: translate3d(0, 0, 0);
        }
        .carousel-fade .carousel-inner > .item.prev,
        .carousel-fade .carousel-inner > .item.active.left {
          opacity: 0;
          -webkit-transform: translate3d(0, 0, 0);
                  transform: translate3d(0, 0, 0);
        }
        .carousel-fade .carousel-inner > .item.next.left,
        .carousel-fade .carousel-inner > .item.prev.right,
        .carousel-fade .carousel-inner > .item.active {
          opacity: 1;
          -webkit-transform: translate3d(0, 0, 0);
                  transform: translate3d(0, 0, 0);
        }
    }


    Habe die änderungen auf meiner Demo Seite eingefühgt working.sd-sdesign.at/


    Zuletzt modifiziert von Slipi am 24.03.2019 - 13:19:41
    0 Mitglieder finden den Beitrag gut.
  20. #20
    User Pic
    wiesenflieger Mitglied
    Registriert seit
    03.12.2017
    Beiträge
    200
    Beitragswertungen
    12 Beitragspunkte
    Danke Slipi für die Mühe, funzt super zwinker
    0 Mitglieder finden den Beitrag gut.
  21. #21
    User Pic
    Slipi ilch.de Design
    Registriert seit
    19.01.2018
    Beiträge
    938
    Beitragswertungen
    117 Beitragspunkte
    Aber der übergang fehlt bei dir, oder hast dies ausgelassen?

    Slipi
    0 Mitglieder finden den Beitrag gut.
  22. #22
    User Pic
    wiesenflieger Mitglied
    Registriert seit
    03.12.2017
    Beiträge
    200
    Beitragswertungen
    12 Beitragspunkte
    ZitatZitat geschrieben von Slipi
    Aber der übergang fehlt bei dir, oder hast dies ausgelassen?

    Slipi

    hmm verstehe nicht was gemeint ist, der slider läuft doch flüssig
    0 Mitglieder finden den Beitrag gut.
  23. #23
    User Pic
    Slipi ilch.de Design
    Registriert seit
    19.01.2018
    Beiträge
    938
    Beitragswertungen
    117 Beitragspunkte
    Musste meine Chache leeren, jetzt sehe ich es.

    Slipi
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu Allgemein

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten