CONDIVIDI SU

Personalizza i tuoi profili
Importa i tuoi annunci

Tante nuove applicazioni
Per le tue attività

Un nuovo social network
Diverso dagli altri

Annunci su mappe Google
Ricche di dettagli e immagini

Utilizza le nostre applicazioni
Direttamente sui tuoi siti

EsaJob

Cosa
Dove
Area

Pubblicità

 

 

Rendering 3D

 

Il tuo banner su EsaJob

 

 
EsaJob applicazione EsaJob Slide Show


Per Usare lo Slide Show di EsaJob sui tuoi siti devi solo copiare un semplice script sul tuo sito.

 

 

Esempi pratici per il sito http://www.origamimauro.it

 

 

1) Script da copiare sul tuo sito

  1<script type="text/javascript" src="http://www.esajob.com/componenti/appesterne/js/appesterne.js"></script>

 

 

2) Copia lo script sul tuo sito dopo l'apertura del tag <body>

  1<html>
  2<head>
  3<title>....</title>
  4</head>
  5
  6<body>
  7<script type="text/javascript" src="http://www.esajob.com/componenti/appesterne/js/appesterne.js"></script>
  8
  9
 10</body>
 11</html>

 

 

3) Come funziona

  1<div style="position:relative; width:634px; height:260px; overflow:hidden;">
  2	<div id="MySlide">
  3		CONTENUTO DA SCORRERE IN HTML
  4	</div>
  5	<div id="MySlide_pallini"></div>
  6	<script type="text/javascript">
  7		var MySlideExample = new Uj_Slider('MySlideExample', 'MySlide', 5, 634, 'Ori', 5, 6000, 10);
  8		MySlideExample.init();
  9	</script>
 10</div>

(MySlide) Identificativo del <div> da spostare. Il contenuto html da spostare va al suo interno.

(MySlide_pallini) va impostato con lo stesso identificativo (MySlide) del <div> da spostare seguito da _pallini.

(var MySlideExample = new ...) Crea un nuovo Slider chiamato MySlideExample.

(MySlideExample.init(); Mette in moto lo Slider creato (MySlideExample).

 

Funzione da richiamare:

Uj_Slider(SliderName, DivToMove, StepsNumber, PixelOneStep, Type, PixelMove, StepsTime, MoveTime, Spots);.

 

Parametri funzione:

(SliderName) Nome dato allo Slider ('MySlideExample').

(DivToMove) Identificatico del <div> da spostare. ('MySlide').

(StepsNumber) Numero totale degli scatti da eseguire. Se slider a movimento continuo impostare a 2.

(PixelOneStep) Numero totale di pixel presenti tra due scatti dello Slider. Esempio (634).

(Type) Tipo di slider ('Ori' Slide Show orizzontale) ('Ver' Slide Show verticale).

(PixelMove) Numero pixel utilizzato per lo spostamento. Determina velocità spostamento. Per 5 pixel (5).

(StepsTime) Tempo di pausa in millisencondi tra due scatti. Per 6 secondi (6000).

(MoveTime) Frequenza ciclo in millisecondi del <div> da spostare tra due scatti. Per un centesimo di secondo (10).

(Spots) Mostra i pallini. Predefinito true. Valori possibili (true,false).

 

Metodi pubblici disponibili:

(.init()) Costruttore Slider. Viene chiamato solo una volta per fare partire lo Slide Show. (MySlideExample.init();)

(.stopMove()) Ferma lo slider al raggiungimento dello step successivo (MySlideExample.stopMove();)

(.startMove()) Fa ripartire lo slider solo se è stato chiamato il metodo .stopMove() (MySlideExample.startMove();)

(.pause()) Mette in pausa lo Slider (MySlideExample.pause();)

(.stopPause()) Fa ripartire lo slider solo se è stato chiamato il metodo .pause() (MySlideExample.stopPause();)

(.changeDirection()) Cambia la direzione dello Slider (MySlideExample.changeDirection();)

(.next(StepNumber)) Salta allo step indicato. Le posizioni partono da 0 (MySlideExample.next(5);)

(.goNextRight()) Va al prossimo step sulla destra (MySlideExample.goNextRight();)

(.goNextLeft()) Va al prossimo step sulla sinistra (MySlideExample.goNextLeft();)

(.destroy()) Distrugge lo slider corrente (MySlideExample.destroy();)

 

Esempio di chiamata:

var MySlideExample = new Uj_Slider('MySlideExample', 'MySlide', 5, 634, 'Ori', 5, 6000, 10);

MySlideExample.init();

 

 

Codice di esempio: 1 Slide Show orizzontale a Step.

  1<div style="position:relative; width:634px; height:260px; overflow:hidden;">
  2	<div id="SlideExample1">
  3		<img src="http://www.esajob.com/immagini/slider/presentazione.jpg" alt="" />
  4	</div>
  5	<div id="SlideExample1_pallini"></div>
  6	<script type="text/javascript">
  7		var sliderEx1 = new Uj_Slider('sliderEx1', 'SlideExample1', 5, 634, 'Ori', 25, 6000, 10, true);
  8		sliderEx1.init();
  9	</script>
 10</div>

 

 

Codice di esempio: 2 Slide Show orizzontale Continuo.

  1<div style="position:relative; width:634px; height:260px; overflow:hidden;">
  2	<div id="SlideExemaple2" onmouseover="sliderEx2.pause();" onmouseout="sliderEx2.stopPause();">
  3		<img src="http://www.esajob.com/immagini/slider/presentazione.jpg" alt="" />
  4	</div>
  5	<div id="SlideExample2_pallini"></div>
  6	<script type="text/javascript">
  7		var sliderEx2 = new Uj_Slider('sliderEx2', 'SlideExample2', 2, (634*4), 'Ori', 3, 2000, 50, false);
  8		sliderEx2.init();
  9	</script>
 10</div>

 

 

Codice di esempio: 3 Slide Show orizzontale a Step.

  1<div style="position:relative; width:440px; height:330px; overflow:hidden; border:solid #114776 5px;">
  2	<div id="SlideExample3" style="height:330px;">
  3		<div style="float:left; width:440px; height:330px; text-align:center; overflow:hidden;">
  4			<img src="http://www.esajob.com/immagini/Tour/tag/david_fionda.jpg" alt="" style="height:330px;" />
  5		</div>
  6		<div style="float:left; width:440px; height:330px; text-align:center; overflow:hidden;">
  7			<img src="http://www.esajob.com/immagini/Tour/tag/costellazioni.jpg" alt="" style="height:330px;" />
  8		</div>
  9		<div style="float:left; width:440px; height:330px; text-align:center; overflow:hidden;">
 10			<img src="http://www.esajob.com/immagini/Tour/tag/bacio_giuda.jpg" alt="" style="height:330px;" />
 11		</div>
 12		<div style="float:left; width:440px; height:330px; text-align:center; overflow:hidden;">
 13			<img src="http://www.esajob.com/immagini/Tour/tag/sistemasolare.jpg" alt="" style="height:330px;" />
 14		</div>
 15		<div style="float:left; width:440px; height:330px; text-align:center; overflow:hidden;">
 16			<img src="http://www.esajob.com/immagini/Tour/tag/planimetria.jpg" alt="" style="height:330px;" />
 17		</div>
 18	</div>
 19	<div id="SlideExample3_pallini"></div>
 20	<div style="position:absolute; left:0px; top:140px; cursor:pointer; background-color:#114776;">
 21		<img src="http://www.esajob.com/immagini/slidesx.gif" alt="" onclick="sliderEx3.goNextLeft();"/>
 22	</div>
 23	<div style="position:absolute; right:0px; top:140px; cursor:pointer; background-color:#114776;">
 24		<img src="http://www.esajob.com/immagini/slidedx.gif" alt="" onclick="sliderEx3.goNextRight();" />
 25	</div>
 26	<script type="text/javascript">
 27		var sliderEx3 = new Uj_Slider('sliderEx3', 'SlideExample3', 5, 440, 'Ori', 25, 6000, 10, true);
 28		sliderEx3.init();
 29	</script>
 30</div>

 

 

Codice di esempio: 4 Slide Show orizzontale a Step.

  1<div style="position:relative; width:648px; height:120px; overflow:hidden; border:solid #114776 3px;">
  2	<div id="SlideExample4" style="height:120px;>
  3		<div style="float:left; width:162px; height:120px; text-align:center; overflow:hidden;"><div style="width:160px; overflow:hidden; margin:0 auto;">
  4			<img src="http://www.esajob.com/immagini/Tour/tag/meteoriti.jpg" alt="" style="height:120px; cursor:pointer;" />
  5		</div></div>
  6		<div style="float:left; width:162px; height:120px; text-align:center; overflow:hidden;"><div style="width:160px; overflow:hidden; margin:0 auto;">
  7			<img src="http://www.esajob.com/immagini/Tour/tag/lunapark.jpg" alt="" style="height:120px; cursor:pointer;" />
  8		</div></div>
  9		<div style="float:left; width:162px; height:120px; text-align:center; overflow:hidden;"><div style="width:160px; overflow:hidden; margin:0 auto;">
 10			<img src="http://www.esajob.com/immagini/Tour/tag/macchie_solari.jpg" alt="" style="height:120px; cursor:pointer;" />
 11		</div></div>
 12		<div style="float:left; width:162px; height:120px; text-align:center; overflow:hidden;"><div style="width:160px; overflow:hidden; margin:0 auto;">
 13			<img src="http://www.esajob.com/immagini/Tour/tag/sistemasolare.jpg" alt="" style="height:120px; cursor:pointer;" />
 14		</div></div>
 15		<div style="float:left; width:162px; height:120px; text-align:center; overflow:hidden;"><div style="width:160px; overflow:hidden; margin:0 auto;">
 16			<img src="http://www.esajob.com/immagini/Tour/tag/planimetria.jpg" alt="" style="height:120px; cursor:pointer;" />
 17		</div></div>
 18	</div>
 19	<div id="SlideExample4_pallini"></div>
 20	<div style="position:absolute; left:0px; top:40px; cursor:pointer; background-color:#114776;">
 21		<img src="http://www.esajob.com/immagini/slidesx.gif" alt="" onclick="sliderEx4.goNextLeft();"/>
 22	</div>
 23	<div style="position:absolute; right:0px; top:40px; cursor:pointer; background-color:#114776;">
 24		<img src="http://www.esajob.com/immagini/slidedx.gif" alt="" onclick="sliderEx4.goNextRight();" />
 25	</div>
 26	<script type="text/javascript">
 27		var sliderEx4 = new Uj_Slider('sliderEx4', 'SlideExample4', 5, 162, 'Ori', 20', 6000, 10, true);
 28		sliderEx4.init();
 29	</script>
 30</div>

 

 

Codice di esempio: 5 Slide Show verticale a Step.

 

Testo immagine 1

Testo immagine 2

Testo immagine 3

Testo immagine 4

Testo immagine 5

Testo immagine 6

Testo immagine 7
  1<div style="position:relative; width:205px; height:300px; overflow:hidden; border:solid #114776 3px;">
  2	<div id="SlideExample5" style="margin-left:15px;">
  3		<div style="height:15px;">&nbsp;</div>
  4		<div style="height:100px;"><img src="http://www.esajob.com/immagini/Pubblicita/MarcoDiContiDj.jpg" alt="" /><br/>Testo immagine 1</div>
  5		<div style="height:100px;"><img src="http://www.esajob.com/immagini/Pubblicita/OrigamiMauro.jpg" alt="" /><br/>Testo immagine 2</div>
  6		<div style="height:100px;"><img src="http://www.esajob.com/immagini/Pubblicita/CentroDiffusioneOrigami.jpg" alt="" /><br/>Testo immagine 3</div>
  7		<div style="height:100px;"><img src="http://www.esajob.com/immagini/Pubblicita/DuoEntrActe.jpg" alt="" /><br/>Testo immagine 4</div>
  8		<div style="height:100px;"><img src="http://www.esajob.com/immagini/Pubblicita/OrigamiShop.jpg" alt="" /><br/>Testo immagine 5</div>
  9		<div style="height:100px;"><img src="http://www.esajob.com/immagini/Pubblicita/OkService.jpg" alt="" /><br/>Testo immagine 6</div>
 10		<div style="height:100px;"><img src="http://www.esajob.com/immagini/Pubblicita/KimaniDesign.jpg" alt="" /><br/>Testo immagine 7</div>
 11	</div>
 12	<div id="SlideExample5_pallini"></div>
 13	<div style="position:absolute; right:-2px; top:0px; width:20px; heigth:12px; cursor:pointer; background-color:#114776;" onclick="sliderEx5.goNextLeft();">
 14		<img src="http://www.esajob.com/immagini/slideup.gif" alt="" style="height:10px;" />
 15	</div>
 16	<div style="position:absolute; right:-2px; bottom:0px; width:20px; heigth:12px; cursor:pointer; background-color:#114776;" onclick="sliderEx5.goNextRight();">
 17		<img src="http://www.esajob.com/immagini/slidedown.gif" alt="" style="height:10px;" />
 18	</div>
 19	<script type="text/javascript">
 20		var sliderEx5 = new Uj_Slider('sliderEx5', 'SlideExample5', 7, 100, 'Ver', 12, 4000, 50, true);
 21		sliderEx5.init();
 22	</script>
 23</div>

 

 

Codice di esempio: 6 Slide Show verticale Continuo.

  1<div style="position:relative; width:200px; height:300px; overflow:hidden;">
  2	<div id="SlideExample6" onmouseover="sliderEx6.pause();" onmouseout="sliderEx6.stopPause();">
  3		<div style="height:100px;"><img src="http://www.esajob.com/immagini/Pubblicita/MarcoDiContiDj.jpg" alt="" /></div>
  4		<div style="height:100px;"><img src="http://www.esajob.com/immagini/Pubblicita/OrigamiMauro.jpg" alt="" /></div>
  5		<div style="height:100px;"><img src="http://www.esajob.com/immagini/Pubblicita/CentroDiffusioneOrigami.jpg" alt="" /></div>
  6		<div style="height:100px;"><img src="http://www.esajob.com/immagini/Pubblicita/DuoEntrActe.jpg" alt="" /></div>
  7		<div style="height:100px;"><img src="http://www.esajob.com/immagini/Pubblicita/OrigamiShop.jpg" alt="" /></div>
  8		<div style="height:100px;"><img src="http://www.esajob.com/immagini/Pubblicita/OkService.jpg" alt="" /></div>
  9		<div style="height:100px;"><img src="http://www.esajob.com/immagini/Pubblicita/KimaniDesign.jpg" alt="" /></div>
 10	</div>
 11	<div id="SlideExample6_pallini"></div>
 12	<script type="text/javascript">
 13		var sliderEx6 = new Uj_Slider('sliderEx6', 'SlideExample6', 2, 600, 'Ver', 2, 2000, 50, false);
 14		sliderEx6.init();
 15	</script>
 16</div>

 

 

Codice di esempio: 7 Slide Show verticale Continuo.

 

 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

  1<div style="position:relative; width:165px; height:300px; overflow:hidden; border:solid #114776 3px;">
  2	<div id="SlideExample7" style="width:160px; height:510px;" onmouseover="sliderEx7.pause();" onmouseout="sliderEx7.stopPause();">
  3		<p>&nbsp;</p><p>&nbsp;</p><p style="text-align:justify; padding-left:15px; padding-right:5px;">
  4			Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy 
  5			text ever since the 1500s. when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  6			It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged...
  7		</p>
  8	</div>
  9	<div id="SlideExample7_pallini"></div>
 10	<script type="text/javascript">
 11		var sliderEx7 = new Uj_Slider('sliderEx7', 'SlideExample7', 6, 85, 'Ver', 2, 10, 80, false);
 12		sliderEx7.init();
 13	</script>
 14</div>

 

 

 
    EsaJob
    EsaJob