[html - php]creare pagina con contenuto dinamico php [Archivio]

View Full Version : [html - php]creare pagina con contenuto dinamico php

lupin87

11-09-2009, 19:04

salve a tutti,devo creare una pagina web in cui in alto ci sono una decina di foto thumbnails(miniaturizzate) e devo fare in modo che cliccando su una thumbnail di queste,sotto appare la foto ad immagine standard(nella stessa pagina)..come faccio?trattandosi di contenuto dinamico e trattandosi di memorizzare il link clickato,indubbiamente dovrò memorizzare il valore nell' array superglobale $post(o $get)...però non ho creato un modulo e non so come simulare il submit del modulo...cioè praticamente invece di eseguire il contenuto dinamico cliccando sul pulsante di tipo submit devo eseguire il contenuto dinamico cliccando sull' immagine....qualcuno lo sa fare?

lupin87

12-09-2009, 09:29

Y3PP4

12-09-2009, 09:50

lupin87

12-09-2009, 14:11

Se ho ben capito cosa vuoi fare, l'importante è caricare le immagini nella pagina, poi le miniature le puoi ingrandire nella pagina con javascript (come di solito si usa). PHP non c'entra nulla con gli effetti grafici, nemmeno HTML. Il primo perchè è un linguaggio server-side quindi finito il suo lavoro, restituisce l'HTML e non fà nient'altro (elaborerà solo altri dati, e scomodarlo inutilmente è solo un danno prestazionale). HTML per definizione non può essendo un semplice linguaggio di markup statico.

Prova a dare una occhiata a questo link (http://highslide.com/), se è quello che cerchi segui la documentazione e buon lavoro!

Ciao!

grazie del sito, è utile,ma il sito che sto facendo è per l' esame di programmazione per il web e non per un azienda..quindi lo scopo non è quello di far un sito estremamente bello e carino,ma quello di avere un buon voto e di dimostrare al professore che so utilizzare javascript e php...

Y3PP4

12-09-2009, 21:21

grazie del sito, è utile,ma il sito che sto facendo è per l' esame di programmazione per il web e non per un azienda..quindi lo scopo non è quello di far un sito estremamente bello e carino,ma quello di avere un buon voto e di dimostrare al professore che so utilizzare javascript e php...

Beh in questo caso, crei il div superiore in cui ci metti le miniature, poi il resto della pagina -che suppongo sia bianca, ovvero senza contenuto- lo usi per mostrare l'immagine. Mi spiego.

Carichi l'immagine nella pagina, nella parte superiore tramite CSS o brutalmente (a mo' anni 90) usando gli attributi height e width del tag <img> ne imposti una piccola dimensione. (volendo potresti fare un array in php e gli "dici" per ogni elemento dell'array stampa <img src="---" height...> e in questo modo ci metti la parte PHP. Quindi o sfrutti l'attributo onClick sul tag immagine (ma non appare la manina come per i link) o metti attorno a ogni singolo tag immagine i tag <a href="#" onClick="funzioneJS();"> </a>(cosi appare la manina, le immagini potrebbero mostrare un bordo blu ma risolvi coi CSS o comunque i dovuti parametri style) e la funzioneJS(); semplicemente manipola il DOM.

Lo schema della tua pagina potrebbe essere:
<html>
<head></head>
<body>
<div id="thumbnails"> .... </div>
<div id="image-container"> </div> 
</body>
</html>

Al click viene invocata la funzione funzioneJS(); che per prima cosa ottiene l'elemento in cui mostrare la immagine intera con un bel getElementById("image-container");
Quindi usi il metodo dell'elemento ottenuto "innerHTML" e scrivi il nuovo tag dell'immagine (senza riduzioni di dimensioni).

In questo caso i tag src puoi o ottenerli con Javascript (recuperando il valore del tag src del thumbnail) oppure con PHP. Potresti voler fare una funzione che accetta come parametro il valore da mettere al tag src del nuovo elemento.

Spiegare tutto il funzionamento in un singolo post di questi elemento è troppo -almeno per me-. Ma in rete trovi veramente tanto.

Il funzionamento base è questo: clicchi sull'immagine->invoco la funzione->modifica il DOM e crea il nuovo elemento immagine->vedo la nuova immagine.

Volendo complicare le cose potresti fare un timer oppure gestire tramite un'altro evento (magari il click sull'immagine grande) e far "sparire" nuovamente l'immagine ripristinando il div vuoto.

Se non sono stato chiaro -cosa probabile col casino che ho in casa stasera- chiedi e risponderò.

Ciao e buona serata.

lupin87

13-09-2009, 11:13

http://www.webalice.it/francesco.altamura/foto.jpg

allora voglio fare le seguenti cose:
1)voglio inserire l' immagine che grande(cioè l' immagine che si clicca) in alto e le miniature sotto;

2)cliccando le miniature sotto devo modificare l' immagine in alto(che nell' imamgine sta in basso);

3)le miniature sotto non sono le foto grandi ma rimpicciolite,ma sono altre foto contenute in una directory diversa dalle foto grandi rimpicciolite ...cioè le miniature che vengono visualizzate sotto non sono le foto grandi ma rimpicciolite,sono delle foto diverse da quelle grandi rimpicciolite in precedenza tramite un programma di fotoritocco in modo che quando si apre quella pagina non bisogna aspettare molto tempo..usando questa soluzione vengono caricate solo le miniature che son piccole nativamente e il caricamento della pagina avviene in tempi minori)e il caricamento della foto grande avviene solo quando si clicca quella piccola...spero di essere stato chiaro.

ti allego anche il codice di quella pagina( quella pagina è un frame e non una pagina vera e propria):

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Ristopizza </title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
<script language="JavaScript" type="text/javascript">
<!--
var i;
for (i=0;i<14;i++){
if (i==7) document.writeln("<br>");
document.writeln("<img src = \"foto/" + (i+1) + ".jpg\" width = \"110\" height = \"90\" alt=\"foto mancante\" />");
}
</script>
</head>
<body style = "text-align:center;">

<img src = "foto/1.jpg" alt="foto mancante" />
</body>
</html>

CozzaAmara

13-09-2009, 12:52

Senza stare ad impazzire con JS.

Scaricati JQuery e poi usa: http://leandrovieira.com/projects/jquery/lightbox/

Ci metti poco ed ottieni un ottimo effetto.

lupin87

13-09-2009, 16:06

Senza stare ad impazzire con JS.

Scaricati JQuery e poi usa: http://leandrovieira.com/projects/jquery/lightbox/

Ci metti poco ed ottieni un ottimo effetto.

grazie del sito, è utile,ma il sito che sto facendo è per l' esame di programmazione per il web e non per un azienda..quindi lo scopo non è quello di far un sito estremamente bello e carino,ma quello di avere un buon voto e di dimostrare al professore che so utilizzare javascript e php...

:read:

Y3PP4

14-09-2009, 16:47

Non ho ben capito come è messa la situazione.
Comunque se la tua pagina è composta da due frame -comunque non necessario per questo lavoro- basta che inverti l'ordine dei frames per avere la situazione al rovescio.
Se i thumbnails e il div in cui mostrare l'immagine nelle dimensioni reali sono nello stesso frame, basta mettere il codice js che stampa i thumbnails sotto il div per fargli stampare li la lista delle immagini. Cosa che credo tu voglia fare con:
<script language="JavaScript" type="text/javascript">
</script>

Riguardo la soluzione al tuo problema, rileggiti il mio precedente post, in cui ti illusto due metodi per scrivere una funzioncina che, una volta invocata sovrascriva il contenuto vuoto del div con il tag immagine con il giusto attributo src, in modo da mostrare l'immagine grande.
Il principio è, mi ripeto, invocare la funzione (tramite onClick), che a sua volta ottenga tramite getElementByName o Id (in base a come vuoi riferirti), quindi usare il metodo innerHTML per scriverci dentro <img src=..../>
In questo modo avrai l'immagine visualizzata. Non sò come sono disposti gli url delle tue immagini rispetto ai thumbnails, per semplificare le cose basta che fai accettare un parametro alla funzione in cui specifichi l'url della immagine, oppure crei un indice nella funzione con le url delle immagini grandi e passi solo il numero dell'indice. Volendo questo indice potresti generarlo dinamicamente con php con un ciclo for.

Se comunque hai grandi lacune, una rapida lettura di documentazione inerente la manipolazione DOM e una base dell'HTML sono d'obbligo per capire che stai facendo.

Ciao!

PS. questo (http://antirez.com/articoli/spaghettiajax.html) può esserti di grandissimo aiuto, guarda i primi esempi.

lupin87

14-09-2009, 18:28

y3pp4,poco ci manca che mi suicidi:
questo è il codice:
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<link rel = "stylesheet" type = "text/css" href = "style.css" />
<script language="JavaScript" type="text/javascript">

document.writeln("<div id = \"fotocent\"><img src = \"foto/1.jpg\" alt=\"foto mancante\" /></div><br />");
var i;
for (i=0;i<14;i++){
if (i==7) document.writeln("<br />");
document.writeln("<img onClick = \"disegna(" + (i+1) + ")\" src = \"foto/" + (i+1) + ".jpg\" width = \"110\" height = \"90\" alt=\"foto mancante\" />");
}
</script>

</head>
<body style = "text-align:center;" >
<script language="JavaScript" type="text/javascript">
function disegna(numer){
var e = document.getElementById("fotocent");
e.innerHTML = "<img src = \"foto/" + numer + ".jpg\" alt=\"foto mancante\" /><br />";

var i;
for (i=0;i<14;i++){
if (i==7) document.writeln("<br />");
document.writeln("<img onClick = \"disegna(" + (i+1) + ")\" src = \"foto/" + (i+1) + ".jpg\" width = \"110\" height = \"90\" alt=\"foto mancante\" />");
}
}
</script>
</body>
</html>

non so dov'è l' errore,praticamente quando clicco sull' immagine l' immagine grande che sta in alto scompare ed appaiono solo le miniature a sfondo bianco pure

lupin87

14-09-2009, 18:32

praticamente il funzionamento che io vorrei fare è il seguente:all 'inizio esce l' immagine 1,poi ogni volta che si clicca una miniatura viene chiamata la funzione disegna

Y3PP4

14-09-2009, 20:45

y3pp4,poco ci manca che mi suicidi Non è difficile, ma dovresti trovare la voglia di leggerti un po' di documentazione, basta anche una semplice guida reperibile su html.it o mr.webmaster.

Comunque, metti l'HTML tra gli appositi tag, altrimenti si capisce poco e niente

questo è il codice:
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<link rel = "stylesheet" type = "text/css" href = "style.css" />
<script language="JavaScript" type="text/javascript">

document.writeln("<div id = \"fotocent\"><img src = \"foto/1.jpg\" alt=\"foto mancante\" /></div><br />");
var i;
for (i=0;i<14;i++){
if (i==7) document.writeln("<br />");
document.writeln("<img onClick = \"disegna(" + (i+1) + ")\" src = \"foto/" + (i+1) + ".jpg\" width = \"110\" height = \"90\" alt=\"foto mancante\" />");
}
</script>

</head>
<body style = "text-align:center;" >
<script language="JavaScript" type="text/javascript">
function disegna(numer){
var e = document.getElementById("fotocent");
e.innerHTML = "<img src = \"foto/" + numer + ".jpg\" alt=\"foto mancante\" /><br />";

var i;
for (i=0;i<14;i++){
if (i==7) document.writeln("<br />");
document.writeln("<img onClick = \"disegna(" + (i+1) + ")\" src = \"foto/" + (i+1) + ".jpg\" width = \"110\" height = \"90\" alt=\"foto mancante\" />");
}
}
</script>
</body>
</html>

Primo noto che questo codice:
var i;
for (i=0;i<14;i++){
if (i==7) document.writeln("<br />");
document.writeln("<img onClick = \"disegna(" + (i+1) + ")\" src = \"foto/" + (i+1) + ".jpg\" width = \"110\" height = \"90\" alt=\"foto mancante\" />");
}
è ripetuto due volte nel file.

Secondo non vedo l'elemento fotocent che cerchi con getElementById.
Per un maggiore ordine ti consiglio di creare le dovute funzioni nell'header e poi semplicemente le invochi dove serve. Se sviluppi template in collaborazione con un designer questo modo di scrivere markup non aiuta di certo.
Se vuoi un altro consiglio, non usare le tabulazioni, o comunque non metterne a bizzeffe, ne basta una per ogni indentazione (anche se di solito, personalmente uso 4 spaziature al posto del tab -cosa che consentono moltissimi editor-).

lupin87

15-09-2009, 06:42

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Ristopizza La Darsena - Molfetta</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
<script language="JavaScript" type="text/javascript">

document.writeln("<div id = \"fotocent\"><img src = \"foto/1.jpg\" alt=\"foto mancante\" /></div><br />");
var i;

for (i=0;i<14;i++){
if (i==7) document.writeln("<br />");
document.writeln("<img onClick = \"disegna(" + (i+1) + ")\" src = \"foto/" + (i+1) + ".jpg\" width = \"110\" height = \"90\" alt=\"foto mancante\" />");
}

</script>

</head>
<body style = "text-align:center;" >
<script language="JavaScript" type="text/javascript">
function disegna(numer){
var e = document.getElementById("fotocent");
e.innerHTML = "<img src = \"foto/" + numer + ".jpg\" alt=\"foto mancante\" /><br />";

var i;
for (i=0;i<14;i++){
if (i==7) document.writeln("<br />");
document.writeln("<img onClick = \"disegna(" + (i+1) + ")\" src = \"foto/" + (i+1) + ".jpg\" width = \"110\" height = \"90\" alt=\"foto mancante\" />");
}
}
</script>
</body>
</html>

dunque la parte di codice che sta nello head viene eseguita al caricamento della pagina...da quel momento in poi ogni click sulla miniatura chiama la funzione disegna che più o meno è simile..poco importa la ridondanza di codice(magari poi creao un altra function) ma il problema sta nell' inner HTML perchè ieri controllai i parametri numerici che vengono passati quando si fa click e questi ci sono e sono corretti

le istruzioni

var e = document.getElementById("fotocent");
e.innerHTML = "<img src = \"foto/" + numer + ".jpg\" alt=\"foto mancante\" /><br />";

stanno all' inizio della procedura disegna

lupin87

15-09-2009, 06:48

Y3PP4

15-09-2009, 10:24

lol adesso funziona,mi confondevo e mettevo 2 volte il ciclo for che creava le immagini perchè ero convinto che dall' innertext in poi la pagina veniva svuotata completamente e poi la dovevo ridisegnare invece no,viene ridisegnata solo l' immagine con l' id...che cervello distorto il mio...grazie per l' aiuto

Mi autoquoto:

Primo noto che questo codice:

var i;
for (i=0;i<14;i++){
if (i==7) document.writeln("<br />");
document.writeln("<img onClick = \"disegna(" + (i+1) + ")\" src = \"foto/" + (i+1) + ".jpg\" width = \"110\" height = \"90\" alt=\"foto mancante\" />");
}

è ripetuto due volte nel file.

:)

Comunque il mio consiglio è creare sempre funzioni, per avviarla poi automaticamente al caricamento della pagina includi nel tag body (quello di apertura) l'attributo onload, che dice "al caricamento del body avvia la funzione".

Ricorda, anche se ora non ti serve, che quando dovrai modificare degli elementi della pagina (manipolazione DOM) per non avere errori e bloccare tutto, devi eseguire il JS dopo il caricamento della pagina, altrimenti non esistendo ancora alcun elemento, giustamente, JS non può fare nulla.

Ciao!

lupin87

15-09-2009, 10:33

grazie delle info però adesso ho un altor problema completamente differente e non so se vale la pena aprire un altro topic:in base ad un campo selezionato da una select devo creare determianti controlli...stavolta conviene utilizzare javascript piuttosto che dhtml ma è difficilissimo...:(

Y3PP4

15-09-2009, 22:46