J'ai trouvé sur Internet le module en flash
Image Zoom qui permet de créer un zoom rigolo sur une photo.
Mon idée était de l'utiliser sur mon site oscommerce pour que, en cliquant sur les vignettes des produits, on puisse ensuite faire un zoom sur la grande image.
Voici comment j'ai adapté ce module à Oscommerce (je précise que je suis une bidouilleuse, pas une développeuse, maligne mais pas toujours futée et que cette méthode n'est sans doute pas la
meilleure ni la plus rapide) :
- J'ai téléchargé le module image zoom
- J'ai mis le fichier imagezoom.swf à la racine de mon site oscommerce
- J'ai téléchargé la contribution
Big images version 1.25 (de Jan Skopek)
- J'ai installé la contribution
- Dans la base de données, j'ai rajouté un champ products_mimage en plus du champ de la contribution products_bimage en utilisant le script sql :
ALTER TABLE `products` ADD `products_mimage` VARCHAR(64) AFTER `products_bimage`;
L'idée était qu'au lieu d'avoir 2 tailles d'images, j'en aurais 3.
- J'ai ouvert le fichier admin/categories.php inclus dans la contribution et j'ai cherché tout ce qui avait été rajouté pour la contribution big images (c'est-à-dire tout ce qui comportait le
commentaire
added code for big product image) et j'ai tout dupliqué pour créer une troisième taille d'image.
Par exemple, pour le code :
if (isset($HTTP_POST_VARS['products_bimage']) && tep_not_null($HTTP_POST_VARS['products_bimage']) && ($HTTP_POST_VARS['products_bimage'] != 'none')) {
$sql_data_array['products_bimage'] = tep_db_prepare_input($HTTP_POST_VARS['products_bimage']);
}
J'ai ajouté juste derrière :
if (isset($HTTP_POST_VARS['products_mimage']) && tep_not_null($HTTP_POST_VARS['products_mimage']) && ($HTTP_POST_VARS['products_mimage'] !=
'none')) {
$sql_data_array['products_mimage'] = tep_db_prepare_input($HTTP_POST_VARS['products_mimage']);
}
Et pour un code du type :
$product_query = tep_db_query("select products_quantity, products_model, products_image, products_bimage, products_price, products_date_available, products_weight,
products_tax_class_id, manufacturers_id from " . TABLE_PRODUCTS . " where products_id = '" . (int)$products_id . "'");
Je l'ai remplacé par :
$product_query = tep_db_query("select products_quantity, products_model, products_image, products_mimage, products_bimage,
products_price, products_date_available, products_weight, products_tax_class_id, manufacturers_id from " . TABLE_PRODUCTS . " where products_id = '" . (int)$products_id . "'");
(la partie en rose étant celle qui a changé).
Et ainsi de suite dans tout le fichier pour que mon image de taille medium soit bien prise en compte.
- J'ai ouvert le fichier admin/includes/languages/french/categories.php et j'ai ajouté :
define('TEXT_PRODUCTS_MIMAGE', 'Image moyenne du produit :');
au-dessus de :
define('TEXT_PRODUCTS_BIMAGE', 'Grande image du produit :');
- J'ai ouvert le fichier product_info.php et j'ai remplacé le code (ligne 72) :
$product_info_query = tep_db_query("select p.products_id, pd.products_name, pd.products_description, p.products_model, p.products_quantity, p.products_image,
pd.products_url, p.products_price, p.products_tax_class_id, p.products_date_added, p.products_date_available, p.manufacturers_id from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd
where p.products_status = '1' and p.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'");
par celui-ci :
$product_info_query = tep_db_query("select p.products_id, pd.products_name, pd.products_description, p.products_model, p.products_quantity, p.products_image,
p.products_mimage, p.products_bimage, pd.products_url, p.products_price, p.products_tax_class_id, p.products_date_added, p.products_date_available,
p.manufacturers_id from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and
pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'");
- J'ai remplacé le code (ligne 108) :
<script language="javascript"><!--
document.write('<?php echo '<a href="javascript:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id']) . '\\\')">' . tep_image(DIR_WS_IMAGES .
$product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>';
?>');
//--></script>
<noscript>
<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'],
$product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>
</noscript>
par celui-ci :
<script type="text/javascript">
document.write('<?php echo '<a href="javascript:popupWindow(\\\'' . 'imagezoom.swf?image=' . DIR_WS_IMAGES . $product_info['products_mimage'] . '&imagebig=' . DIR_WS_IMAGES .
$product_info['products_bimage'] . '&imgW=750&imgH=400\\\')">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH,
SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');
</script>
<noscript>
<?php echo '<a href="imagezoom.swf?image=' . DIR_WS_IMAGES . $product_info['products_mimage']. '&imagebig=' . DIR_WS_IMAGES . $product_info['products_bimage'] .
'&imgW=750&imgH=400\">' .
tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) .'</a>'; ?>
</noscript>
en me basant sur le mode d'emploi de configuration du module imagezoom.
- J'ai aussi remplacé le code (ligne 28) :
<script language="javascript"><!--
function popupWindow(url) {
window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,copyhistory=no,width=100,height=100,screenX=150,screenY=150,top=150,left=150')
}
//--></script>
par celui-ci :
<script language="javascript"><!--
function popupWindow(url) {
window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,copyhistory=no,width=750,height=400,screenX=150,screenY=150,top=150,left=150')
}
//--></script>
Bien sûr, les dimensions sont à modifier selon votre goût.
Je crois n'avoir rien oublié. En tout cas, à la fin, ça marchait !
