Your banner on EsaJob
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.
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;"> </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.
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> </p><p> </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 | |
|