Limitare larghezza della immagine nella finestra POPUP IMAGE

alchimista · Messaggio da **alchimista** » 18/09/2006, 20:38

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

blunoa · Messaggio da **blunoa** » 19/09/2006, 3:02

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

alchimista · Messaggio da **alchimista** » 19/09/2006, 8:48

Ti ringrazio blunoa, conosci qualche leggero programma che servi solo al ridimensionamento delle immagini!
grazie della risposta!

Maipiusenza · Messaggio da **Maipiusenza** » 19/09/2006, 11:31

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

alchimista · Messaggio da **alchimista** » 19/09/2006, 12:46

ciao Maipiusenza, ho provato il tuo codice ma non ho avuto buoni risultati, l'immagini non mantengono proporzioni vengono deformate...
CC

alchimista · Messaggio da **alchimista** » 19/09/2006, 12:52

la larghezza di 450 px viene rispettata, ma l'altezza diminuisce senza rispettare le proporzioni

Maipiusenza · Messaggio da **Maipiusenza** » 19/09/2006, 15:17

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

alchimista · Messaggio da **alchimista** » 19/09/2006, 18:25

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"></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!?

Maipiusenza · Messaggio da **Maipiusenza** » 19/09/2006, 23:59

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

alchimista · Messaggio da **alchimista** » 20/09/2006, 18:40

oddio....
in poche parole una!?
sono un po ignorante ....

Maipiusenza · Messaggio da **Maipiusenza** » 21/09/2006, 11:00

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

alchimista · Messaggio da **alchimista** » 21/09/2006, 12:56

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

Maipiusenza · Messaggio da **Maipiusenza** » 21/09/2006, 14:50

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

alchimista · Messaggio da **alchimista** » 22/09/2006, 12:48

FUNZIONA ALLA GRANDE!!!

Grazie Mille!!!

alchimista · Messaggio da **alchimista** » 22/09/2006, 12:49

Riporto di seguito lo script per il ridimensionamento automatico delle immagini :

<script language="javascript"></script>

Un grazie speciale a MAIPIUSENZA!

CC

osCommerceITalia

Limitare larghezza della immagine nella finestra POPUP IMAGE

Limitare larghezza della immagine nella finestra POPUP IMAGE

Soluzione Semplice