- Home
- Categorie
- Coding e Sistemistica
- Javascript & Framework
- posizionamento immagine con jquery
-
posizionamento immagine con jquery
Non riesco a far posizionare l'anteprima dell'immagine prendendo le variabili dal db, ho seguito quello che c'è scritto su questa pagina, ma non funziona, l'immagine viene sempre caricata al centro, non segue le coordinate che vengono dal db, le ignora proprio.
odyniec.net/projects/imgareaselect/examples-callback.html
(leggete la parte in fondo alla pagina)
e qui è quello che ho scritto io:
[php]
<?php
$sql_fotoarticolo = "SELECT c_art_articolo., c_art_fotoarticolo., c_art_fotoarticolo.foto AS photogalleryFROM c_art_fotoarticolo INNER JOIN c_art_articolo ON c_art_fotoarticolo.id_art_articolo = c_art_articolo.id_art_articolo WHERE c_art_articolo.id_art_articolo = '".$id."' ORDER BY c_art_fotoarticolo.id_art_fotoarticolo ASC";
$result_fotoarticolo = mysql_query($sql_fotoarticolo,$conn) or die ("errore ".mysql_error());
$row2_fotoarticolo=mysql_fetch_array($result_fotoarticolo)
?><script type="text/javascript" src="script/script_centra_immagine/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="script/script_centra_immagine/jquery.imgareaselect.pack.js"></script><script type="text/javascript">
$('img').imgAreaSelect({
x1: <?php echo $row2_fotoarticolo['foto_inquadratura_x1'] ?>,
y1: <?php echo $row2_fotoarticolo['foto_inquadratura_y1'] ?>,
x2: <?php echo $row2_fotoarticolo['foto_inquadratura_x2'] ?>,
y2: <?php echo $row2_fotoarticolo['foto_inquadratura_y2'] ?>,
w: <?php echo $row2_fotoarticolo['foto_dimensioni_w'] ?>,
h: <?php echo $row2_fotoarticolo['foto_dimensioni_h'] ?>,
onInit: preview2,
onSelectChange: preview2
});
</script><script type="text/javascript">
$(document).ready(function () {
$('#preview2').imgAreaSelect({ onSelectEnd: function (img, selection) {
$('input[name=x1]').val(selection.x1);
$('input[name=y1]').val(selection.y1);
$('input[name=x2]').val(selection.x2);
$('input[name=y2]').val(selection.y2);
$('input[name=w]').val(selection.w);
$('input[name=h]').val(selection.h);
} });
});
</script><div class="frame" style="margin: 0 1em; width: 149px; height: 149px;">
<div id="preview2" style="width: 149px; height: 149px; overflow: hidden;"><a href="images_photogallery/<?=$row2_fotoarticolo['photogallery']?>" rel="lyteshow[foto]" title="<?=$row2_fotoarticolo['titolo_foto']?>">
<img src="images_photogallery/<?=$row2_fotoarticolo['photogallery']?>" style="height: 149px;" border="0">
</a></div>
</div>[/php]
-
Ciao prinzart,
Hai provato ad inserire "$('img').imgAreaSelect" nel $(document).ready ?
-
No, non ho provato, come lo inserisco?
[PHP]
<script type="text/javascript">
$('img').imgAreaSelect({
x1: <?php echo $row2_fotoarticolo['foto_inquadratura_x1'] ?>,
y1: <?php echo $row2_fotoarticolo['foto_inquadratura_y1'] ?>,
x2: <?php echo $row2_fotoarticolo['foto_inquadratura_x2'] ?>,
y2: <?php echo $row2_fotoarticolo['foto_inquadratura_y2'] ?>,
w: <?php echo $row2_fotoarticolo['foto_dimensioni_w'] ?>,
h: <?php echo $row2_fotoarticolo['foto_dimensioni_h'] ?>,
onInit: preview2,
onSelectChange: preview2
});
</script><script type="text/javascript">
$(document).ready(function () {
$('#preview2').imgAreaSelect({ onSelectEnd: function (img, selection) {
$('input[name=x1]').val(selection.x1);
$('input[name=y1]').val(selection.y1);
$('input[name=x2]').val(selection.x2);
$('input[name=y2]').val(selection.y2);
$('input[name=w]').val(selection.w);
$('input[name=h]').val(selection.h);
} });
});
</script>[/PHP]
-
Così:
<script type="text/javascript"> $(document).ready(function () { $('img').imgAreaSelect({ x1: <?php echo $row2_fotoarticolo['foto_inquadratura_x1'] ?>, y1: <?php echo $row2_fotoarticolo['foto_inquadratura_y1'] ?>, x2: <?php echo $row2_fotoarticolo['foto_inquadratura_x2'] ?>, y2: <?php echo $row2_fotoarticolo['foto_inquadratura_y2'] ?>, w: <?php echo $row2_fotoarticolo['foto_dimensioni_w'] ?>, h: <?php echo $row2_fotoarticolo['foto_dimensioni_h'] ?>, onInit: preview2, onSelectChange: preview2 }); $('#preview2').imgAreaSelect({ onSelectEnd: function (img, selection) { $('input[name=x1]').val(selection.x1); $('input[name=y1]').val(selection.y1); $('input[name=x2]').val(selection.x2); $('input[name=y2]').val(selection.y2); $('input[name=w]').val(selection.w); $('input[name=h]').val(selection.h); } }); }); </script>
-
Grazie domani ci provo
-
L'ho potuto provare solo ora, ma purtroppo non va.
Sono giorni che ci sto sbattendo la testa ma proprio non mi funziona.
Tutta la prima parte del lato admin dove si sposta l'immagine e si salva sul db funziona correttamente, invece l'ultima parte, proprio non riesco a farla funzionare, cioè quella dove l'utente dovrebbe vedere l'immagine già posizionata perchè prende le coordinate dal db precedentemente inserite dall'admin.
-
se vai in fondo alla pagina che ti ho linkato pare che spieghi come si fa:
odyniec.net/projects/imgareaselect/examples-callback.html
e io ho seguito attentamente il tutorial ma a me non funziona boh...