come inserire valori fissi nel javascript?

[prinzart]

Ciao a tutti,
ho usato questo script:
http://odyniec.net/projects/imgareaselect/
per il mio sito.

Funziona correttamente, ma la modifica che vorrei fare è dare dei valori fissi al posizionamento iniziale dell'immagine.

il posizionamento dell'immagine viene stabilita da questo codice:

<script type="text/javascript">
function preview(img, selection) {
    if (!selection.width || !selection.height)
        return;
    
    var scaleX = 100 / selection.width;
    var scaleY = 70 / selection.height;

    $('#preview img').css({
        width: Math.round(scaleX * 200),
        height: Math.round(scaleY * 200),
        marginLeft: -Math.round(scaleX * selection.x1),
        marginTop: -Math.round(scaleY * selection.y1)
    });

    $('#x1').val(selection.x1);
    $('#y1').val(selection.y1);
    $('#x2').val(selection.x2);
    $('#y2').val(selection.y2);
    $('#w').val(selection.width);
    $('#h').val(selection.height);    
}

$(function () {
    $('#photo').imgAreaSelect({ aspectRatio: '1:1', handles: true,
        fadeSpeed: 200, onSelectChange: preview });
});
</script>

è possibile mettere dei numeri al posto di:

selection.x1, selection.y1 ecc..

in questo modo, però a me non funziona, forse sbaglio la sintassi:

$('#x1').val(15);
$('#y1').val(selection.18);
$('#x2').val(selection.47);
$('#y2').val(12);
$('#w').val(selection.30);
$('#h').val(selection.70);

a parte che non so neanche se devo lasciare la parola "selection" prima del numero.

[m4rko80]

La parola selection non e' una parola ma un oggetto, infatti all'inizio c'e' un controllo

if (!selection.width || !selection.height)

Se la posizione di x o y non esiste blocca tutto.

$('#x1').val()... il tag nel html con id x1 che tag e'??

cosi' come scritto sembrerebbe un input type text

$('#x1').val(10); cosi' setta a 10 il suo attributo value.

e quindi selection.30 ad esempio non esiste

Il numero secco al val() lo puoi passare ma non so che fa poi lo script in base a quei dati.

[prinzart]

Il problema è qui, vedi a fondo pagina:




http://odyniec.net/projects/imgareas...-callback.html




ho seguito le sue istruzioni ma l'anteprima non prende le variabili come dovrebbe, cioè le ignora proprio, posiziona l'immagine al centro come è di default e basta.

questo è quello che ho fatto, tu sicuramente di javascript ne capisci più di me, perfavore dagli un'occhiata.

<?php 
$sql_fotoarticolo = "SELECT c_art_articolo.*, c_art_fotoarticolo.*, c_art_fotoarticolo.foto AS photogallery  
			
			FROM 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]images_photogallery/<?=$row2_fotoarticolo['photogallery']?>[/img]
</a>
 
</div>
</div>