|
|
inviato il 12 Ottobre 2011 ore 11:39
Ciao a tutti...
è alcuni mesi che sto lavorando alla costruzione del mio sito web utilizzando il programma "Microsft visual studio express". Questo andrà a sostituire l'attuale costruito tramite iWeb.
Dopo aver fatto tutte le pagine, ora sono bloccato per quello che riguarda le gallerie. Ho trovato uno script che mi piace molto (http://galleria.aino.se/themes/classic/), ma non riesco ad inserirlo correttamente all'interno della mia pagina.
Cerco qualcuno che conosca il linguaggio html e CSS e che abbia la pazienza di aiutarmi nella costruzione di una galleria, cosicchè io possa usare la stessa come base per tutte le altre. Premetto che sono abbastanza ignorante in materia, ma con pazienza e tanto sudore sono riuscito a farmi tutto il sito da solo. Ma questo scoglio non riesco proprio a superarlo!!
Grazie, Andrea. |
|
|
inviato il 13 Ottobre 2011 ore 11:20
Spero che, tra migliaia di utenti, quello in grado di aiutarmi debba ancora leggere questo messaggio...  |
|
|
inviato il 13 Ottobre 2011 ore 13:06
Non ho capito cosa hai bisogno, una gallerya è gestita da html+css se usi solo il linguaggio html, ma se vuoi una gallery come quella nell'esempio sopra da te citato devi usare javascript o flash(sconsigliatissimo)
<div class="wrapper">
<ul class="immagini">
<li><img src="img1.jpg" alt="..."/></li>
<li><img src="img2.jpg" alt="..."/></li>
<li><img src="img3.jpg" alt="..."/></li>
<li class="end"><img src="img4.jpg" alt="..."/></li>
<li><img src="img5.jpg" alt="..."/></li>
<li><img src="img6.jpg" alt="..."/></li>
<li><img src="img7.jpg" alt="..."/></li>
<li class="end"><img src="img8.jpg" alt="..."/></li>
</ul>
</div>
.wrapper{width:540px}
.immagini{
width:540px;
overflow:hidden
}
.immagini li{
width:120px;
height:120px;
float:left;
margin:0 20px 20px 0;
}
.immagini .end{margin-right:0}
questo è il css con codice html per una griglia dove vanno inserite le immagini
|
|
|
inviato il 13 Ottobre 2011 ore 16:19
Raffaele ho eseguito passo passo le guide (sono 2 sul sito...), ma il linguaggio va in conflitto con quello usato per la costruzione della mia pagina "tipo".
E' un pò complicato da spiegare scrivendo...io praticamente ho lo stesso layout per ogni pagina:
in alto l'immagine intestazione del sito e sotto la riga col menù. Andando ad esempio nella pagina "galleria", sotto al menù, ci sono le varie immagini che rappresentano le categorie. Cliccando sull'immagine si accede alle sotto categorie. Ad esempio dentro la categoria "world" ci sono le sottocategorie "Stati Uniti", "Turchi", "Portogallo", ecc. anche queste rappresentate da delle immagini. Una volta aperta una di queste sottocategorie, dovrebbe aprirsi la pagina con lo script per la visualizzazione delle foto. Il mio problema è che non voglio che il visualizzatore si apra in una pagina vuota, ma vorrei che si aprisse in una pagina "tipo", quindi con l'intestazione e i menù. La difficoltà è qui, in quanto la costruzione della mia pagina (head, body, ecc) va in conflitto con il codice dello script. Insomma, devo capire come inserire lo script all'interno del linguaggio della mia pagina "tipo".
Spero di essermi spiegato...
Eresia lo script da me "usato", prevede l'utilizzo di jquery...non so nient'altro!!
Comunque conlcudo dicendo che io riesco a vedere nell'anteprima del mio sito le foto tramite lo script, ma queste si presentano sulla sinistra dello schermo e comunque il programma mi segnala errori di compatibilità e di linguaggio! Quindi ho cappellato di brutto!!!
Grazie per la disponibilità...
|
|
|
inviato il 13 Ottobre 2011 ore 16:23
bisognerebbe vedere il sorgente del sito
jquery è un framework che utilizza classi, che puoi dare ai tuoi elementi html, che a sua volta sono formattati dai css :P |
|
|
inviato il 13 Ottobre 2011 ore 16:40
Ho usato jquery solo perchè era indicato nelle istruzioni della galleria, poi a cosa serve in modo approfondito non ne ho idea..
Questo è il linguaggio di una pagin "tipo":
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="it" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Andrea Principato photographer</title>
<link href="Stili.css" rel="stylesheet" type="text/css" />
<link href="Stili.css" rel="stylesheet" type="text/css" />
<meta content="Fotografo, photographer, Liguria, " name="keywords" />
<meta content="Sito personale del fotografo Andrea Principato, dove troverete le gallerie dei suoi lavori, articoli e altro." name="description" />
<style type="text/css">
hr {
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body style="color: #FFFFFF; background-color: #000000">
<div id="testata">
</div>
<div id="menù" align="center">
<ul>
<li> <a href="home.htm">Home</a></li>
<li><a href="biografia.htm">Biografia</a></li>
<li><a href="gallerie.htm">Gallerie</a></li>
<li><a href="articoli.htm">Articoli</a></li>
<li><a href="contatti.htm">Contatti</a></li>
<li><a href="links.htm">Links</a></li>
</ul>
</div>
<div id="corpo">
<h3>Home</h3>
<br />
<br />
<br />
</div>
<div id="pièdipagina">
Copyright Andrea Principato - 2011</div>
</body>
</html>
_________________________________________________________________________________________________________________________
Partendo da questa ho costruito le pagina della biografia, delle gallerie, dei contatti, dei link, ecc.
Può esservi utile per aiutarmi? |
|
|
inviato il 13 Ottobre 2011 ore 16:58
qui vedo lo sviluppo della testata con i meta, un menu e un id=corpo ma vuoto, non ci sono immagini :D |
|
|
inviato il 13 Ottobre 2011 ore 17:03
si infatti...questa è una pagina vuota, il layout insomma....
Questo invece è il codice della galleria sugli Stati Uniti (l'unica che ho fatto e che mi segnala errori):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="it" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Andrea Principato photographer</title>
<link href="Stili.css" rel="stylesheet" type="text/css" />
<meta content="Fotografo, photographer, Liguria, " name="keywords" />
<meta content="Sito personale del fotografo Andrea Principato, dove troverete le gallerie dei suoi lavori, articoli e altro." name="description" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="galleria/galleria-1.2.5.min.js"></script>
</head>
<body style="color: #FFFFFF; background-color: #000000">
<div id="testata">
</div>
<div id="menù">
<ul>
<li> <a href="home.htm">Home</a></li>
<li><a href="about.htm">Biografia</a></li>
<li><a href="gallerie.htm">Gallerie</a></li>
<li><a href="articoli.htm">Articoli</a></li>
<li><a href="contactme.htm">Contatti</a></li>
<li><a href="links.htm">Links</a></li>
</ul>
</div>
<div id="corpo" align="center">
<div id="gallery">
<img src="Galleryusa/NewYork(1).jpg" alt="My description" title="My title">
<img src="Galleryusa/NewYork(2).jpg" alt="My description" title="My title">
<img src="Galleryusa/NewYork(3).jpg" alt="My description" title="My title">
<img src="Galleryusa/NewYork(4).jpg" alt="My description" title="My title">
<img src="Galleryusa/NewYork(5).jpg" alt="My description" title="My title">
<img src="Galleryusa/NewYork(6).jpg" alt="My description" title="My title">
<img src="Galleryusa/NewYork(7).jpg" alt="My description" title="My title">
<img src="Galleryusa/NewYork(8).jpg" alt="My description" title="My title">
<img src="Galleryusa/NewYork(9).jpg" alt="My description" title="My title">
<img src="Galleryusa/NewYork(10).jpg" alt="My description" title="My title">
<img src="Galleryusa/NewYork(11).jpg" alt="My description" title="My title">
<img src="Galleryusa/NewYork(12).jpg" alt="My description" title="My title">
<img src="Galleryusa/NewYork(13).jpg" alt="My description" title="My title">
<img src="Galleryusa/NewYork(14).jpg" alt="My description" title="My title">
<img src="Galleryusa/NewYork(15).jpg" alt="My description" title="My title">
<img src="Galleryusa/NewYork(16).jpg" alt="My description" title="My title">
<img src="Galleryusa/NewYork(17).jpg" alt="My description" title="My title">
</div>
<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
$("#gallery").galleria({
width: 900,
height: 600
});
</script>
</div>
</html>
|
|
|
inviato il 13 Ottobre 2011 ore 18:30
Non è on-line, sto aspettando di finire questo sito per caricarlo sul server al posto del vecchio. Come faccio a farvi avere ciò che vi serve? Posso caricare questa singola pagina sul mio dominio a prescindere dal sito attualmente on-line?
Cavolo mi dispiace essere così ignorante in materia!!! |
|
|
inviato il 13 Ottobre 2011 ore 20:07
Ok grazie....cosa devo metterti nella cartella zippata? La pagina html + le foto inserite nella galleria + l'immagine dell'intestazione + gquery + lo script galleria? |
|
|
inviato il 13 Ottobre 2011 ore 22:49
cosi va meglio, pero bisogna vedere com'è formattati l'id=gallery, lo trovi qui:
Stili.css
se lo apri c'è una voce
#gallery{}
ddentro le parentesi graffe formatti la tua gallery!
se la vuoi a griglia puoi copiare il css sopra, il top sarebbe vederlo online per capire bene il comportamento e un esempio di sito/gallery come la vuoi tu  |
|
|
inviato il 14 Ottobre 2011 ore 15:10
Raffaele ti ho appena mandato la mail con la cartella zippata...se ti serve altro fammi sapere. Grazie...
Andrea ho idea che la gallery non sia formattata nei CSS in quanto se apro il file Stili.css non compare la voce gallery.
Questo è il codice del mio Stili.css:
input {
width: 200px;
border: 1px solid #0BF04A;
}
textarea {
width: 200px;
border: 1px solid #0BF057;
}
.bottone {
width: 100px;
margin-left: 100px;
}
.divform {
margin-top: 3px;
margin-bottom: 3px;
}
#corpo h3 {
color: #0BF057;
padding-top: 10px;
padding-bottom: 10px;
}
#testata {
margin: 10px auto 20px auto;
width: 700px;
height: 150px;
background-image: url('Webcast/Immagini/Titolo.png');
}
#menù {
margin-right: auto;
margin-left: auto;
width: 700px;
padding-top: 20px;
padding-bottom: 15px;
text-align: center;
}
#corpo {
margin-right: auto;
margin-left: auto;
width: 700px;
padding-left: 22px;
}
#pièdipagina {
margin-right: auto;
margin-left: auto;
width: 700px;
text-align: center;
background-color: #0BF057;
color: #000000;
}
body {
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
font-size: 12px;
background-color: #000000;
}
ul {
padding: 0px;
margin: 0px;
}
li {
list-style-type: none;
display: inline;
padding-left: 10px;
font-weight: bold;
right: auto;
left: auto;
padding-right: 50px;
}
a {
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
font-size: 14px;
}
a:visited {
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
font-size: 14px;
}
a:hover {
color: #0BF057;
text-decoration: none;
font-weight: bold;
font-size: 14px;
}
h3 {
padding: 0px;
margin: 0px;
font-size: 20px;
}
label {
width: 100px;
display: block;
float: left;
}
h4 {
font-size: 18px;
color: #FF0000;
}
|
Che cosa ne pensi di questo argomento?
Vuoi dire la tua? Per partecipare alla discussione iscriviti a JuzaPhoto, è semplice e gratuito!
Non solo: iscrivendoti potrai creare una tua pagina personale, pubblicare foto, ricevere commenti e sfruttare tutte le funzionalità di JuzaPhoto.
Con oltre 259000 iscritti, c'è spazio per tutti, dal principiante al professionista. |
Metti la tua pubblicità su JuzaPhoto (info) |
JuzaPhoto contiene link affiliati Amazon ed Ebay e riceve una commissione in caso di acquisto attraverso link affiliati.
