✔ Nivo slider Div height

P

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: 
<link href="typo3conf/ext/nslideshow/res/css/nivo-slider.css" rel="stylesheet" type="text/css">
<script type='text/javascript' src='typo3conf/ext/nslideshow/res/js/jquery.nivo.slider.js'></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#slider').nivoSlider({
        effect: 'fade', // 'random' oder Übergangseffekte auflisten z.B: 'fold,fade,sliceDown'
        slices: 15, // Anzahl der Streifen für den Slice-Effekt
        boxCols: 8, // Anzahl der Spalten für den Box-Effekt
        boxRows: 4, // Anzahl der Zeilen für den Box-Effekt
        animSpeed: 500, // Geschwindigkeit des Übergangseffektes
        pauseTime: 3000, // Zeit wie lange jedes Bild angezeigt wird
        startSlide: 0, // Nummer des Bildes mit dem gestartet werden soll (die Zählung beginnt mit 0)
        directionNav: false, // Ob Vor- & Zurücknavigation angezeigt werden soll
        directionNavHide: true, // Navigation nur anzeigen wenn der Mauszeiger auf einem Bild ist
        controlNav: false, // Ob eine 1,2,3... Navigation angezeigt werden soll
        controlNavThumbs: false, // Ob Miniaturbilder zur Navigation angezeigt werden sollen
        controlNavThumbsFromRel: false, // Das rel Attribut bei der Navigation mit Miniaturbildern verweden
        controlNavThumbsSearch: '.jpg', // Welche Bilder für die Miniaturbilder verwendet werden sollen
        controlNavThumbsReplace: '_thumb.jpg', // controlNavThumbsSearch hiermit ersetzen um die Namen der Miniaturbilder zu erhalten
        keyboardNav: false, // Ob Links- & Rechtspfeile des Keyboards zur Navigation verwendet werden sollen
        pauseOnHover: true, // Ob die Animation angehalten werden soll wenn der Mauszeiger auf einem Bild ist
        manualAdvance: false, // Ob die Animation nur manuell erfolgt
        captionOpacity: 0.8, // Durchsichtigkeitsfaktor der Bildtexte
        prevText: 'Prev', // Text für die Zurück-Navigation
        nextText: 'Next', // Text für die Vor-Navigation
        randomStart: false, // Ob mit einem zufälligen Bild gestartet werden soll
        beforeChange: function(){}, // Funktion die vor einem Bildübergang aufgerufen wird
        afterChange: function(){}, // Funktion die nach einem Bildübergang aufgerufen wird
        slideshowEnd: function(){}, // Funktion die nach allen Bildübergängen aufgerufen wird
        lastSlide: function(){}, // Funktion die aufgerufen wird wenn das letzte Bild angezeigt wird
        afterLoad: function(){} // Funktion die aufgerufen wird wenn der Slider geladen ist
    });
});
</script>

<div id="slider" class="nivoSlider" style="height:10px">
  ###IMAGE###
</div>
<div id="infos">###INFO###</div>

Das ###IMAGE### wird durch PHP ersetzt
PHP: 
$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
 
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: 
#slider {
	height: 320px;
}

und das generierte Element.Style:
HTML: 
<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=
 
Die gewünschte Höhe muß im CSS (nivo-slider.css) über diesen Selektor festgelegt werden:

CSS: 
.nivoSlider img {
	...
	height:320px;
}
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück