Zoom immagini passaggio mouse
Moderatore: mod Generali
Zoom immagini passaggio mouse
Ciao a tutti,
sono neofita di oscommerce, ma devo dire che leggendo sul vostro forum e su quello inglese riesco quasi sempre a capire come apportare piccole modifiche al mio sito in costruzione.
Avrei una domanda per voi. Ho cercato un po' sul forum delle contribution per aggiungere immagini multiple per ogni prodotto in vendita e ingrandire la foto senza aprire una popup.
Tra le varie opzioni alla fine ho deciso di usare Simple Multi Image Add-on (Un-Limited) with FancyBox Popups.
Ci ho messo un po' a capire l'errore che commettevo ma con il 3d di supporto sono riuscita ad ottenere l'ingrandimento della foto prodotto nella scheda prodotto senza aprire pop-up e posso inserire più immagini dello stesso prodotto.
La domanda ora è: vorrei ingrandire l'immagine prodotto che compare nella lista prodotti di categoria (quella lista che esce quando si clicca su una categoria) al passaggio del mouse (al click normalmente ci porta alla scheda prodotto).
Qual è la maniera più semplice che resti compatibile con lo script che ho installato prima?
Si potrebbe fare con i CSS direttamente? Un aiutino?
Grazie!
sono neofita di oscommerce, ma devo dire che leggendo sul vostro forum e su quello inglese riesco quasi sempre a capire come apportare piccole modifiche al mio sito in costruzione.
Avrei una domanda per voi. Ho cercato un po' sul forum delle contribution per aggiungere immagini multiple per ogni prodotto in vendita e ingrandire la foto senza aprire una popup.
Tra le varie opzioni alla fine ho deciso di usare Simple Multi Image Add-on (Un-Limited) with FancyBox Popups.
Ci ho messo un po' a capire l'errore che commettevo ma con il 3d di supporto sono riuscita ad ottenere l'ingrandimento della foto prodotto nella scheda prodotto senza aprire pop-up e posso inserire più immagini dello stesso prodotto.
La domanda ora è: vorrei ingrandire l'immagine prodotto che compare nella lista prodotti di categoria (quella lista che esce quando si clicca su una categoria) al passaggio del mouse (al click normalmente ci porta alla scheda prodotto).
Qual è la maniera più semplice che resti compatibile con lo script che ho installato prima?
Si potrebbe fare con i CSS direttamente? Un aiutino?
Grazie!
Re: Zoom immagini passaggio mouse
installare la contribution nel file product_listing.php
Re: Zoom immagini passaggio mouse
dynamo ha scritto:installare la contribution nel file product_listing.php
ciao dynamo
intendi dire che dovrei mettere il codice che misi in product_info.php anche in product_listing?
Le modifiche vanno fatte allo stesso modo del primo file?
E l'immagine si ingrandirà al click, come impostare il passaggio del mouse?
Re: Zoom immagini passaggio mouse
non posso sapere se i passaggi saranno uguali... saranno molto simili se hai "capito" quello che hai fatto in product_info dovresti riuscire ad adattare la contribution per questo nuovo file
Re: Zoom immagini passaggio mouse
dynamo ha scritto:non posso sapere se i passaggi saranno uguali... saranno molto simili se hai "capito" quello che hai fatto in product_info dovresti riuscire ad adattare la contribution per questo nuovo file
eh, non l'ho capito, per cui non saprei come adattarla
mi sa che devo rinunciarci. io pensavo di fare una cosa semplice con javascript o css ancora meglio.
se qualcuno l'ha fatto mi dia un riferimento per favore, grazie
Re: Zoom immagini passaggio mouse
in ogni caso mi pare di capire dai tuoi post che non hai o sono minime le conoscenze in php mysql ti consiglio di studiarti le guide di html.it perchè altrimenti la tua vita sarà mooooooolto dura
Re: Zoom immagini passaggio mouse
si, sono minimissime per il php.dynamo ha scritto:in ogni caso mi pare di capire dai tuoi post che non hai o sono minime le conoscenze in php mysql ti consiglio di studiarti le guide di html.it perchè altrimenti la tua vita sarà mooooooolto dura
spero di imparare dalle guide che mi suggerisci, ora me le cerco un po'.
in ogni caso grazie
Re: Zoom immagini passaggio mouse
ecco un suggerimento trovato dai nostri amici americani/inglesi:
Hi,
1. Open your working product info.php and from there add the following code, its in the install.txt file
2. Open catalog/product_info.php
Find </head>
just above add
<link rel="stylesheet" href="lightbox/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox/prototype.js"></script>
<script type="text/javascript" src="lightbox/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightbox/builder.js"></script>
<script type="text/javascript" src="lightbox/lightbox.js"></script>
3. Next you need to edit the code which displays popup images and add the relation to lightbox, rel="lightbox", you will find this lower down the product_info.php around line 108 staring with <script language="javascript"><!--
document.write('<?php echo '<a href="java script:popupWindow .
If you do a search for "ENLARGE" you should find it
With clean MS2.2 Find
<script language="javascript"><!--
document.write('<?php echo '<a href="java script: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>
Replace with
<script language="javascript"><!--
document.write('<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank" rel="lightbox" title="'.$product_info['products_name'].'" >' . 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>'; ?>');
//--></script>
<noscript>
<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank" rel="lightbox" title="'.$product_info['products_name'].'" >' . 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>
4. Test and then upload to your live server
PROVATO semplicissimo e funzionale...
ps: per le images/e i js del lightbox le trovi qui:
http://addons.oscommerce.com/info/5456
Hi,
1. Open your working product info.php and from there add the following code, its in the install.txt file
2. Open catalog/product_info.php
Find </head>
just above add
<link rel="stylesheet" href="lightbox/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox/prototype.js"></script>
<script type="text/javascript" src="lightbox/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightbox/builder.js"></script>
<script type="text/javascript" src="lightbox/lightbox.js"></script>
3. Next you need to edit the code which displays popup images and add the relation to lightbox, rel="lightbox", you will find this lower down the product_info.php around line 108 staring with <script language="javascript"><!--
document.write('<?php echo '<a href="java script:popupWindow .
If you do a search for "ENLARGE" you should find it
With clean MS2.2 Find
<script language="javascript"><!--
document.write('<?php echo '<a href="java script: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>
Replace with
<script language="javascript"><!--
document.write('<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank" rel="lightbox" title="'.$product_info['products_name'].'" >' . 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>'; ?>');
//--></script>
<noscript>
<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank" rel="lightbox" title="'.$product_info['products_name'].'" >' . 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>
4. Test and then upload to your live server
PROVATO semplicissimo e funzionale...
ps: per le images/e i js del lightbox le trovi qui:
http://addons.oscommerce.com/info/5456
http://www.renner-italia.com
RENNER RICAMBISTICA COMPONENTI PER PIANOFORTI.
RENNER RICAMBISTICA COMPONENTI PER PIANOFORTI.
Re: Zoom immagini passaggio mouse
grazie mille, ci proverò. anche se non sono tanto convinta della scelta, nel senso che ho visto l'effetto su un sito che ho trovato per caso ed è snervante il fatto che si apra un'immagine al solo passaggio del mouse, toglie ogni curiosità al visitatore, anche perchè nell'elenco prodotti ho ingrandito abbastanza le foto per permettere al visitatore di entrare nelle schede dei prodotti che pensa possano interessargli, evitando che si apra continuamente una foto.Dax87 ha scritto:ecco un suggerimento trovato dai nostri amici americani/inglesi:
Hi,
1. Open your working product info.php and from there add the following code, its in the install.txt file
2. Open catalog/product_info.php
Find </head>
just above add
<link rel="stylesheet" href="lightbox/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox/prototype.js"></script>
<script type="text/javascript" src="lightbox/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightbox/builder.js"></script>
<script type="text/javascript" src="lightbox/lightbox.js"></script>
3. Next you need to edit the code which displays popup images and add the relation to lightbox, rel="lightbox", you will find this lower down the product_info.php around line 108 staring with <script language="javascript"><!--
document.write('<?php echo '<a href="java script:popupWindow .
If you do a search for "ENLARGE" you should find it
With clean MS2.2 Find
<script language="javascript"><!--
document.write('<?php echo '<a href="java script: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>
Replace with
<script language="javascript"><!--
document.write('<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank" rel="lightbox" title="'.$product_info['products_name'].'" >' . 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>'; ?>');
//--></script>
<noscript>
<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank" rel="lightbox" title="'.$product_info['products_name'].'" >' . 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>
4. Test and then upload to your live server
PROVATO semplicissimo e funzionale...
ps: per le images/e i js del lightbox le trovi qui:
http://addons.oscommerce.com/info/5456
in ogni caso grazie mille, potrebbe tornarmi utile
Re: Zoom immagini passaggio mouse
Se vuoi provare a vedere l'effetto visita il mio sito lo trovi nella firma..anairolf ha scritto:
grazie mille, ci proverò. anche se non sono tanto convinta della scelta, nel senso che ho visto l'effetto su un sito che ho trovato per caso ed è snervante il fatto che si apra un'immagine al solo passaggio del mouse, toglie ogni curiosità al visitatore, anche perchè nell'elenco prodotti ho ingrandito abbastanza le foto per permettere al visitatore di entrare nelle schede dei prodotti che pensa possano interessargli, evitando che si apra continuamente una foto.
in ogni caso grazie mille, potrebbe tornarmi utile
Infatti l'effetto è quello che dici te ovvero ti apre l'immagine solo quando va nella scheda prodotto e non nella home o nei box laterali...
volendo c'e la possibilita' anche di aggiungere immagini extra e sempre con il lightbox pero' questa altra parte di codice ancora non l'ho inserita perche' tanto per quanto riguarda il mio store non mi serve per ora... e cmq questa funzione non apre la pagina al passaggio del mouse ma praticamente ti zoom l'immagine se il cliente clicca ovvero invece di aprirsi in popup si apre nella pagina stessa della scheda prodotto .. ormai sono tutti cosi i sistemi di zoom immagine nei vari siti.
http://www.renner-italia.com
RENNER RICAMBISTICA COMPONENTI PER PIANOFORTI.
RENNER RICAMBISTICA COMPONENTI PER PIANOFORTI.
Re: Zoom immagini passaggio mouse
ah e l'effetto nella scheda prodotto l'ho già messo così come nel tuo. ho usato la contribution "simple multiple images"Dax87 ha scritto:
Se vuoi provare a vedere l'effetto visita il mio sito lo trovi nella firma..
Infatti l'effetto è quello che dici te ovvero ti apre l'immagine solo quando va nella scheda prodotto e non nella home o nei box laterali...
volendo c'e la possibilita' anche di aggiungere immagini extra e sempre con il lightbox pero' questa altra parte di codice ancora non l'ho inserita perche' tanto per quanto riguarda il mio store non mi serve per ora... e cmq questa funzione non apre la pagina al passaggio del mouse ma praticamente ti zoom l'immagine se il cliente clicca ovvero invece di aprirsi in popup si apre nella pagina stessa della scheda prodotto .. ormai sono tutti cosi i sistemi di zoom immagine nei vari siti.
Re: Zoom immagini passaggio mouse
ah ok... invece te intendevi che ti si apra l'immagine al passaggio del mouse un po' come la nuova funzione nelle pagine di ricerca di google !? che affianco all' URL ti apre direttamente la pagina in anteprima...anairolf ha scritto:ah e l'effetto nella scheda prodotto l'ho già messo così come nel tuo. ho usato la contribution "simple multiple images"Dax87 ha scritto:
Se vuoi provare a vedere l'effetto visita il mio sito lo trovi nella firma..
Infatti l'effetto è quello che dici te ovvero ti apre l'immagine solo quando va nella scheda prodotto e non nella home o nei box laterali...
volendo c'e la possibilita' anche di aggiungere immagini extra e sempre con il lightbox pero' questa altra parte di codice ancora non l'ho inserita perche' tanto per quanto riguarda il mio store non mi serve per ora... e cmq questa funzione non apre la pagina al passaggio del mouse ma praticamente ti zoom l'immagine se il cliente clicca ovvero invece di aprirsi in popup si apre nella pagina stessa della scheda prodotto .. ormai sono tutti cosi i sistemi di zoom immagine nei vari siti.
Non male come idea.... allora penso che basti trovare uno script che faccia questo e poi integrarlo nelle pagine di tuo interesse...
http://www.renner-italia.com
RENNER RICAMBISTICA COMPONENTI PER PIANOFORTI.
RENNER RICAMBISTICA COMPONENTI PER PIANOFORTI.
Re: Zoom immagini passaggio mouse
ma porca vacca....
ho toccato qualcosa nel pannello di amministrazione avevo messo un true al posto di un false..
Adesso il Lightbox NON mi funziona piu' anche se il sorgente product_info.php è corretto.. Anche le immagini extra in lightbox non mi fungono (
devo toccare qualcosa nel database??? ma non ho idea di dove toccare... devo andare in images su pannello amministrazione? oppure modificare qualche codice dove ci sono gli script per il popup di immagine?? pero' mi sembra tutto corretto (
esempio:
http://www.piatino.it/Store/product_inf ... cts_id=190
ho toccato qualcosa nel pannello di amministrazione avevo messo un true al posto di un false..
Adesso il Lightbox NON mi funziona piu' anche se il sorgente product_info.php è corretto.. Anche le immagini extra in lightbox non mi fungono (
devo toccare qualcosa nel database??? ma non ho idea di dove toccare... devo andare in images su pannello amministrazione? oppure modificare qualche codice dove ci sono gli script per il popup di immagine?? pero' mi sembra tutto corretto (
esempio:
http://www.piatino.it/Store/product_inf ... cts_id=190
http://www.renner-italia.com
RENNER RICAMBISTICA COMPONENTI PER PIANOFORTI.
RENNER RICAMBISTICA COMPONENTI PER PIANOFORTI.
Re: Zoom immagini passaggio mouse
mmmm e cosa avevi modificato?Dax87 ha scritto:ma porca vacca....
ho toccato qualcosa nel pannello di amministrazione avevo messo un true al posto di un false..
Adesso il Lightbox NON mi funziona piu' anche se il sorgente product_info.php è corretto.. Anche le immagini extra in lightbox non mi fungono (
devo toccare qualcosa nel database??? ma non ho idea di dove toccare... devo andare in images su pannello amministrazione? oppure modificare qualche codice dove ci sono gli script per il popup di immagine?? pero' mi sembra tutto corretto (
esempio:
http://www.piatino.it/Store/product_inf ... cts_id=190
forse basterebbe ripristinare un file sotto admin... ma a capire quale sarà stato modificato...
Re: Zoom immagini passaggio mouse
risolto risolto... Finalmente ho in lightbox sia l'immagine prodotto che anche immagini extra nel caso le voglia inserire.. come nel link presente che avevo segnalato per il malfunzionamento del mio store..anairolf ha scritto:mmmm e cosa avevi modificato?Dax87 ha scritto:ma porca vacca....
ho toccato qualcosa nel pannello di amministrazione avevo messo un true al posto di un false..
Adesso il Lightbox NON mi funziona piu' anche se il sorgente product_info.php è corretto.. Anche le immagini extra in lightbox non mi fungono (
devo toccare qualcosa nel database??? ma non ho idea di dove toccare... devo andare in images su pannello amministrazione? oppure modificare qualche codice dove ci sono gli script per il popup di immagine?? pero' mi sembra tutto corretto (
esempio:
http://www.piatino.it/Store/product_inf ... cts_id=190
forse basterebbe ripristinare un file sotto admin... ma a capire quale sarà stato modificato...
Penso ci fossero' errori negli script lightbox
http://www.renner-italia.com
RENNER RICAMBISTICA COMPONENTI PER PIANOFORTI.
RENNER RICAMBISTICA COMPONENTI PER PIANOFORTI.