Pagina 1 di 1

Limitare larghezza della immagine nella finestra POPUP IMAGE

Inviato: 18/09/2006, 20:38
da alchimista
Ciao ragazzi, come va?
sapreste spiegarmi come faccio a mettere un limite massimo di visualizzazione alle immagini che si aprono nel pop up immagini, in modo che anche se carico foto da 800 *600 nel pop up venga visualizzata un immagine con larghezza di default di 450px * l'altezza proporzionale all'altezza, che nel caso avessi caricato un immagine 800*600 sarebbe 337.

Ciao ciao

Soluzione Semplice

Inviato: 19/09/2006, 3:02
da blunoa
La soluzione piú semplice e questa:

Con un programma di fotoritocco come photoshop o ancora meglio se si tratta solo di ridimensionare foto "ACDSee" puoi creare la fotografia nella dimensione che desideri e quando clicchi sul pulsante "Ingrandisci immagine" la foto e giá della dimensione da te prestabilita senza dover ricorrere a contribution o script vari.

Saluti

Inviato: 19/09/2006, 8:48
da alchimista
Ti ringrazio blunoa, conosci qualche leggero programma che servi solo al ridimensionamento delle immagini!
grazie della risposta!

Inviato: 19/09/2006, 11:31
da Maipiusenza
Ciao, questa funzione l'ho scritta senza provarla... dovrebbe andare bene ma fai un test :-)
In pratica ti ridimensiona l'immagine per essere contenuta in un quadrato dalle dimensioni massime di 450 pixel, quindi se hai una foto in verticale di 600x800, questa diventerà 337x450. Ovviamente ti basta cambiare il valore di "maxVal" nella cifra che preferisci per aumentare o ridurre le dimensioni massime.

in popup_image.php, circa alla riga 33

sostituisci

Codice: Seleziona tutto

  if (document.images[0]) window.resizeTo(document.images[0].width +30, document.images[0].height+60-i);
con

Codice: Seleziona tutto

  if (document.images[0]) {
  
	  var maxVal=450;
	  document.images[0].width>document.images[0].height ? myVal=document.images[0].width : myVal=document.images[0].height;
	  if (myVal>maxVal) {
		var ratio=myVal/maxVal;
		document.images[0].width=Math.round(document.images[0].width/ratio);
		document.images[0].height=Math.round(document.images[0].height/ratio)
	  }
  
  
  	 window.resizeTo(document.images[0].width +30, document.images[0].height+60-i);
  }
Ciao
Nadia

Inviato: 19/09/2006, 12:46
da alchimista
ciao Maipiusenza, ho provato il tuo codice ma non ho avuto buoni risultati, l'immagini non mantengono proporzioni vengono deformate...
CC

Inviato: 19/09/2006, 12:52
da alchimista
la larghezza di 450 px viene rispettata, ma l'altezza diminuisce senza rispettare le proporzioni

Inviato: 19/09/2006, 15:17
da Maipiusenza
in admin-> configurazione -> images
la voce "Calculate Image Size" è settata su true?
Nel mio caso sì, e lo script mi funziona.
se non è settata su true forse il popup non è in grado di determinare subito altezza e larghezza dell'immagine.
Ciao
Nadia

Inviato: 19/09/2006, 18:25
da alchimista
Sembra strano anche a me... ho controllato anc'io il calcolo automatico dell'immagine dopo aver modificato il codice ed è "true" non vorrei mai che avendo modificato il codice del popup image per inserire piu immagini con la contribution "more_pics_6_v1.2" ci sia qualcosa che non quadra.....
/*
$Id: popup_image.php,v MoPics 6 2003/06/05 23:26:23 Exp $

osCommerce, Open Source E-Commerce Solutions
http://www.oscommerce.com

Copyright (c) 2003 osCommerce

Released under the GNU General Public License
Updated by John Wood - www.z-is.net
*/

require('includes/application_top.php');

$navigation->remove_current_page();

$products_query = tep_db_query("select pd.products_name, p.products_image from " . TABLE_PRODUCTS . " p left join " . TABLE_PRODUCTS_DESCRIPTION . " pd on p.products_id = pd.products_id where p.products_status = '1' and p.products_id = '" . (int)$HTTP_GET_VARS['pID'] . "' and pd.language_id = '" . (int)$languages_id . "'");
$products = tep_db_fetch_array($products_query);
// BOF: More Pics 6
$PID = $HTTP_GET_VARS['pID'];
$invis = $HTTP_GET_VARS['invis'];
$result = mysql_query("select * from " . TABLE_PRODUCTS . " where products_id = '" . (int)$HTTP_GET_VARS['pID'] . "'");
// EOF: More Pics 6
?>
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html <?php echo HTML_PARAMS; ?>>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>">
<title><?php echo $products['products_name']; ?></title>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">
<script language="javascript"><!--
var i=0;
function resize() {
<?php // BOF: More Pics 6 ?>
if (document.layers) i=40;
if (document.images[0]) {

var maxVal=450;
document.images[0].width>document.images[0].height ? myVal=document.images[0].width : myVal=document.images[0].height;
if (myVal>maxVal) {
var ratio=myVal/maxVal;
document.images[0].width=Math.round(document.images[0].width/ratio);
document.images[0].height=Math.round(document.images[0].height/ratio)
}


window.resizeTo(document.images[0].width +30, document.images[0].height+130-i);
}<?php // EOF: More Pics 6 ?>
self.focus();
}
//--></script>
<?php // BOF: More Pics 6 ?>
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.5)">
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.5)">
<?php // EOF: More Pics 6 ?>
</head>
<body onload="resize();" class="infoBoxHeading">
<?php // BOF: More Pics 6 ?>
<table border="0" cellpadding="0" cellspacing="0" align="center">
<?php // Lets find the last available image !
$image = tep_db_fetch_array($result);
if ($image['products_subimage6'] != ''){
$last = '6';
}elseif ($image['products_subimage5'] != ''){
$last = '5';
}elseif ($image['products_subimage4'] != ''){
$last = '4';
}elseif ($image['products_subimage3'] != ''){
$last = '3';
}elseif ($image['products_subimage2'] != ''){
$last = '2';
}elseif ($image['products_subimage1'] != ''){
$last = '1';
}elseif ($image['products_image'] != ''){
$last = '0';
}
$next = $invis + '1';
$back = $invis - '1';
?>
<?php
if (($invis == '0') || ($invis == '')){
$insert = $image['products_image'];
} else {
$insert = $image['products_subimage' . $invis. ''];
}

$img = DIR_WS_IMAGES . $insert;
echo '<tr><td align="center"><img src="' . $img . '"></td>';
?> </tr>
<tr>
<td height="0" align="center"></td></tr>
<tr>
<td height="20" align="center">
<?php
if (($back != '-1') || ($next <= $last)) {
echo '<hr color="#666666" size="3">';
}
if ($back != '-1'){
echo '<a href="'.tep_href_link('popup_image.php','pID='.$PID.'&invis='.$back).'">' . tep_image(DIR_WS_IMAGES.'left.gif', 'previous', '', '', 'border="0"') . '</a> ';
}
if ($next <= $last){
echo '<a href="'.tep_href_link('popup_image.php','pID='.$PID.'&invis='. $next).'">' . tep_image(DIR_WS_IMAGES.'right.gif', 'next', '', '', 'border="0"') . '</a>';
}
echo '</td></tr>';
?>
</table>
<?php // EOF: More Pics 6 ?>
</body>
</html>
<?php require('includes/application_bottom.php'); ?>
a me sembra tutto ok !
per voi!?

Inviato: 19/09/2006, 23:59
da Maipiusenza
con le tue modifiche non mostri più l'immagine con la funzione tep_image ma la inserisci in un tag <img src" nomeimmagine "> in questo modo non stai definendo altezza e larghezza della foto.

Il codice javascript viene eseguito al load della pagina, quindi quando ancora non è stata caricata del tutto la foto.
Credo che sia per questo che non funziona bene.
Dovresti eseguire quel codice javascript solo dopo che la foto è stata caricata.
quindi aggiungere un setInterval alla funzione e farla eseguire ogni secondo (o anche meno) fino a quando non verfichi che l'immagine ha dimensioni maggiori di zero.

Ciao
Nadia

Inviato: 20/09/2006, 18:40
da alchimista
oddio....
in poche parole una!?
sono un po ignorante ....

Inviato: 21/09/2006, 11:00
da Maipiusenza
anche questa l'ho scritta senza provarla, ma dovrebbe andare bene:

cancella tutta la funzione resize: da function resize (){ fino alla parentesi graffa di chiusura dopo self.focus()

e sostituiscila con:

Codice: Seleziona tutto

function resize() {
	resize2();
	aspetta = setInterval(resize2(),300);
}
function resize2(){
	if(document.images[0].height>10){
	  if (navigator.appName == 'Netscape') i=40;
	  if (document.images[0]) {
	 
		 var maxVal=450;
		 document.images[0].width>document.images[0].height ? myVal=document.images[0].width : myVal=document.images[0].height;
		 if (myVal>maxVal) {
		  var ratio=myVal/maxVal;
		  document.images[0].width=Math.round(document.images[0].width/ratio);
		  document.images[0].height=Math.round(document.images[0].height/ratio)
		 }
	 
	 
		  window.resizeTo(document.images[0].width +30, document.images[0].height+60-i);
	  }  self.focus();
	  clearInterval(aspetta);
	}
}
Ciao
Nadia

Inviato: 21/09/2006, 12:56
da alchimista
Ciao Nadia , ti ringrazio del tuo aiuto !
cmq l'immagine rimane deformata e in piu nella finestra popup ho un errore riguardo al "aspetta" mi dice non definito...
CC

Inviato: 21/09/2006, 14:50
da Maipiusenza
ok, stavolta l'ho provata :-)

cancella tutto quello che ti ho fatto inserire prima (le funzioni resize e resize2) e sostituisci con:

Codice: Seleziona tutto

var i=0;
var maxVal=450;
if (navigator.appName == 'Netscape') i=40;
function resize(){
	if(document.images[0] && document.images[0].height>10){
       document.images[0].width>document.images[0].height ? myVal=document.images[0].width : myVal=document.images[0].height;
       if (myVal>maxVal) {
         var ratio=myVal/maxVal;
         document.images[0].width=Math.round(document.images[0].width/ratio);
       }
        window.resizeTo(document.images[0].width +30, document.images[0].height+60-i);
     }
	 self.focus();
	 clearInterval(aspetta);
} 
aspetta = self.setInterval(resize,200);

inoltre dal tag <body> devi togliere: onLoad="resize();"

Ciao
Nadia

Inviato: 22/09/2006, 12:48
da alchimista
FUNZIONA ALLA GRANDE!!!

Grazie Mille!!!

Inviato: 22/09/2006, 12:49
da alchimista
Riporto di seguito lo script per il ridimensionamento automatico delle immagini :
<script language="javascript"><!--
var i=0;
var maxVal=450;
if (navigator.appName == 'Netscape') i=40;
function resize(){
if(document.images[0] && document.images[0].height>10){
document.images[0].width>document.images[0].height ? myVal=document.images[0].width : myVal=document.images[0].height;
if (myVal>maxVal) {
var ratio=myVal/maxVal;
document.images[0].width=Math.round(document.images[0].width/ratio);
}
window.resizeTo(document.images[0].width +30, document.images[0].height+120-i);
}
self.focus();
clearInterval(aspetta);
}
aspetta = self.setInterval(resize,200);
//--></script>
Un grazie speciale a MAIPIUSENZA!

CC