ARGOMENTO:

Gallery foto nel template eBay con miniature in orizzonatale 9 Anni 2 Mesi fa #1021

Paolo Tateo
Autore della discussione
Assente
Rank
Messaggi: 486
Ringraziamenti ricevuti 73

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

Forum

Marketplace

eBay

Gallery foto nel template eBay con miniature in orizzonatale

Tempo creazione pagina: 0.063 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]

Servizio online self service

Servizio chiavi in mano

ARGOMENTO:

Gallery foto nel template eBay con miniature in orizzonatale 9 Anni 2 Mesi fa #1021

bindCommerce s.r.l.

Informazioni

In evidenza