შესვლა

გთავაზობთ სლაიდერის ოთხ ვარიანტს რომლებსაც გააჩნია ძალიან ლამაზის გადასვლის ეფექტი და გაფორმების სტილი ნახეთ ნიმუში

Code
<script type="text/javascript" src="http://esezo.com/she/skr/001/147/skr147.js"></script><div id="lofslidecontent45" class="lof-slidecontent">  
<div class="preload"><div></div></div>  
<!------------------------------------- THE CONTENT ------------------------------------------------->  
<div class="lof-main-wapper">  

<div class="lof-main-item">  
<img src="http://esezo.com/she/skr/001/147/1.jpg" title="Newsflash 1" height="300" width="900">  
<div class="lof-main-item-desc">  
<h3><a target="_parent" title="Newsflash 1" href="#">Newsflash 1</a></h3>  
<p>Joomla! makes it easy to launch a Web site of any kind. Whether you want a brochure site or you are...</p>  
</div>  
</div>  

<div class="lof-main-item">  
<img src="http://esezo.com/she/skr/001/147/2.jpg" title="Newsflash 2" height="300" width="900">  
<div class="lof-main-item-desc">  
<h3><a target="_parent" title="Newsflash 2" href="#">Newsflash 2</a></h3>  
<p>With a library of thousands of free Extensions, you can add what you need as your site grows. Don't...</p>  
</div>  
</div>  

<div class="lof-main-item">  
<img src="http://esezo.com/she/skr/001/147/3.jpg" title="Newsflash 3" height="300" width="900">  
<div class="lof-main-item-desc">  
<h3><a target="_parent" title="Newsflash 3" href="#">Newsflash 3</a></h3>  
<p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p>  
</div>  
</div>  

<div class="lof-main-item">  
<img src="http://esezo.com/she/skr/001/147/4.jpg" title="Newsflash 4" height="300" width="900">  
<div class="lof-main-item-desc">  
<h3><a target="_parent" title="Newsflash 4" href="#">Newsflash 4</a></h3>  
<p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p>  
</div>  
</div></div>  

<!-------------------------------------------------------------------------------------->  

<div class="lof-navigator-outer">  
<ul class="lof-navigator">  

<li>  
<div>  
<img src="http://esezo.com/she/skr/001/147/11.jpg" />  
<h3> NewsFlash 1 </h3>  
<span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu...  
</div>  
</li>  

<li>  
<div>  
<img src="http://esezo.com/she/skr/001/147/22.jpg" />  
<h3> NewsFlash 2 </h3>  
<span>20.01.2010</span> -In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..  
</div>  
</li>  

<li>  
<div>  
<img src="http://esezo.com/she/skr/001/147/33.jpg" />  
<h3> NewsFlash 3 </h3>  
<span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..  
</div>  
</li>  

<li>  
<div>  
<img src="http://esezo.com/she/skr/001/147/44.jpg" />  
<h3> NewsFlash 4</h3>  
<span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..  
</div>  
</li>  
</ul>  

</div>  
</div>  

<script type="text/javascript">  
var _lofmain = $('lofslidecontent45');  
var _lofscmain = _lofmain.getElement('.lof-main-wapper');  
var _lofnavigator = _lofmain.getElement('.lof-navigator-outer .lof-navigator');  
var object = new LofFlashContent( _lofscmain,  
_lofnavigator,  
_lofmain.getElement('.lof-navigator-outer'),  
{ fxObject:{ transition:Fx.Transitions.Quad.easeInOut, duration:800},  
interval:3000,  
direction:'opacity' } );  
object.start( true, _lofmain.getElement('.preload') );  
</script>

Code
<script type="text/javascript" src="http://esezo.com/she/skr/001/147/skr147.js"></script><div id="lofslidecontent45" class="lof-slidecontent lof-snleft">  
<div class="preload"><div></div></div>  
<!------------------------------------- THE CONTENT ------------------------------------------------->  
<div class="lof-main-wapper">  

<div class="lof-main-item">  
<img src="http://esezo.com/she/skr/001/147/1.jpg" title="Newsflash 1" height="300" width="900">  
<div class="lof-main-item-desc">  
<h3><a target="_parent" title="Newsflash 1" href="#">Newsflash 1</a></h3>  
<p>Joomla! makes it easy to launch a Web site of any kind. Whether you want a brochure site or you are...</p>  
</div>  
</div>  

<div class="lof-main-item">  
<img src="http://esezo.com/she/skr/001/147/2.jpg" title="Newsflash 2" height="300" width="900">  
<div class="lof-main-item-desc">  
<h3><a target="_parent" title="Newsflash 2" href="#">Newsflash 2</a></h3>  
<p>With a library of thousands of free Extensions, you can add what you need as your site grows. Don't...</p>  
</div>  
</div>  

<div class="lof-main-item">  
<img src="http://esezo.com/she/skr/001/147/3.jpg" title="Newsflash 3" height="300" width="900">  
<div class="lof-main-item-desc">  
<h3><a target="_parent" title="Newsflash 3" href="#">Newsflash 3</a></h3>  
<p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p>  
</div>  
</div>  

<div class="lof-main-item">  
<img src="http://esezo.com/she/skr/001/147/4.jpg" title="Newsflash 4" height="300" width="900">  
<div class="lof-main-item-desc">  
<h3><a target="_parent" title="Newsflash 4" href="#">Newsflash 4</a></h3>  
<p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p>  
</div>  
</div></div>  

<!-------------------------------------------------------------------------------------->  

<div class="lof-navigator-outer">  
<ul class="lof-navigator">  

<li>  
<div>  
<img src="http://esezo.com/she/skr/001/147/11.jpg" />  
<h3> NewsFlash 1 </h3>  
<span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu...  
</div>  
</li>  

<li>  
<div>  
<img src="http://esezo.com/she/skr/001/147/22.jpg" />  
<h3> NewsFlash 2 </h3>  
<span>20.01.2010</span> -In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..  
</div>  
</li>  

<li>  
<div>  
<img src="http://esezo.com/she/skr/001/147/33.jpg" />  
<h3> NewsFlash 3 </h3>  
<span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..  
</div>  
</li>  

<li>  
<div>  
<img src="http://esezo.com/she/skr/001/147/44.jpg" />  
<h3> NewsFlash 4</h3>  
<span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..  
</div>  
</li>  
</ul>  

</div>  
</div>  

<script type="text/javascript">  
var _lofmain = $('lofslidecontent45');  
var _lofscmain = _lofmain.getElement('.lof-main-wapper');  
var _lofnavigator = _lofmain.getElement('.lof-navigator-outer .lof-navigator');  
var object = new LofFlashContent( _lofscmain,  
_lofnavigator,  
_lofmain.getElement('.lof-navigator-outer'),  
{ fxObject:{ transition:Fx.Transitions.Quad.easeInOut, duration:800},  
interval:3000,  
direction:'vrdown' } );  
object.start( true, _lofmain.getElement('.preload') );  
</script>

Code
<script type="text/javascript" src="http://esezo.com/she/skr/001/147/skr147.js"></script><div id="lofslidecontent45" class="lof-slidecontent lof-descleft">  
<div class="preload"><div></div></div>  
<!------------------------------------- THE CONTENT ------------------------------------------------->  
<div class="lof-main-wapper">  

<div class="lof-main-item">  
<img src="http://esezo.com/she/skr/001/147/1.jpg" title="Newsflash 1" height="300" width="900">  
<div class="lof-main-item-desc">  
<h3><a target="_parent" title="Newsflash 1" href="#">Newsflash 1</a></h3>  
<p>Joomla! makes it easy to launch a Web site of any kind. Whether you want a brochure site or you are...</p>  
</div>  
</div>  

<div class="lof-main-item">  
<img src="http://esezo.com/she/skr/001/147/2.jpg" title="Newsflash 2" height="300" width="900">  
<div class="lof-main-item-desc">  
<h3><a target="_parent" title="Newsflash 2" href="#">Newsflash 2</a></h3>  
<p>With a library of thousands of free Extensions, you can add what you need as your site grows. Don't...</p>  
</div>  
</div>  

<div class="lof-main-item">  
<img src="http://esezo.com/she/skr/001/147/3.jpg" title="Newsflash 3" height="300" width="900">  
<div class="lof-main-item-desc">  
<h3><a target="_parent" title="Newsflash 3" href="#">Newsflash 3</a></h3>  
<p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p>  
</div>  
</div>  

<div class="lof-main-item">  
<img src="http://esezo.com/she/skr/001/147/4.jpg" title="Newsflash 4" height="300" width="900">  
<div class="lof-main-item-desc">  
<h3><a target="_parent" title="Newsflash 4" href="#">Newsflash 4</a></h3>  
<p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p>  
</div>  
</div></div>  

<!-------------------------------------------------------------------------------------->  

<div class="lof-navigator-outer">  
<ul class="lof-navigator">  

<li>  
<div>  
<img src="http://esezo.com/she/skr/001/147/11.jpg" />  
<h3> NewsFlash 1 </h3>  
<span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu...  
</div>  
</li>  

<li>  
<div>  
<img src="http://esezo.com/she/skr/001/147/22.jpg" />  
<h3> NewsFlash 2 </h3>  
<span>20.01.2010</span> -In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..  
</div>  
</li>  

<li>  
<div>  
<img src="http://esezo.com/she/skr/001/147/33.jpg" />  
<h3> NewsFlash 3 </h3>  
<span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..  
</div>  
</li>  

<li>  
<div>  
<img src="http://esezo.com/she/skr/001/147/44.jpg" />  
<h3> NewsFlash 4</h3>  
<span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..  
</div>  
</li>  
</ul>  

</div>  
</div>  

<script type="text/javascript">  
var _lofmain = $('lofslidecontent45');  
var _lofscmain = _lofmain.getElement('.lof-main-wapper');  
var _lofnavigator = _lofmain.getElement('.lof-navigator-outer .lof-navigator');  
var object = new LofFlashContent( _lofscmain,  
_lofnavigator,  
_lofmain.getElement('.lof-navigator-outer'),  
{ fxObject:{ transition:Fx.Transitions.Quad.easeInOut, duration:800},  
interval:3000,  
direction:'opacity'  
}  
).start( true, _lofmain.getElement('.preload') );  
</script>

Code
<script type="text/javascript" src="http://esezo.com/she/skr/001/147/skr147.js"></script><div id="lofslidecontent45" class="lof-slidecontent">  
<div class="preload"><div></div></div>  
<!------------------------------------- THE CONTENT ------------------------------------------------->  
<div class="lof-main-wapper">  

<div class="lof-main-item">  
<img src="http://esezo.com/she/skr/001/147/1.jpg" title="Newsflash 1" height="300" width="900">  
<div class="lof-main-item-desc">  
<h3><a target="_parent" title="Newsflash 1" href="#">Newsflash 1</a></h3>  
<p>Joomla! makes it easy to launch a Web site of any kind. Whether you want a brochure site or you are...</p>  
</div>  
</div>  

<div class="lof-main-item">  
<img src="http://esezo.com/she/skr/001/147/2.jpg" title="Newsflash 2" height="300" width="900">  
<div class="lof-main-item-desc">  
<h3><a target="_parent" title="Newsflash 2" href="#">Newsflash 2</a></h3>  
<p>With a library of thousands of free Extensions, you can add what you need as your site grows. Don't...</p>  
</div>  
</div>  

<div class="lof-main-item">  
<img src="http://esezo.com/she/skr/001/147/3.jpg" title="Newsflash 3" height="300" width="900">  
<div class="lof-main-item-desc">  
<h3><a target="_parent" title="Newsflash 3" href="#">Newsflash 3</a></h3>  
<p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p>  
</div>  
</div>  

<div class="lof-main-item">  
<img src="http://esezo.com/she/skr/001/147/4.jpg" title="Newsflash 4" height="300" width="900">  
<div class="lof-main-item-desc">  
<h3><a target="_parent" title="Newsflash 4" href="#">Newsflash 4</a></h3>  
<p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p>  
</div>  
</div>  
</div>  

<!-------------------------------------------------------------------------------------->  

<div class="lof-navigator-outer">  
<ul class="lof-navigator">  

<li>  
<div>  
<img src="http://esezo.com/she/skr/001/147/11.jpg" />  
<h3> NewsFlash 1 </h3>  
<span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu...  
</div>  
</li>  

<li>  
<div>  
<img src="http://esezo.com/she/skr/001/147/22.jpg" />  
<h3> NewsFlash 2 </h3>  
<span>20.01.2010</span> -In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..  
</div>  
</li>  

<li>  
<div>  
<img src="http://esezo.com/she/skr/001/147/33.jpg" />  
<h3> NewsFlash 3 </h3>  
<span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..  
</div>  
</li>  

<li>  
<div>  
<img src="http://esezo.com/she/skr/001/147/44.jpg" />  
<h3> NewsFlash 4</h3>  
<span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..  
</div>  
</li>  
</ul>  
</div>  
</div>  

<script type="text/javascript">  
var _lofmain = $('lofslidecontent45');  
var _lofscmain = _lofmain.getElement('.lof-main-wapper');  
var _lofnavigator = _lofmain.getElement('.lof-navigator-outer .lof-navigator');  
var object = new LofFlashContent( _lofscmain,  
_lofnavigator,  
_lofmain.getElement('.lof-navigator-outer'),  
{ fxObject:{ transition:Fx.Transitions.Quad.easeInOut, duration:800},  
interval:3000,  
direction :'hrleft' } );  
object.start( true, _lofmain.getElement('.preload') );  
</script>





843
ავტორი: BARABANTEMO კატეგორია: სკრიფტები
სულ კომენტარები: 2