Modificare uno slide salvato da internet

[Tristal]

Ciao a tutti! Vorrei fare alcune modifiche ad uno slide salvato da internet, vorrei adattarlo al mio sito ma non riesco a trovare i codici giusti...

questo è lo slide

www.lmadv.it/test/slide/demo.html

Mi servirebbe modificare la largezza a 970px... qualcuno sa aiutarmi?

[Prill]

scarica la versione aggiornata da qui: http://tympanus.net/codrops/2012/10/...slide-revised/ e poi in demo.css modifica il valore per max-width in

.js .gallery {
	width: 100%;
	max-width: 450px;

portandolo a 970px
fai lo stesso anche per main più su

[Tristal]

Ciao, grazie!! Ho scaricato quello aggiornato e modificato come mi hai detto, ma main che dici più su è questo?

.main {
	width: 95%;
	max-width: 970px; 
	padding: 0 10px;
	margin: 0 auto;
	position: relative;
}

un'ultima domanda...mettendo 970px mi ha ingrandito tutto in proporzione, posso rimpicciolire l'area delle miniature? le foto in anteprima un po' piu' piccole... dove dovrei modificare?

[Prill]

Il tutto è gestito dal file javascript esterno, quello andrebbe modificato. ma puoi più semplicemente cambiare il numero minimo delle miniature nel js incorporato nella pagina che comincia dalla riga 81:

<script type="text/javascript">
			
			// example how to integrate with a previewer

			var current = 0,
				$preview = $( '#preview' ),
				$carouselEl = $( '#carousel' ),
				$carouselItems = $carouselEl.children(),
				carousel = $carouselEl.elastislide( {
					current : current,
					minItems : 4,

aumentando quel minItems : 4 (prova con 8)

[Prill]

Oppure, meglio, lascia pure invariato il numero minimo di item e in jqueryelastislide.js modifica il valore evidenziato (riga396, il 100)

_setItemsSize : function() {


// width for the items (%)

var w = this.options.orientation === 'horizontal' ? ( Math.floor( this.$carousel.width() / this.options.minItems ) * 100 ) / this.$carousel.width() : 100;

riducendolo (prova con 50, se poi le miniature sono troppo piccole aumentalo finché trovi le dimensioni che ti soddisfano)

[Tristal]

E' praticamente perfetto!!! Grazie mille!!!

[Prill]

[Tristal]

Ciao!! Chiedo aiuto per altri piccoli particolari

ho eliminato lo sfondo della pagina, messo quindi su biaco e cambiato anche lo sfondo dello slide, da grigio scuro a bianco.. ho provato ad eliminare qualche foto, perchè mi serve sia con poche che con tante foto.

ora chiedo se è possibile fare queste modifiche:

1. centrare le foto piccole
2. a destra in linea alle foto piccole c'e' un'ombra su bianco, è possibile eliminarla?
3. non riesco a far salire tutto un po' più su...

[Prill]

Per quanto riguarda il centrare l'immagine ti basta inserire un margin:0 auto sull'immagine in anteprima, non so se sia impostata in uno dei css o nei file js, oppure se non la trovi aggiungere una dichiarazione di stile in linea:

<div class="image-preview">
	[img]images/large/4.jpg[/img]
</div>

Cancellando i contenuti inseriti nella pagina di esempio prima del div main, il box sale regolarmente, non sono dunque margini su di esso ma eventualmente quello che tu hai nella tua pagina a generare troppo spazio.

Invece l'ombra sulle miniature è generata dal box-shadow in custom.css:

.demo-4 .elastislide-carousel ul li a img {
	border-radius: 10px;
	border: none;
	box-shadow: 0 1px 2px #000;
}

che puoi rimuovere

[Tristal]

Grazie Prill! Ho modificato piu' o meno come volevo io, ora una curiosità...ho provato a vedere se funziona un po' su diversi dispositivi...mac, iphone e ipad..e funziona bene...sul pc con chrome va bene, con explorer no, me lo va vedere con qualche difetto... è possibile risolvere?