galleria foto [era: Javascript script]

**losker** · 16-05-2005, 13:29

Devo realizzare questa cosa con javascript anche se so bene che con php sarebbe molto più semplice, ma non posso usare php

Allora io ho una home nella quale ho un iframe con una galleria di foto

nella stessa pagina ho due pulsanti una freccia avanti e una indietro

dovrei fare in modo che cliccando su un immagine la apra nell'iframe a grandezza normale e se si clicca sulle freccie passi alla foto successiva o precedente o se si è sulla home passi alla prima o all'ultima foto (questo impostando un ciclo e sapendo già il numero delle foto)

Io ho pensato che quando uno clicca sulle foto posso fare un link alla stessa pagina con un un id come parametro GET nell'url

E la pagina poi legge nell'url se c'è un id carica nell'iframe "id".jpg se non c'è nessun id carica nell'iframe la pagina gellery.htm

Mentre le frecce dovrebbero leggere il num dell'id e sommare 1 o sottrarlo nell'id del link con target l'iframe oppure mandare alla prima o ultima foto se non c'è id

Potreste darmi qualche dritta o qualche suggerimento migliore e più rapido

Grazie 1000

**badaze** · 16-05-2005, 16:45

Prova questo ....

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
var a = new Array();
a[0]       = "http://localhost/images/Image1.gif";
a[1]       = "http://localhost/images/Image2.gif";
a[2]       = "http://localhost/images/Image3.gif";
a[3]       = "http://localhost/images/Image4.gif";
imageIndex = 0;

function avanti() {
 image(1);
}
function indietro() {
 image(-1);
}

function image(i) {
 imageIndex = imageIndex + i;
 if (imageIndex < 0) {imageIndex=0}
 if (imageIndex >= a.length) {imageIndex=a.length-1}
 document.getElementById('iFrame').src = a[imageIndex];
}
//-->
</script>

</head>
<body>
<iframe id="iFrame" src="" scrolling="no"></iframe>


<input type="button" value="Indietro" onclick="indietro()">
<input type="button" value="Avanti" onclick="avanti()">
<script language="JavaScript" type="text/javascript">
<!--
//------ Visualizzare Prima immagine 
image(0);
//-->
</script>

</body>
</html>

**losker** · 16-05-2005, 17:33

Va quasi bene...

L'unica cosa è che la prima cosa che appare non è un immagine ma una pagina html con tutte le immagini e il link che dovrebbe visualizzarle

Un altro problema sarebbe che visto che le immagini sono quasi 800 e preferirei non dover mettere la lista delle immagini

Per il primo problema basterebbe (correggetemi se sbaglio) sostituire il link della prima immagine con il link della pagina della galleria

E il link per ingrandire le foto (nella pagina della galleria) dovrebbe essere qualcosa tipo onClick="javascript

arent.image(numeroimmagine)"

Mentre per il secondo come potrei fare?

Grazie 1000

**losker** · 17-05-2005, 12:28

up

**losker** · 17-05-2005, 18:20

up

**losker** · 17-05-2005, 19:01

Grazie al vostro aiuto sono quasi riuscito...

Ora ho la pagina index:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
var a = new Array();
a[0]       = "gallery.htm";
a[1]       = "foto/001.jpg";
a[2]       = "foto/002.jpg";
a[3]       = "foto/003.jpg";
imageIndex = 0;

function avanti() {
 image(1);
}
function indietro() {
 image(-1);
}

function image(i) {
 imageIndex = imageIndex + i;
 if (imageIndex < 0) {imageIndex=0}
 if (imageIndex >= a.length) {imageIndex=a.length-1}
 document.getElementById('iFrame').src = a[imageIndex];
}
//-->
</script>

</head>
<body>
<iframe id="iFrame" src="" scrolling="no"></iframe>


<input type="button" value="Indietro" onclick="indietro()">
<input type="button" value="Avanti" onclick="avanti()">
<script language="JavaScript" type="text/javascript">
<!--
//------ Visualizzare Prima immagine 
image(0);
//-->
</script>

</body>
</html>

e la pagina gallery.htm che contiene la galleria di tutte le immagini con link simili a questo

codice:

[img]foto/001.JPG[/img]

L'unico problema sarebbe impostare che le variabili dell'array fossero a[n] = foto/n.jpg

cioè aumentando l'indice dell'array aumenti anche il numero del nome della foto. Questo perchè essendo moltissime le foto aggingendoli manualmente rallenterebbero lo script e ci metterei tantissimo.

Non so come si posso fare perche non conosco molto bene javascript cmq si ha come dato il numero delle foto

Non so qualcosa tipo (Ma qs è php)

codice:

for($i=0,$tot="numerodifoto";$i<$tot;++$i){
  a[$i]="foto/".$i.".jpg";
}

Credo possa andare... Se sapete convertirlo in js

ma se anche avete una soluzione migliore

Grazie 1000

**badaze** · 18-05-2005, 18:25

Dovrebbe + o - assomigliare a questo.

codice:

<script language="JavaScript" type="text/javascript">
<!--
var a = new Array();
<?php
for($i=0;$i<$tot;++$i){
  echo "a[$i]=\"foto/$i.jpg\"\n";
}
?>

imageIndex = 0;

function avanti() {
 image(1);
}
function indietro() {
 image(-1);
}

function image(i) {
 imageIndex = imageIndex + i;
 if (imageIndex < 0) {imageIndex=0}
 if (imageIndex >= a.length) {imageIndex=a.length-1}
 document.getElementById('iFrame').src = a[imageIndex];
}
//-->
</script>

Discussione: galleria foto [era: Javascript script]

Strumenti discussione

Ricerca discussione

Visualizza

Javascript script

Permessi di invio