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 Mitglied

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

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

    PCGamer Mitglied

    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. #slider {
    2.     height: 320px;
    3. }
    und das generierte Element.Style:
    HTML:
    1. <div style="height: 537px; position: relative; background: url(&quot;typo3temp/pics/631fec7cba.jpg&quot;) no-repeat scroll 0% 0% transparent;" class="nivoSlider" id="slider">
    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 Premium-User

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

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

    PCGamer Mitglied

    Vielen dank:)