[CSS+JQUERY]Aiuto gallery

Baio84 · 26-03-2013, 22:32

Sto cercando di crearmi la mia gallery animata. So che ce ne sono già di compilate con jQuery, ma siccome mi sono appena approcciato a questo linguaggio, voglio prendere un po' di dimestichezza.
Ho abbozzato una gallery. In pratica sotto l'immagine ingrandita ci sono tutte le immagini più piccole che, se ci si passa su il mouse, si ingrandiscono un po'. Se cliccata, apre l'immagine. Il mio è più un problema CSS. Quando passo il mouse sull'immagine piccola, voglio che si ingrandisca e che l'immagine così ingrandita salga sopra a quelle vicine (quindi utilizzo z-index). Il problema è che quando si ingrandisce, l'immagine di destra si sposta verso destra e non rimane ferma.

HTML

Codice HTML:

<!DOCTYPE html>
<html>

<head>
	<link type="text/css" rel="stylesheet" href="prove.css" media="all" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript" src="jquery-1.9.1.js"></script>
	<script type="text/javascript">
	$(document).ready(
			$("#scorrimento img").click(function() {
				$("#scorrimento img").css("width", "50px");
				$(this).css("width", "100px");
				var immag = $(this).attr("src");
				$("#slide img:first").attr("src", "bis"+immag);
			});

			$("#scorrimento img").mouseenter(function() {
				$(this).stop();
				$(this).css({"position":"relative", "z-index":"1"});
				$(this).animate({width:'100px', marginTop:'0', right:'25px'}, 500);
			});

			$("#scorrimento img").mouseleave(function() {
				$(this).stop()
				$(this).animate({width:'50px', marginTop:'19px', right:''}, 500);
				$(this).css({"z-index":"", "position":""});
			});
		});
	</script>
</head>

<body>

	<div id="contenitore">
		<div id="slide">
			<img src="IMMAGINE1GRANDE.jpg">
			<br /><br />
			&lt;
			<div id="scorrimento">
				<img src="IMMAGINE1PICCOLA.jpg">
				<img src="IMMAGINE2PICCOLA.jpg">
				<img src="IMMAGINE3PICCOLA.jpg">
				<img src="IMMAGINE4PICCOLA.jpg">
			</div>
			&gt;
			<br /><br />
		</div>
	</div><!--CONTENITORE-->

</body>

</html>

CSS

Codice:

/* RESET */
div {
	margin: 0;
	padding: 0;
}

/* GENERALE */
div#contenitore {
	width: 1000px;
	height: 500px;
	margin: 0 auto;
}

/* SLIDE */
div#slide {
	width: 800px;
	height: 500px;
	background: #888EEE;
	margin: 0 auto;
	text-align: center;
}
div#slide img {
	width: 500px;
}
div#scorrimento {
	height: 75px;
	padding-left: 220px;
	padding-right: 220px;
	display: inline-block;
	background-color: #333;
}
div#scorrimento img {
	width: 50px;
	margin-top: 19px;
	margin-right: 1px;
	float: left;
}

wingman87 · 27-03-2013, 20:31

Visto che mi sembra che sei già pratico provo a spiegarti la soluzione senza scriverti il codice.
Perché le immagini a destra si spostano quando una a sinistra cambia dimensione? Perché la loro posizione dipende da quello che c'è alla loro sinistra.
Quindi per non farle spostare io farei così:
metti tutte le immagini dentro a dei contenitori, ad esempio dei div, uno per ogni immagine. Dai ai div la stessa dimensione delle immagini e li metti in float e con position relative. Praticamente i div prendono il posto delle immagini che a loro volta finiscono al loro interno.
Infine le immagini, che ora sono dentro ai div, le posizioni in modo assoluto: in questo modo anche se la loro dimensione cambia, i contenitori restano invariati.

Baio84 · 28-03-2013, 08:54

Ti ringrazio. Appena ho tempo provo subito.
E' un'intuizione che è venuta anche a me, perchè guardando qualche sito ho notato che tanti usano le liste (ul, li) per questo genere di cose. Molto probabilmente lo stesso discorso che mi proponi tu con i div, vale anche per questi

EDIT: Dunque, la strada è sicuramente quella giusta, però, quando vado sopra ad ogni immagine per la prima volta, l'immagine mi fa un piccolo scattino a sinistra e poi si allarga. Una volta fatto per ogni immagine, poi ottengo l'effetto desiderato (succede sia coi div che con le liste).

EDIT2: Trovata l'incongruenza. Non so perchè, ma se nel CSS imposto alle immagini position:absolute, quando le visualizzo me le sposta a destra di qualche pixel. Ho risolto facendo impostare position:absolute tramite jQuery

Baio84 · 28-03-2013, 15:00

Ora ho notato un'altra cosa. Quando vado sopra l'immagine, grazie a jQuery modifico width, top e right, per ottenere che si allarghi dando l'effetto che si allarghi dal centro. Però quando esco dall'immagine, non mi dà lo stesso effetto, ma prima mi riposiziona l'immagine nella sua posizione originale, e poi me la rimpicciolisce.
Può essere un'altra incongruenza HTML o un errore di sintassi in jQuery?

Baio84 · 05-04-2013, 18:13

Con questo link penso che spieghi meglio il mio post precedente, in più ho un altro quesito: quando vado ad ingrandire la prima o la terza immagine visibili, L'immagine si ingrandisce ma per colpa dell'overflow:hidden del div, non me la fa vedere tutta, anche se l'immagine ha uno z-index superiore. C'è soluzione a questo problema?

http://www.gbunited.it/test/gallery.html

PS: Spero sia possibile postare un link di esempio

wingman87 · 05-04-2013, 20:56

Quote:

Ora ho notato un'altra cosa. Quando vado sopra l'immagine, grazie a jQuery modifico width, top e right, per ottenere che si allarghi dando l'effetto che si allarghi dal centro. Però quando esco dall'immagine, non mi dà lo stesso effetto, ma prima mi riposiziona l'immagine nella sua posizione originale, e poi me la rimpicciolisce.

Penso sia dovuto al fatto che hai tolto position:absolute

Codice:

$(".anteprima").hover(
	function() {
		$(this).stop();
		$(this).css({"z-index":"10000", "position":"absolute"});
		$(this).animate({width:'100px', right:'-25px', top:'-19px'}, 400);
	},

	function() {
		$(this).stop()
		$(this).animate({right:'0', top:'0', width:'50px'}, 400);
		$(this).css({"z-index":"", "position":""});
	}
);

In sostanza dall'inizio alla fine dell'animazione di zoom position è absolute, mentre nell'animazione di de-zoom è static dall'inizio alla fine.

Quote:

Con questo link penso che spieghi meglio il mio post precedente, in più ho un altro quesito: quando vado ad ingrandire la prima o la terza immagine visibili, L'immagine si ingrandisce ma per colpa dell'overflow:hidden del div, non me la fa vedere tutta, anche se l'immagine ha uno z-index superiore. C'è soluzione a questo problema?

Penso che per risolvere questo problema sia necessario modificare un po' l'interfaccia...

27-03-2013, 20:31	#2
wingman87 Senior Member Iscritto dal: Nov 2005 Messaggi: 2794	Visto che mi sembra che sei già pratico provo a spiegarti la soluzione senza scriverti il codice. Perché le immagini a destra si spostano quando una a sinistra cambia dimensione? Perché la loro posizione dipende da quello che c'è alla loro sinistra. Quindi per non farle spostare io farei così: metti tutte le immagini dentro a dei contenitori, ad esempio dei div, uno per ogni immagine. Dai ai div la stessa dimensione delle immagini e li metti in float e con position relative. Praticamente i div prendono il posto delle immagini che a loro volta finiscono al loro interno. Infine le immagini, che ora sono dentro ai div, le posizioni in modo assoluto: in questo modo anche se la loro dimensione cambia, i contenitori restano invariati.

28-03-2013, 08:54	#3
Baio84 Member Iscritto dal: Apr 2012 Messaggi: 56	Ti ringrazio. Appena ho tempo provo subito. E' un'intuizione che è venuta anche a me, perchè guardando qualche sito ho notato che tanti usano le liste (ul, li) per questo genere di cose. Molto probabilmente lo stesso discorso che mi proponi tu con i div, vale anche per questi EDIT: Dunque, la strada è sicuramente quella giusta, però, quando vado sopra ad ogni immagine per la prima volta, l'immagine mi fa un piccolo scattino a sinistra e poi si allarga. Una volta fatto per ogni immagine, poi ottengo l'effetto desiderato (succede sia coi div che con le liste). EDIT2: Trovata l'incongruenza. Non so perchè, ma se nel CSS imposto alle immagini position:absolute, quando le visualizzo me le sposta a destra di qualche pixel. Ho risolto facendo impostare position:absolute tramite jQuery Ultima modifica di Baio84 : 28-03-2013 alle 14:19.

28-03-2013, 15:00	#4
Baio84 Member Iscritto dal: Apr 2012 Messaggi: 56	Ora ho notato un'altra cosa. Quando vado sopra l'immagine, grazie a jQuery modifico width, top e right, per ottenere che si allarghi dando l'effetto che si allarghi dal centro. Però quando esco dall'immagine, non mi dà lo stesso effetto, ma prima mi riposiziona l'immagine nella sua posizione originale, e poi me la rimpicciolisce. Può essere un'altra incongruenza HTML o un errore di sintassi in jQuery?

05-04-2013, 18:13	#5
Baio84 Member Iscritto dal: Apr 2012 Messaggi: 56	Con questo link penso che spieghi meglio il mio post precedente, in più ho un altro quesito: quando vado ad ingrandire la prima o la terza immagine visibili, L'immagine si ingrandisce ma per colpa dell'overflow:hidden del div, non me la fa vedere tutta, anche se l'immagine ha uno z-index superiore. C'è soluzione a questo problema? http://www.gbunited.it/test/gallery.html PS: Spero sia possibile postare un link di esempio

Strumenti
Mostra una versione stampabile Invia questa pagina per email