Joomla.it Forum

Joomla! 3 => Joomla! 3 => : repsanmarco 28 Jan 2014, 19:29:48

: [Risolto] Slideshow con protostar
: repsanmarco 28 Jan 2014, 19:29:48

Buongiorno,
sto testando lo slideshow scritto dall'ottimo tonicopy
L'ho configurato in mdo tale da avere anche del testo a destra ma purtroppo le immagini non si ridimensionano diminuendo la larghezza del monitor come dovrebbe essere.

Il codice per la slide è questo:

<div id="mySlide" class="carousel slide">
<div class="carousel-inner">
<div class="item active"><img src="images/slide/1.jpg" alt="" /></div>
<div class="item"><img src="images/slide/2.jpg" alt="" /></div>
<div class="item"><img src="images/slide/3.jpg" alt="" /></div>
<div class="item"><img src="images/slide/4.jpg" alt="" /></div>
</div>
<a class="left carousel-control" href="#mySlide" data-slide="prev">‹ <a class="right carousel-control" href="#mySlide" data-slide="next">›</div>

e ho cambiato il css della classe carousel così:
.carousel {
    position: relative;
    margin-bottom: 18px;
    line-height: 1;
    float:left;
    margin-right:20px;
}


Cosa c'è di sbagliato che le immagini non si ridimensionano come qua:
http://www.joomlacsszengarden.com/joomla35/index.php/slideshow (http://www.joomlacsszengarden.com/joomla35/index.php/slideshow)

: Re:Slideshow con protostar
: maicolstaip 29 Jan 2014, 16:07:11

Ciao repsanmarco,
tonicopi ha nel css questo

:

img {
    border: 0 none;
    height: auto;
    max-width: 100%;
    vertical-align: middle;}
Prova a metterlo in coda ad un tuo css, dovrebbe ridimensionare le immagini.

Ciao!

: Re:Slideshow con protostar
: repsanmarco 30 Jan 2014, 11:07:55

Ciao maicolstaip, bentrovato :-)

ho inserito alla fine del template.css la riga di codice che mi hai incollato ma non è successo niente.
Comunque ho notato che già da prima nel mio cellulare le immagini dello slideshow venivano ridimensionae giuste...l'unico neo è se ridimensiono la finestra di firefox mentre su IE il sistema non funziona proprio.

: Re:Slideshow con protostar
: repsanmarco 07 Feb 2014, 11:33:15

Risolto l'arcano,

si a modificare nel file template.css
queste righe così

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
    display: inline-block;
    width:100%;
    height:auto;
    line-height: 1;
}