1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Nivo slider Div height

Dieses Thema im Forum "CSS" wurde erstellt von PCGamer, 25. April 2012.

  1. PCGamer

    PCGamer Grünschnabel

    Hallo,

    ich möchte eine Slideshow mit der Nivo Slideshow erstellen. Gibt es eine Möglichkeit die Höhe des Divs zu bestimmen? Egal ob ich der ID="slide" eine Höhe definiere es wird laut Firebug immer ein Element Style definiert mit der Höhe des Bildes:(
    Ich möchte z.b. den div ein height von 320px geben und der Rest von Bild soll abgeschieden werden.

    Mein Code
    HTML:
    1.  
    2. <link href="typo3conf/ext/nslideshow/res/css/nivo-slider.css" rel="stylesheet" type="text/css">
    3. <script type='text/javascript' src='typo3conf/ext/nslideshow/res/js/jquery.nivo.slider.js'></script>
    4. <script type="text/javascript">
    5. $(document).ready(function() {
    6.     $('#slider').nivoSlider({
    7.         effect: 'fade', // 'random' oder Übergangseffekte auflisten z.B: 'fold,fade,sliceDown'
    8.         slices: 15, // Anzahl der Streifen für den Slice-Effekt
    9.         boxCols: 8, // Anzahl der Spalten für den Box-Effekt
    10.         boxRows: 4, // Anzahl der Zeilen für den Box-Effekt
    11.         animSpeed: 500, // Geschwindigkeit des Übergangseffektes
    12.         pauseTime: 3000, // Zeit wie lange jedes Bild angezeigt wird
    13.         startSlide: 0, // Nummer des Bildes mit dem gestartet werden soll (die Zählung beginnt mit 0)
    14.         directionNav: false, // Ob Vor- & Zurücknavigation angezeigt werden soll
    15.        directionNavHide: true, // Navigation nur anzeigen wenn der Mauszeiger auf einem Bild ist
    16.        controlNav: false, // Ob eine 1,2,3... Navigation angezeigt werden soll
    17.        controlNavThumbs: false, // Ob Miniaturbilder zur Navigation angezeigt werden sollen
    18.        controlNavThumbsFromRel: false, // Das rel Attribut bei der Navigation mit Miniaturbildern verweden
    19.        controlNavThumbsSearch: '.jpg', // Welche Bilder für die Miniaturbilder verwendet werden sollen
    20.        controlNavThumbsReplace: '_thumb.jpg', // controlNavThumbsSearch hiermit ersetzen um die Namen der Miniaturbilder zu erhalten
    21.        keyboardNav: false, // Ob Links- & Rechtspfeile des Keyboards zur Navigation verwendet werden sollen
    22.        pauseOnHover: true, // Ob die Animation angehalten werden soll wenn der Mauszeiger auf einem Bild ist
    23.        manualAdvance: false, // Ob die Animation nur manuell erfolgt
    24.        captionOpacity: 0.8, // Durchsichtigkeitsfaktor der Bildtexte
    25.        prevText: 'Prev', // Text für die Zurück-Navigation
    26.        nextText: 'Next', // Text für die Vor-Navigation
    27.        randomStart: false, // Ob mit einem zufälligen Bild gestartet werden soll
    28.        beforeChange: function(){}, // Funktion die vor einem Bildübergang aufgerufen wird
    29.        afterChange: function(){}, // Funktion die nach einem Bildübergang aufgerufen wird
    30.        slideshowEnd: function(){}, // Funktion die nach allen Bildübergängen aufgerufen wird
    31.        lastSlide: function(){}, // Funktion die aufgerufen wird wenn das letzte Bild angezeigt wird
    32.        afterLoad: function(){} // Funktion die aufgerufen wird wenn der Slider geladen ist
    33.    });
    34. });
    35.  
    36. <div id="slider" class="nivoSlider" style="height:10px">
    37.   ###IMAGE###
    38. </div>
    39. <div id="infos">###INFO###</div>
    40.  
    Das ###IMAGE### wird durch PHP ersetzt
    PHP:
    1.  
    2. $markerArray["###IMAGE###"] .= "<a href='index.php?id=$link'>" . $this->cObj->IMAGE($tsimage) . "</a>";
    3.  
    Ich könnte zwar das Bild Skalieren, aber der Kunde will das abgeschnieden haben.

    Hoffe auf eure Hilfe.
    Danke im Vorraus
    PCGamer
  2. SpiceLab

    SpiceLab ZENmechanic

    overflow:hidden sorgt dafür, übergroße Inhalte abzuschneiden.
  3. PCGamer

    PCGamer Grünschnabel

    Vielen dank für die Antwort. Leider hilft dieses nicht, da ja der Nivo Slider eine eigene Größe (Bildgröße) als Element.Style des Divs generiert. Um das nochmal anschaulicher zu machen meine CSS und das generierte Element.Style von der Nivo Slideshow:

    Css:
    Code (Text):
    1.  
    2. #slider {
    3.     height: 320px;
    4. }
    5.  
    und das generierte Element.Style:
    HTML:
    1.  
    2. <div style="height: 537px; position: relative; background: url(&quot;typo3temp/pics/631fec7cba.jpg&quot;) no-repeat scroll 0% 0% transparent;" class="nivoSlider" id="slider">
    3.  
    somit wird mein definiertes Style von der id="slide" (height=320px) von den Element.Style (height=537px) überschrieben:( Kann man verhindern das ein Height in Element.Style generiert wird=
  4. SpiceLab

    SpiceLab ZENmechanic

    Die gewünschte Höhe muß im CSS (nivo-slider.css) über diesen Selektor festgelegt werden:

    Code (CSS):
    1.  
    2. .nivoSlider img {
    3.     ...
    4.     height:320px;
    5. }
    Zuletzt bearbeitet: 25. April 2012
  5. PCGamer

    PCGamer Grünschnabel

    Vielen dank:)

Diese Seite empfehlen