Gallery dinamica

**cero76** · 07-11-2011, 17:42

Ciao a tutti
Ho preso lo script sotto elencato e sto cercando di renderlo dinamico:in pratica ho una pagina di amministrazione dove inserisco 2 immagini una grande e una piccola.
Ho scaricato questo scrpt che serve a fare lo zoom dell'immagine piccola richiamando la grande a tutto schermo.

<!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" lang="it">
<head>
<title>>Un plugin jQuery per l'effetto zoom con smooth - Esempio JavaScript scaricato da HTML.it</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="it" />
<meta name="Robots" content="All" />
<meta name="Description" content="HTML.it - il sito italiano sul Web publishing" />
<meta name="Keywords" content="javascript" />
<meta name="Owner" content="HTML.it srl" />
<meta name="Author" content="HTML.it srl" />
<meta name="Copyright" content="HTML.it srl" />

<link rel="stylesheet" type="text/css" href="css/imgzoom.css" />



<script type="text/javascript" src="scripts/jquery.min.js"></script>

<script type="text/javascript" src="scripts/jquery.imgzoom.pack.js"></script>
<script type="text/javascript">
$(function () {
$('#img1').imgZoom({ showOverlay: true });
$('#img2').imgZoom({ showOverlay: true, opacity: 0 });
$('#img3').imgZoom({ showOverlay: true, rotate: true, duration: 1000 });
});
</script>
</head>
<body>
<h1>Un plugin jQuery per l'effetto zoom con smooth</h1>

<div class="container demo">

<div style="float: left; width: 50%;">
<table>
<tbody>
<tr>
<td>
[img]flower1s.jpg[/img]

Zoom
</td>

<td>
[img]flower2s.jpg[/img]

Zoom with fade in
</td>
<td>
[img]flower3s.jpg[/img]

Zoom with rotation
</td>

</tr>
</tbody>
</table>
</div>
</div>

<div align="center">
[img]logo_htmlit.gif[/img]

</body>
</html>

Ho modificato il codice in questo modo:

<?php do { ?>

<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.imgzoom.pack.js"></script>
<script type="text/javascript">
$(function () {
$('#img1').imgZoom({ showOverlay: true });
$('#img2').imgZoom({ showOverlay: true, opacity: 0 });
$('#img3').imgZoom({ showOverlay: true, rotate: true, duration: 1000 });
});
</script>

</head>

<body>

<div class="container demo">
<div style="float: left; width: 50%;">
<table>

<tbody>
<tr>

<td>
[img]<?php echo $dirname2.($row_allestimenti['foto2']); ?>[/img]" />

<?php echo $row_allestimenti['descrizione']; ?>
</td>
</tr>

</tbody>
</table>

</div>

</div>

<?php } while ($row_allestimenti = mysql_fetch_assoc($allestimenti)); ?>

</tr>

<tr>
<td colspan="2" align="left">[img]image/piede.png[/img]</td>
</tr>
</table>
</div>

</body>
</html>
<?php
mysql_free_result($allestimenti);
?>

Non ho postato la parte di collegamento al database.
Risultato mi appaiono tutte le immagini che sono contenute nella tabella del database ma fa lo zoom solo della prima.

Grazie mille

**homerbit** · 07-11-2011, 21:01

intanto togli i tag <script>...dal while vanno sempre tra gli <head>

**cero76** · 17-11-2011, 11:32

nessuno mi sa aiutare????

Grazie

**chpweb** · 17-11-2011, 11:54

io uso imgzoom per la gallery, ed è dinamica ed estratta dal db

la cosa che non ho capito è :
per funzionare il tuo codice php dovrebbe costruire lo script javascript ad hoc in modo da avere definite tutte le immagini in base all'id e alla transizione che devono fare, io dopo aver estratto i dati faccio così

<script type="text/javascript">
$(function () {

Codice PHP:


 <?php for($c=1;$c<=$cont;$c++){ echo "\$('#img$c').imgZoom({ showOverlay: true });";} ?>

});
</script>

insomma ciclo e costruisco lo script in modo che ogni immagine abbia la sua definizione in
javascript dell'evento imgzoom che deve eseguire al click

**cero76** · 17-11-2011, 12:18

Grazie mille per la risposta ma....
scusa l'ignoranza, così dovrebbe funzionare???

<script type="text/javascript" src="scripts/jquery.min.js"></script>

<script type="text/javascript" src="scripts/jquery.imgzoom.pack.js"></script>
<script type="text/javascript">
$(function () {<?php for($c=1;$c<=$cont;$c++){ echo "\$('#img$c').imgZoom({ showOverlay: true });";} ?>
// $('#img1').imgZoom({ showOverlay: true });
// $('#img2').imgZoom({ showOverlay: true, opacity: 0 });
$('#img3').imgZoom({ showOverlay: true, rotate: true, duration: 1000 });
});
</script>
</head>
<body>
<?php do { ?>
<div class="container demo">

<div style="float: left; width: 20%;">
<table width="100">
<tbody>

<tr>

<td width="147">
[img]<?php echo $dirname2.($row_allestimenti['foto2']); ?>[/img]" />

<?php echo $row_allestimenti['descrizione']; ?>
</td>

</tr>

</tbody>
</table>

</div>
</div>

</body>
</html>

<?php } while ($row_allestimenti = mysql_fetch_assoc($allestimenti)); ?>
<?php
mysql_free_result($allestimenti);
?>

**chpweb** · 17-11-2011, 12:43

// $('#img1').imgZoom({ showOverlay: true }); // $('#img2').imgZoom({ showOverlay: true, opacity: 0 }); $('#img3').imgZoom({ showOverlay: true, rotate: true, duration: 1000 }); });

diciamo che ci sei quasi a mio parere, ma dovresti studiarti un pochetto di javascript

il pezzo di codice che hai scritto in parole povere definisce che cosa deve fare lo script
imgzoom per le immagini con id
img1
img2
img3

quindi le cose da fare sono :

1) quando costruisco la galleria faccio in modo che le immagini abbiano un id successivo
quindi la costruisco e come id potresti mettere l'eco di una variabile che si autoincrementa ad ogni passaggio del ciclo.

questa variabile io la usavo anche come cont per poi costruire la parte di javascript per far funzionare gli effetti imgzoom.

a questo punto puoi costruire il codice javascript come ti ho mostrato prima nell'esempio,
ma non devi definire tre immagini al ciclo e sopratutto non con gli stessi id ripetuti,
se ogni immagine della tua galleria ha un id diverso ed è un id numerico e progressivo
adesso puoi con un semplice ciclo fargli costruire
il codice javascript che ti serve

ogni immagine deve essere definita da:
$('#img1').imgZoom({ showOverlay: true });

nel nostro caso img1 cambierà ad ogni passaggio e sarà una varibile php che incrementa
, quell'img1 se noti è l'id dell'immagine sulla quale vengono eseguiti gli zoom

* cmq leggiti una guida di javascript che è importante per fare queste cose *

**cero76** · 17-11-2011, 12:59

ok non è che mi puoi postare il codice corretto. Premetto che dopo mi studio a memoria la guida di javascript
Grazie ancora

**cero76** · 17-11-2011, 13:49

help me!!!!

**chpweb** · 17-11-2011, 15:35

</head>
<body>
<?php
$cont=0;//la usi per contare i risultati e rinominare gli id delle immagini
do { ?>
<div class="container demo">
<div style="float: left; width: 20%;">
<table width="100">
<tbody>
<tr>
<td width="147">
" />

<?php echo $row_allestimenti['descrizione']; ?>
</td>
</tr>
</tbody>
</table>
</div>
</div>

<?php $cont++; //la fai incrementare ad ogni ciclo ?>
<?php } while ($row_allestimenti = mysql_fetch_assoc($allestimenti)); ?>

<?php
mysql_free_result($allestimenti);
?>

<script type="text/javascript">
$(function () {
<?php for($c=0;$c<$cont;$c++){ echo "\$('#img$c').imgZoom({ showOverlay: true });";} ?>
</script>

</body>
</html>

non l'ho testato , dato che non sono in ufficio cmq gurdatelo , alla fine devi solo fare in modo che gli id delle immagini che crei vengano poi ripresi nello script javascript che definisce che transizioni vuoi far fare alle immagini .. cmq studia il javascript e dimmi se va

**cero76** · 17-11-2011, 19:50

purtroppo no adesso non lo fa neanche sulla prima

</head>
<body>
<?php
$cont=0;//la usi per contare i risultati e rinominare gli id delle immagini
do { ?>
<div class="container demo">
<div style="float: left; width: 20%;">
<table width="100">
<tbody>
<tr>
<td width="147">
<?php echo $cont ?>
" />

<?php echo $row_allestimenti['descrizione']; ?>
</td>
</tr>
</tbody>
</table>
</div>
</div>

<?php $cont++; //la fai incrementare ad ogni ciclo ?>
<?php } while ($row_allestimenti = mysql_fetch_assoc($allestimenti)); ?>

<?php
mysql_free_result($allestimenti);
?>

<script type="text/javascript">
$(function () {
<?php for($c=0;$c<$cont;$c++){ echo "\$('#img$c').imgZoom({ showOverlay: true });";} ?>
</script>

</body>
</html>

ho provato a fare un' echo della variabile e per ogni immagine si incrementa correttamente però continua a non fare lo zoom.

Discussione: Gallery dinamica

Strumenti discussione

Ricerca discussione

Visualizza

Gallery dinamica

Permessi di invio