Miniature con immagine realativa, base. Aiuto!

**Sergio74** · 14-01-2013, 18:24

Salve.
Da giorni cerco di implementare un codice con i frame per poter gestire una galleria di immagini. Dopo essermi arreso ho deciso di prendere in considerazione il javascript, di cui non so nulla e per il quale i miei mal di testa sembrano non essere compatibili :facepalm
La galleria è estremamente semplice e si rifà a questo sito:http://www.susandewitt.net/mirage.html
Miniature con relativo collegamento nella stessa pagina.
E' possibile scrivere un codice javascript estremamente semplice per ottenere questa galleria?
grazie!

sergio

**br1** · 14-01-2013, 22:50

E finora non ti e' venuto in mente di esaminare e duplicare il codice di quella pagina?

**Sergio74** · 14-01-2013, 22:55

Certo che si, ma riportato su dreamweaver crea non pochi problemi...

**carlomarx** · 14-01-2013, 23:49

https://developer.mozilla.org/@api/d...ed-gallery.zip
(non usa javascript, solo CSS)

**br1** · 15-01-2013, 00:21

Originariamente inviato da Sergio74
Certo che si, ma riportato su dreamweaver crea non pochi problemi...

Ah, ecco.

Potrai cominciare a fare qualche pagina come la vuoi tu e non come vuole lui quando lo abbandonerai... personalmente mi rifiuto perfino di pensare che esiste

**Sergio74** · 15-01-2013, 21:08

Si, immaginavo che non fosse il massimo...ed ora ho la conferma.
Grazie carlo per la dritta, ma non è proprio quello che cercavo

**carlomarx** · 16-01-2013, 02:41

Originariamente inviato da Sergio74
Grazie carlo per la dritta, ma non è proprio quello che cercavo

Boh. Quella che ti giro è la copia esatta (clone) della tua galleria resa col metodo che ti ho postato (ovvero solo CSS). Te la spezzetto in due blocchi di codice che devi ricongiungere, altrimenti il codice HTML è incompleto. Poi mi spiegherai perché non andava bene…

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Susan de Witt - Mirage</title>
<style type="text/css">

body {
	background-color: #D8C9A6; 
}

a:link, a:visited, a:active {
	color: #000000; 
	text-decoration: none; 
}

a:hover {
	color: #FFFFFF;
}

.copy {
	font-family: Courier;
	font-size: 10pt;
	color: #000000;
	text-align: right;
}

div.gallery {
	position: relative;
	width: 400px;
	height: auto;
	padding: 0;
}

div.gallery figure {
	display: inline-block;
	margin: 0;
	padding: 0;
}

div.gallery figure img {
	position: absolute;
	top: 0;
	left: 450px;
	display: none;
}

div.gallery figure label > img {
	position: static;
	display: inline;
	cursor: pointer;
}

div.gallery input[type="radio"] {
	display: none;
}

div.gallery input[type="radio"]:checked ~ img {
	display: block;
}
</style>
</head>

<body>

<div class="gallery">
  <figure>
    <label for="img_1"></label>
    <input type="radio" name="img-list" id="img_1" />
    
  </figure>
  <figure>
    <label for="img_2"></label>
    <input type="radio" name="img-list" id="img_2" />
    
  </figure>
  <figure>
    <label for="img_3"></label>
    <input type="radio" name="img-list" id="img_3" />
    
  </figure>
  <figure>
    <label for="img_4"></label>
    <input type="radio" name="img-list" id="img_4" />
    
  </figure>
  <figure>
    <label for="img_5"></label>
    <input type="radio" name="img-list" id="img_5" />
    
  </figure>
  <figure>
    <label for="img_6"></label>
    <input type="radio" name="img-list" id="img_6" />
    
  </figure>
  <figure>
    <label for="img_7"></label>
    <input type="radio" name="img-list" id="img_7" />
    
  </figure>
  <figure>
    <label for="img_8"></label>
    <input type="radio" name="img-list" id="img_8" />
    
  </figure>
  <figure>
    <label for="img_9"></label>
    <input type="radio" name="img-list" id="img_9" />
    
  </figure>
  <figure>
    <label for="img_10"></label>
    <input type="radio" name="img-list" id="img_10" />
    
  </figure>
  <figure>
    <label for="img_11"></label>
    <input type="radio" name="img-list" id="img_11" />
    
  </figure>
  <figure>
    <label for="img_12"></label>
    <input type="radio" name="img-list" id="img_12" />
    
  </figure>
  <figure>
    <label for="img_13"></label>
    <input type="radio" name="img-list" id="img_13" />
    
  </figure>
  <figure>
    <label for="img_14"></label>
    <input type="radio" name="img-list" id="img_14" />
    
  </figure>
  <figure>
    <label for="img_15"></label>
    <input type="radio" name="img-list" id="img_15" />
    
  </figure>
  <figure>
    <label for="img_16"></label>
    <input type="radio" name="img-list" id="img_16" />
    
  </figure>
  <figure>
    <label for="img_17"></label>
    <input type="radio" name="img-list" id="img_17" />
    
  </figure>
  <figure>
    <label for="img_18"></label>
    <input type="radio" name="img-list" id="img_18" />
    
  </figure>
  <figure>
    <label for="img_19"></label>
    <input type="radio" name="img-list" id="img_19" />
    
  </figure>
  <figure>
    <label for="img_20"></label>
    <input type="radio" name="img-list" id="img_20" />
    
  </figure>
  <figure>
    <label for="img_21"></label>
    <input type="radio" name="img-list" id="img_21" />
    
  </figure>
  <figure>
    <label for="img_22"></label>
    <input type="radio" name="img-list" id="img_22" />
    
  </figure>
  <figure>
    <label for="img_23"></label>
    <input type="radio" name="img-list" id="img_23" />
    
  </figure>
  <figure>
    <label for="img_24"></label>
    <input type="radio" name="img-list" id="img_24" />
    
  </figure>
  <figure>
    <label for="img_25"></label>
    <input type="radio" name="img-list" id="img_25" />
    
  </figure>
  <figure>
    <label for="img_26"></label>
    <input type="radio" name="img-list" id="img_26" />
    
  </figure>
  <figure>
    <label for="img_27"></label>
    <input type="radio" name="img-list" id="img_27" />
    
  </figure>
  <figure>
    <label for="img_28"></label>
    <input type="radio" name="img-list" id="img_28" />
    
  </figure>
  <figure>
    <label for="img_29"></label>
    <input type="radio" name="img-list" id="img_29" />
    
  </figure>
  <figure>
    <label for="img_30"></label>
    <input type="radio" name="img-list" id="img_30" />
    
  </figure>
  <figure>
    <label for="img_31"></label>
    <input type="radio" name="img-list" id="img_31" />
    
  </figure>
  <figure>
    <label for="img_32"></label>
    <input type="radio" name="img-list" id="img_32" />
    
  </figure>
  <figure>
    <label for="img_33"></label>
    <input type="radio" name="img-list" id="img_33" />
    
  </figure>
  <figure>
    <label for="img_34"></label>
    <input type="radio" name="img-list" id="img_34" />
    
  </figure>
  <figure>
    <label for="img_35"></label>
    <input type="radio" name="img-list" id="img_35" />
    
  </figure>
  <figure>
    <label for="img_36"></label>
    <input type="radio" name="img-list" id="img_36" />
    
  </figure>
  <figure>
    <label for="img_37"></label>
    <input type="radio" name="img-list" id="img_37" />
    
  </figure>

[CONTINUA NEL MESSAGGIO SUCCESSIVO…]

**carlomarx** · 16-01-2013, 02:42

[CONTINUA DAL MESSAGGIO PRECEDENTE…]

codice:

  <figure>
    <label for="img_38"></label>
    <input type="radio" name="img-list" id="img_38" />
    
  </figure>
  <figure>
    <label for="img_39"></label>
    <input type="radio" name="img-list" id="img_39" />
    
  </figure>
  <figure>
    <label for="img_40"></label>
    <input type="radio" name="img-list" id="img_40" />
    
  </figure>
  <figure>
    <label for="img_41"></label>
    <input type="radio" name="img-list" id="img_41" />
    
  </figure>
  <figure>
    <label for="img_42"></label>
    <input type="radio" name="img-list" id="img_42" />
    
  </figure>
  <figure>
    <label for="img_43"></label>
    <input type="radio" name="img-list" id="img_43" />
    
  </figure>
  <figure>
    <label for="img_44"></label>
    <input type="radio" name="img-list" id="img_44" />
    
  </figure>
  <figure>
    <label for="img_45"></label>
    <input type="radio" name="img-list" id="img_45" />
    
  </figure>
  <figure>
    <label for="img_46"></label>
    <input type="radio" name="img-list" id="img_46" />
    
  </figure>
  <figure>
    <label for="img_47"></label>
    <input type="radio" name="img-list" id="img_47" />
    
  </figure>
  <figure>
    <label for="img_48"></label>
    <input type="radio" name="img-list" id="img_48" />
    
  </figure>
  <figure>
    <label for="img_49"></label>
    <input type="radio" name="img-list" id="img_49" />
    
  </figure>
  <figure>
    <label for="img_50"></label>
    <input type="radio" name="img-list" id="img_50" />
    
  </figure>
  <figure>
    <label for="img_51"></label>
    <input type="radio" name="img-list" id="img_51" />
    
  </figure>
  <figure>
    <label for="img_52"></label>
    <input type="radio" name="img-list" id="img_52" />
    
  </figure>
  <figure>
    <label for="img_53"></label>
    <input type="radio" name="img-list" id="img_53" />
    
  </figure>
  <figure>
    <label for="img_54"></label>
    <input type="radio" name="img-list" id="img_54" />
    
  </figure>
  <figure>
    <label for="img_55"></label>
    <input type="radio" name="img-list" id="img_55" />
    
  </figure>
  <figure>
    <label for="img_56"></label>
    <input type="radio" name="img-list" id="img_56" />
    
  </figure>
  <figure>
    <label for="img_57"></label>
    <input type="radio" name="img-list" id="img_57" />
    
  </figure>
  <figure>
    <label for="img_58"></label>
    <input type="radio" name="img-list" id="img_58" />
    
  </figure>
  <figure>
    <label for="img_59"></label>
    <input type="radio" name="img-list" id="img_59" />
    
  </figure>
  <figure>
    <label for="img_60"></label>
    <input type="radio" name="img-list" id="img_60" />
    
  </figure>
  <figure>
    <label for="img_61"></label>
    <input type="radio" name="img-list" id="img_61" />
    
  </figure>
  <figure>
    <label for="img_62"></label>
    <input type="radio" name="img-list" id="img_62" />
    
  </figure>
  <figure>
    <label for="img_63"></label>
    <input type="radio" name="img-list" id="img_63" />
    
  </figure>
  <figure>
    <label for="img_64"></label>
    <input type="radio" name="img-list" id="img_64" />
    
  </figure>
  <figure>
    <label for="img_65"></label>
    <input type="radio" name="img-list" id="img_65" />
    
  </figure>
  <figure>
    <label for="img_66"></label>
    <input type="radio" name="img-list" id="img_66" />
    
  </figure>
  <figure>
    <label for="img_67"></label>
    <input type="radio" name="img-list" id="img_67" />
    
  </figure>
  <figure>
    <label for="img_68"></label>
    <input type="radio" name="img-list" id="img_68" />
    
  </figure>
  <figure>
    <label for="img_69"></label>
    <input type="radio" name="img-list" id="img_69" />
    
  </figure>
  <figure>
    <label for="img_70"></label>
    <input type="radio" name="img-list" id="img_70" />
    
  </figure>
  <figure>
    <label for="img_71"></label>
    <input type="radio" name="img-list" id="img_71" />
    
  </figure>
  <figure>
    <label for="img_72"></label>
    <input type="radio" name="img-list" id="img_72" />
    
  </figure>
  <figure>
    <label for="img_73"></label>
    <input type="radio" name="img-list" id="img_73" />
    
  </figure>
  <figure>
    <label for="img_74"></label>
    <input type="radio" name="img-list" id="img_74" />
    
  </figure>
  <figure>
    <label for="img_75"></label>
    <input type="radio" name="img-list" id="img_75" />
    
   </figure>
   <figure>
    <label for="img_76"></label>
    <input type="radio" name="img-list" id="img_76" />
    
  </figure>
  <figure>
    <label for="img_77"></label>
    <input type="radio" name="img-list" id="img_77" />
    
  </figure>
  <figure>
    <label for="img_78"></label>
    <input type="radio" name="img-list" id="img_78" />
    
  </figure>

  <p class="copy">Artist Statement

  Home</p>
</div>

</body>
</html>

**Sergio74** · 16-01-2013, 13:52

Non so come ringraziarti...Di dove sei??

Un altra cosa, e so di chiedere troppo: come faccio a centrare l' immagine ingrandita nella pagina indipendentemente dalla risoluzione del monitor?

Discussione: Miniature con immagine realativa, base. Aiuto!

Strumenti discussione

Ricerca discussione

Visualizza

Miniature con immagine realativa, base. Aiuto!

Permessi di invio