SHARE ON

Customize your profiles
Import your ads

Many new applications
For your activities

A new social network
Different from the others

Ads on Google maps
Rich of details and images

Use our applications
Directly on your sites

EsaJob

What
Where
Area

Preventivi gratuiti per certificazioni energetiche
Publicity

 

 

Rendering 3D

 

Your banner on EsaJob

 

 
EsaJob application EsaJob Slide Show


To use EsaJob Slide Show on your sites you must only to copy a simple script on your site.

 

 

Practice examples for the site http://www.origamimauro.it

 

 

1) Script to copy on your site

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

 

 

2) Copy the script on your site after the the opening 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) How it works

  1<div style="position:relative; width:634px; height:260px; overflow:hidden;">
  2	<div id="MySlide">
  3		HTML CONTENT TO BE SCROLLED
  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) Ientifier of the <div> to be scrolled. The HTML content to be scrolled should be put inside.

(MySlide_pallini) should be set with the same identifier (MySlide) of the <div> to be scrolled followeb by _pallini.

(var MySlideExample = new ...) Create a new slider called MySlideExample.

(MySlideExample.init(); Starts the createed Slider (MySlideExample).

 

Function to be called:

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

 

Function parameters:

(SliderName) Name given to Slider ('MySlideExample').

(DivToMove) Identifier of the <div> to be scrolled ('MySlide').

(StepsNumber) Total number of steps to perform. If continuous movement Slider put 2.

(PixelOneStep) Total number of pixels between two steps of the Slider. Example (634).

(Type) Slider type ('Ori' Horizontal Slide Show) ('Ver' Vertical Slide Show).

(PixelMove) Number of pixels used for scrolling. Determines scrolling speed. To set 5 pixels (5).

(StepsTime) Millisencondi pause time between two steps. For 6 seconds (6000).

(MoveTime) Cicle frequency in milliseconds of the <div> to scroll. For a hundredth of a second (10).

(Spots) Show spots. Default value true. Possible values (true,false).

 

Public methods available:

(.init()) Slider constructor. It is called only one time to make the Slide Show start. (MySlideExample.init();)

(.stopMove()) Stop the Slider at the reach of the next step (MySlideExample.stopMove();)

(.startMove()) Restart the Slider only if has been called the method .stopMove() (MySlideExample.startMove();)

(.pause()) Pause the Slider (MySlideExample.pause();)

(.stopPause()) Restart the slider only if has been called the method .pause() (MySlideExample.stopPause();)

(.changeDirection()) Changes the Slider direction (MySlideExample.changeDirection();)

(.next(StepNumber)) Jumps the selected Step. Steps starts form 0 (MySlideExample.next(5);)

(.goNextRight()) Goes to the next step on the right (MySlideExample.goNextRight();)

(.goNextLeft()) Goes to the next step on the left (MySlideExample.goNextLeft();)

(.destroy()) Destroys the current Slider (MySlideExample.destroy();)

 

Example Call:

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

MySlideExample.init();

 

 

Example code: 1 Horizontal Slide Show with Steps.

  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>

 

 

Example code: 2 Horizontal Slide Show with continuous movement.

  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>

 

 

Example code: 3 Horizontal Slide Show with Steps.

  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>

 

 

Example code: 4 Horizontal Slide Show with Steps.

  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>

 

 

Example code: 5 Vertical Slide Show with Steps.

 

Image text 1

Image text 2

Image text 3

Image text 4

Image text 5

Image text 6

Image text 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/>Image text 1</div>
  5		<div style="height:100px;"><img src="http://www.esajob.com/immagini/Pubblicita/OrigamiMauro.jpg" alt="" /><br/>Image text 2</div>
  6		<div style="height:100px;"><img src="http://www.esajob.com/immagini/Pubblicita/CentroDiffusioneOrigami.jpg" alt="" /><br/>Image text 3</div>
  7		<div style="height:100px;"><img src="http://www.esajob.com/immagini/Pubblicita/DuoEntrActe.jpg" alt="" /><br/>Image text 4</div>
  8		<div style="height:100px;"><img src="http://www.esajob.com/immagini/Pubblicita/OrigamiShop.jpg" alt="" /><br/>Image text 5</div>
  9		<div style="height:100px;"><img src="http://www.esajob.com/immagini/Pubblicita/OkService.jpg" alt="" /><br/>Image text 6</div>
 10		<div style="height:100px;"><img src="http://www.esajob.com/immagini/Pubblicita/KimaniDesign.jpg" alt="" /><br/>Image text 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>

 

 

Example code: 6 Vertical Slide Show with continuous movement.

  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>

 

 

Example code: 7 Vertical Slide Show with continuous movement.

 

 

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