Like Tree1Danke
  • 1 Beitrag von spicelab
ERLEDIGT
JA
ANTWORTEN
4
ZUGRIFFE
2668
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
  1. #1
    PCGamer ist offline Mitglied Silber
    Registriert seit
    Oct 2011
    Beiträge
    62
    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-Code:
    <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-Code:
    $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. #2
    Avatar von spicelab
    spicelab ist offline ZENmechanic
    Registriert seit
    Feb 2010
    Beiträge
    1.720
    Zitat Zitat von PCGamer Beitrag anzeigen
    Ich möchte z.b. den div ein height von 320px geben und der Rest von Bild soll abgeschieden werden.

    [...]

    Ich könnte zwar das Bild Skalieren, aber der Kunde will das abgeschnieden haben.
    overflow:hidden sorgt dafür, übergroße Inhalte abzuschneiden.
     

  3. #3
    PCGamer ist offline Mitglied Silber
    Registriert seit
    Oct 2011
    Beiträge
    62
    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 :
    1
    2
    3
    
    #slider {
        height: 320px;
    }

    und das generierte Element.Style:
    HTML-Code:
    <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. #4
    Avatar von spicelab
    spicelab ist offline ZENmechanic
    Registriert seit
    Feb 2010
    Beiträge
    1.720
    Die gewünschte Höhe muß im CSS (nivo-slider.css) über diesen Selektor festgelegt werden:

    Code css:
    1
    2
    3
    4
    
    .nivoSlider img {
        ...
        height:320px;
    }
    Geändert von spicelab (25.04.12 um 16:59 Uhr)
    PCGamer bedankt sich. 

  5. #5
    PCGamer ist offline Mitglied Silber
    Registriert seit
    Oct 2011
    Beiträge
    62
    Vielen dank
     

Ähnliche Themen

  1. nivo-slider start erst nach mouse hoover
    Von mike4 im Forum Javascript & Ajax
    Antworten: 5
    Letzter Beitrag: 01.07.11, 09:38
  2. Problem mit Nivo Slider
    Von ciberjoerg im Forum HTML & XHTML
    Antworten: 4
    Letzter Beitrag: 17.09.10, 22:12
  3. RGB Slider
    Von julepul im Forum Flash Plattform
    Antworten: 10
    Letzter Beitrag: 15.11.09, 15:14
  4. Tab Slider in CSS?
    Von deepgreen im Forum CSS
    Antworten: 3
    Letzter Beitrag: 27.06.08, 19:10
  5. Antworten: 0
    Letzter Beitrag: 22.01.07, 20:00