Galleria fotografie nel corpo dell'inserzione eBay

Attraverso il gestore template, bindCommerce è in grado di produrre gallerie fotografiche per eBay di vario genere, a partite dalle più semplici carrellate verticali di immagini, per arrivare a visualizzazioni più articolate come la seguente.

Album foto battesimo bimbo 30x30 con diario e placca argento artigianale

Il codice da utilizzare è descritto di seguito.

Nella testata del modello è necessario inserire il codice JavaScript ed eventuali dichiarazioni CSS:

<style scoped="scoped" type="text/css">
[.. eventuali stili CSS da applicare dopo]
</style>
<script type="text/javascript">
 function focus(img) {
 if (img == 'picture01') {
 document.getElementById('pic01').style.display = 'inline';
 document.getElementById('pic02').style.display = 'none';
 document.getElementById('pic03').style.display = 'none';
 document.getElementById('pic04').style.display = 'none';
 document.getElementById('pic05').style.display = 'none';
 document.getElementById('pic06').style.display = 'none';
 document.getElementById('pic07').style.display = 'none';
 document.getElementById('pic08').style.display = 'none';
 document.getElementById('pic09').style.display = 'none';
 }
 if (img == 'picture02') {
 document.getElementById('pic01').style.display = 'none';
 document.getElementById('pic02').style.display = 'inline';
 document.getElementById('pic03').style.display = 'none';
 document.getElementById('pic04').style.display = 'none';
 document.getElementById('pic05').style.display = 'none';
 document.getElementById('pic06').style.display = 'none';
 document.getElementById('pic07').style.display = 'none';
 document.getElementById('pic08').style.display = 'none';
 document.getElementById('pic09').style.display = 'none';
 }
 if (img == 'picture03') {
 document.getElementById('pic01').style.display = 'none';
 document.getElementById('pic02').style.display = 'none';
 document.getElementById('pic03').style.display = 'inline';
 document.getElementById('pic04').style.display = 'none';
 document.getElementById('pic05').style.display = 'none';
 document.getElementById('pic06').style.display = 'none';
 document.getElementById('pic07').style.display = 'none';
 document.getElementById('pic08').style.display = 'none';
 document.getElementById('pic09').style.display = 'none';
 }
 if (img == 'picture04') {
 document.getElementById('pic01').style.display = 'none';
 document.getElementById('pic02').style.display = 'none';
 document.getElementById('pic03').style.display = 'none';
 document.getElementById('pic04').style.display = 'inline';
 document.getElementById('pic05').style.display = 'none';
 document.getElementById('pic06').style.display = 'none';
 document.getElementById('pic07').style.display = 'none';
 document.getElementById('pic08').style.display = 'none';
 document.getElementById('pic09').style.display = 'none';
 }
 if (img == 'picture05') {
 document.getElementById('pic01').style.display = 'none';
 document.getElementById('pic02').style.display = 'none';
 document.getElementById('pic03').style.display = 'none';
 document.getElementById('pic04').style.display = 'none';
 document.getElementById('pic05').style.display = 'inline';
 document.getElementById('pic06').style.display = 'none';
 document.getElementById('pic07').style.display = 'none';
 document.getElementById('pic08').style.display = 'none';
 document.getElementById('pic09').style.display = 'none';
 }
 if (img == 'picture06') {
 document.getElementById('pic01').style.display = 'none';
 document.getElementById('pic02').style.display = 'none';
 document.getElementById('pic03').style.display = 'none';
 document.getElementById('pic04').style.display = 'none';
 document.getElementById('pic05').style.display = 'none';
 document.getElementById('pic06').style.display = 'inline';
 document.getElementById('pic07').style.display = 'none';
 document.getElementById('pic08').style.display = 'none';
 document.getElementById('pic09').style.display = 'none';
 }
 if (img == 'picture07') {
 document.getElementById('pic01').style.display = 'none';
 document.getElementById('pic02').style.display = 'none';
 document.getElementById('pic03').style.display = 'none';
 document.getElementById('pic04').style.display = 'none';
 document.getElementById('pic05').style.display = 'none';
 document.getElementById('pic06').style.display = 'none';
 document.getElementById('pic07').style.display = 'inline';
 document.getElementById('pic08').style.display = 'none';
 document.getElementById('pic09').style.display = 'none';
 }
 if (img == 'picture08') {
 document.getElementById('pic01').style.display = 'none';
 document.getElementById('pic02').style.display = 'none';
 document.getElementById('pic03').style.display = 'none';
 document.getElementById('pic04').style.display = 'none';
 document.getElementById('pic05').style.display = 'none';
 document.getElementById('pic06').style.display = 'none';
 document.getElementById('pic07').style.display = 'none';
 document.getElementById('pic08').style.display = 'inline';
 document.getElementById('pic09').style.display = 'none';
 }
 if (img == 'picture09') {
 document.getElementById('pic01').style.display = 'none';
 document.getElementById('pic02').style.display = 'none';
 document.getElementById('pic03').style.display = 'none';
 document.getElementById('pic04').style.display = 'none';
 document.getElementById('pic05').style.display = 'none';
 document.getElementById('pic06').style.display = 'none';
 document.getElementById('pic07').style.display = 'none';
 document.getElementById('pic08').style.display = 'none';
 document.getElementById('pic09').style.display = 'inline';
 }
 }
</script>

Nella parte ove si vuole visualizzare la galleria è possibile inserire un codice simile al seguente:

<div style="float: left; width: 80px; display: block;"><a href="javascript:focus('picture01')">
<div style="margin-bottom: 5px;">{[(product|from==0|q==1|w==75|h==75|image_big)]}</div>
</a><a href="javascript:focus('picture02')">
<div style="margin-bottom: 5px;">{[(product|from==1|q==1|w==75|h==75|image_big)]}</div>
</a><a href="javascript:focus('picture03')">
<div style="margin-bottom: 5px;">{[(product|from==2|q==1|w==75|h==75|image_big)]}</div>
</a><a href="javascript:focus('picture04')">
<div style="margin-bottom: 5px;">{[(product|from==3|q==1|w==75|h==75|image_big)]}</div>
</a><a href="javascript:focus('picture05')">
<div style="margin-bottom: 5px;">{[(product|from==4|q==1|w==75|h==75|image_big)]}</div>
</a><a href="javascript:focus('picture06')">
<div style="margin-bottom: 5px;">{[(product|from==5|q==1|w==75|h==75|image_big)]}</div>
</a><a href="javascript:focus('picture07')">
<div style="margin-bottom: 5px;">{[(product|from==6|q==1|w==75|h==75|image_big)]}</div>
</a><a href="javascript:focus('picture08')">
<div style="margin-bottom: 5px;">{[(product|from==7|q==1|w==75|h==75|image_big)]}</div>
</a><a href="javascript:focus('picture09')">
<div style="margin-bottom: 5px;">{[(product|from==8|q==1|w==75|h==75|image_big)]}</div>
</a>
</div>

<div style="float: left; display: block; width: 690px;">
 <div style="display: inline;" id="pic01">{[(product|from==0|q==1|w==690|h==690|image_big)]}</div>
 <div style="display: none;" id="pic02">{[(product|from==1|q==1|w==690|h==690|image_big)]}</div>
 <div style="display: none;" id="pic03">{[(product|from==2|q==1|w==690|h==690|image_big)]}</div>
 <div style="display: none;" id="pic04">{[(product|from==3|q==1|w==690|h==690|image_big)]}</div>
 <div style="display: none;" id="pic05">{[(product|from==4|q==1|w==690|h==690|image_big)]}</div>
 <div style="display: none;" id="pic06">{[(product|from==5|q==1|w==690|h==690|image_big)]}</div>
 <div style="display: none;" id="pic07">{[(product|from==6|q==1|w==690|h==690|image_big)]}</div>
 <div style="display: none;" id="pic08">{[(product|from==7|q==1|w==690|h==690|image_big)]}</div>
 <div style="display: none;" id="pic09">{[(product|from==8|q==1|w==690|h==690|image_big)]}</div>
</div>
<div style="clear: both;"> </div>

0 su 5 - 0 valutazioni

Grazie per aver valutato questo contenuto.

Servizio online self service

Servizio chiavi in mano

Uso dei templates

Galleria fotografie nel corpo dell'inserzione eBay

Guide

bindCommerce s.r.l.

Informazioni

In evidenza