Limitare larghezza della immagine nella finestra POPUP IMAGE
Moderatore: mod Generali
-
- membro Junior
- Messaggi: 30
- Iscritto il: 25/07/2006, 21:40
Limitare larghezza della immagine nella finestra POPUP IMAGE
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
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
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
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
Marcello
www.blunoa.com cdr/dvdr distributor
www.blunoa.com cdr/dvdr distributor
-
- membro Junior
- Messaggi: 30
- Iscritto il: 25/07/2006, 21:40
-
- membro Regular
- Messaggi: 117
- Iscritto il: 06/06/2006, 13:34
- Località: Monopoli (BA)
- Contatta:
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
con
Ciao
Nadia
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);
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);
}
Nadia
Non rompere le scatole... Aprile!!!
www.maipiusenza.com
www.maipiusenza.com
-
- membro Junior
- Messaggi: 30
- Iscritto il: 25/07/2006, 21:40
-
- membro Junior
- Messaggi: 30
- Iscritto il: 25/07/2006, 21:40
-
- membro Regular
- Messaggi: 117
- Iscritto il: 06/06/2006, 13:34
- Località: Monopoli (BA)
- Contatta:
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
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
Non rompere le scatole... Aprile!!!
www.maipiusenza.com
www.maipiusenza.com
-
- membro Junior
- Messaggi: 30
- Iscritto il: 25/07/2006, 21:40
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.....
per voi!?
a me sembra tutto ok !/*
$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'); ?>
per voi!?
-
- membro Regular
- Messaggi: 117
- Iscritto il: 06/06/2006, 13:34
- Località: Monopoli (BA)
- Contatta:
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
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
Non rompere le scatole... Aprile!!!
www.maipiusenza.com
www.maipiusenza.com
-
- membro Junior
- Messaggi: 30
- Iscritto il: 25/07/2006, 21:40
-
- membro Regular
- Messaggi: 117
- Iscritto il: 06/06/2006, 13:34
- Località: Monopoli (BA)
- Contatta:
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:
Ciao
Nadia
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);
}
}
Nadia
Non rompere le scatole... Aprile!!!
www.maipiusenza.com
www.maipiusenza.com
-
- membro Junior
- Messaggi: 30
- Iscritto il: 25/07/2006, 21:40
-
- membro Regular
- Messaggi: 117
- Iscritto il: 06/06/2006, 13:34
- Località: Monopoli (BA)
- Contatta:
ok, stavolta l'ho provata
cancella tutto quello che ti ho fatto inserire prima (le funzioni resize e resize2) e sostituisci con:
inoltre dal tag <body> devi togliere: onLoad="resize();"
Ciao
Nadia
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);
Ciao
Nadia
Non rompere le scatole... Aprile!!!
www.maipiusenza.com
www.maipiusenza.com
-
- membro Junior
- Messaggi: 30
- Iscritto il: 25/07/2006, 21:40
-
- membro Junior
- Messaggi: 30
- Iscritto il: 25/07/2006, 21:40
Riporto di seguito lo script per il ridimensionamento automatico delle immagini :
CC
Un grazie speciale a MAIPIUSENZA!<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>
CC