Benvenuto, Ospite
Nome utente: Password: Ricordami
  • Pagina:
  • 1

ARGOMENTO:

Gallery foto nel template eBay con miniature in orizzonatale 8 Anni 1 Mese fa #1021

Tempo fa abbiamo aggiornato la nostra guida online con un nuovo articolo che spiegava come introdurre una gallery fotografica all'interno di un template destinato ad un'inserzione eBay.

L'articolo in questione era il seguente: www.bindcommerce.com/it/guide/uso-dei-te...orpo-dell-inserzione.

In questo caso la gallery presenta le proprie miniature accanto all'immagine principale.
E' tuttavia possibile creare una gallery classica, che abbia quindi le thumb in basso, poste al di sotto della foto principale.

Il codice da inserire viene riportato di seguito:

Nella testata del modello è necessario inserire il codice JavaScript e la dichiarazione CSS:
<style type="text/css">
	.single-image {
		margin-right: 3.8px; 
		float: left; 
		height: 75px; 
		width: 75px; 
		margin-bottom: 4px;
	}

</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="display: block; width: 690px; margin-left: auto; margin-right: auto;">
	 <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 style="margin-top: 20px; width: 555px; display: block;"><a href="javascript:focus('picture01')">
		<div class= "single-image">{[(product|from==0|q==1|w==75|h==75|image_big)]}</div>
		</a><a href="javascript:focus('picture02')">
		<div class= "single-image">{[(product|from==1|q==1|w==75|h==75|image_big)]}</div>
		</a><a href="javascript:focus('picture03')">
		<div class= "single-image">{[(product|from==2|q==1|w==75|h==75|image_big)]}</div>
		</a><a href="javascript:focus('picture04')">
		<div class= "single-image">{[(product|from==3|q==1|w==75|h==75|image_big)]}</div>
		</a><a href="javascript:focus('picture05')">
		<div class= "single-image">{[(product|from==4|q==1|w==75|h==75|image_big)]}</div>
		</a><a href="javascript:focus('picture06')">
		<div class= "single-image">{[(product|from==5|q==1|w==75|h==75|image_big)]}</div>
		</a><a href="javascript:focus('picture07')">
		<div class= "single-image">{[(product|from==6|q==1|w==75|h==75|image_big)]}</div>
		</a><a href="javascript:focus('picture08')">
		<div class= "single-image">{[(product|from==7|q==1|w==75|h==75|image_big)]}</div>
		</a><a href="javascript:focus('picture09')">
		<div class= "single-image">{[(product|from==8|q==1|w==75|h==75|image_big)]}</div>
		</a>
	</div>
	
</div>

<div style="clear: both;"> </div>
Ing. Paolo Tateo
CEO bindCommerce

Si prega Accedi a partecipare alla conversazione.

  • Pagina:
  • 1
Tempo creazione pagina: 0.118 secondi

bindCommerce

bindCommerce s.r.l.

Partita IVA IT07798861212 - SDI M5UXCR1
Registro imprese di Napoli - REA: NA - 910618
Capitale Sociale € 20.000,00 interamente versato
Tel: +39 011 089 122 0
E-mail: [email protected]

PON 2014>20 Riaccendiamo lo sviluppo