Eternal Community
Welcome to Eternal Community.
Please LOGIN In or REGISTER.
Thanx.
Eternal Community
Welcome to Eternal Community.
Please LOGIN In or REGISTER.
Thanx.
Eternal Community
Doriți să reacționați la acest mesaj? Creați un cont în câteva clickuri sau conectați-vă pentru a continua.


 
AcasaAcasa  CăutareCăutare  ÎnregistrareÎnregistrare  ConectareConectare  



• Regula 1.
• Regula 2.
• Regula 3.
• Regula 4.
• Regula 5.






Content slider

Membru-LZ: Baietel[MD]

Baietel[MD]
Membru Level II

Posts Posts : 394
Birthday Birthday : 03/03/1997
Age Age : 25
Location Location : Republic Of Moldova (Chisinau)
Job/hobbies Job/hobbies : Web-Master,School
Humor Humor : Gou Gou Gou !

Content slider Empty



Content slider Empty
MesajSubiect: Content slider Content slider EmptyMar Mar 15, 2011 12:09 am

Descriere:
Un slider ce va ofera posibilitatea sa navigati mai usor printre postarile/subiectele dvs., sau sa gestionati mai usor notatile.

Demonstratie:
Demonstratie aici

Instalare:

1. CSS
Adaugati codul urmator in CSS:

#
Cod:
featured{
  width:400px;
  padding-right:250px;
  position:relative;
  border:5px solid #ccc;
  height:250px; overflow:hidden;
  background:#fff;
}
#featured ul.ui-tabs-nav{
  position:absolute;
  top:0; left:400px;
  list-style:none;
  padding:0; margin:0;
  width:250px; height:250px;
  overflow:auto;
  overflow-x:hidden;
}
#featured ul.ui-tabs-nav li{
  padding:1px 0; padding-left:13px; 
  font-size:12px;
  color:#666;
}
#featured ul.ui-tabs-nav li img{
  float:left; margin:2px 5px;
  background:#fff;
  padding:2px;
  border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{
  font-size:11px; font-family:Verdana;
  line-height:18px;
}
#featured li.ui-tabs-nav-item a{
  display:block;
  height:60px; text-decoration:none;
  color:#333;  background:#fff;
  line-height:20px; outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
  background:#f2f2f2;
}
#featured li.ui-tabs-selected{
  background:url('http://i64.servimg.com/u/f64/15/54/81/90/select10.gif') top left no-repeat; 
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
  background:#ccc;
}
#featured .ui-tabs-panel{
  width:400px; height:250px;
  background:#999; position:relative;
}
#featured .ui-tabs-panel .info{
  position:absolute;
  bottom:0; left:0;
  height:70px;
  background: url('http://i64.servimg.com/u/f64/15/54/81/90/transp10.png');
}
#featured .ui-tabs-panel .info a.hideshow{
 
  position:absolute; font-size:11px; font-family:Verdana; color:#f0f0f0;
 right:10px; top:-20px; line-height:20px; margin:0; outline:none;
background:#333;
}
#featured .info h2{
  font-size:1.2em; font-family:Georgia, serif;
  color:#fff; padding:5px; margin:0; font-weight:normal;
  overflow:hidden;
}
#featured .info p{
  margin:0 5px;
  font-family:Verdana; font-size:11px;
  line-height:15px; color:#f0f0f0;
}
#featured .info a{
  text-decoration:none;
  color:#fff;
}
#featured .info a:hover{
  text-decoration:underline;
}
#featured .ui-tabs-hide{
  display:none;
}

2.JavaScript
Adaugati codul urmator in <head>

Cod:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
  $(document).ready(function(){
      $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
  });
</script>

3.HTML
Acest cod puteti sa-l adaugati oriunde doriti dvs.

Cod:
<div id="featured" > 
    <ul class="ui-tabs-nav"> 
 
      <li class="ui-tabs-nav-item ui-tabs-selected"
id="nav-fragment-1"><a href="#fragment-1"><img src="LINK
IMAGINE MICA 1" alt="" /><span>TITLU
1</span></a></li> 
        <li
class="ui-tabs-nav-item" id="nav-fragment-2"><a
href="#fragment-2"><img src="LINK IMAGINE MICA 2" alt=""
/><span>TITLU 2</span></a></li> 
       
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a
href="#fragment-3"><img src="LINK IMAGINE MICA 3" alt=""
/><span>TITLU 3</span></a></li> 
       
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a
href="#fragment-4"><img src="LINK IMAGINE MICA 4" alt=""
/><span>TITLU 4</span></a></li> 
    </ul> 
    <!-- Continut 1 (corespunde cu TITLU 1) --> 
    <div id="fragment-1" class="ui-tabs-panel" style=""> 
        <img src="LINK IMAGINE MARE 1" alt="" /> 
        <div class="info" > 
        <h2><a href="#" >TITLU 1</a></h2> 
        <p>DESCRIERE</p> 
        </div> 
    </div> 
    <!-- Continut 2 (corespunde cu TITLU 2) --> 
    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style=""> 
        <img src="LINK IMAGINE MARE 2" alt="" /> 
        <div class="info" > 
        <h2><a href="#" >TITLU 2</a></h2> 
        <p>DESCRIERE</p> 
        </div> 
    </div> 
    <!-- Continut 3 (corespunde cu TITLU 3) --> 
    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style=""> 
        <img src="LINK IMAGINE MARE 3" alt="" /> 
        <div class="info" > 
        <h2><a href="#" >TITLU 3</a></h2> 
        <p>DESCRIERE</p> 
        </div> 
    </div> 
    <!-- Continut 4 (corespunde cu TITLU 4) -->   
    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style=""> 
        <img src="LINK IMAGINE MARE 4" alt="" /> 
        <div class="info" > 
        <h2><a href="#" >TITLU 4</a></h2> 
        <p>DESCRIERE</p> 
        </div> 
    </div> 
</div> 
Legenda:LINK IMAGINE MICA # - reprezinta imaginea in miniatura de la un slide.
TITLU # - reprezinta titlul unui slide.
LINK IMAGINE MARE # - reprezinta imaginea unui slide.
DESCRIERE - reprezinta descrierea unui slide.


!!! Pentru ForumGratuit
Pasii 2 si 3 de la instalare se pot alipi, formand un cod care se poate adauga in Mesaj de pe pagina de start, sau intr-un widget din portal

Cod:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
  $(document).ready(function(){
      $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
  });
</script>


<div id="featured" > 
    <ul class="ui-tabs-nav"> 
 
      <li class="ui-tabs-nav-item ui-tabs-selected"
id="nav-fragment-1"><a href="#fragment-1"><img src="LINK
IMAGINE MICA 1" alt="" /><span>TITLU
1</span></a></li> 
        <li
class="ui-tabs-nav-item" id="nav-fragment-2"><a
href="#fragment-2"><img src="LINK IMAGINE MICA 2" alt=""
/><span>TITLU 2</span></a></li> 
       
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a
href="#fragment-3"><img src="LINK IMAGINE MICA 3" alt=""
/><span>TITLU 3</span></a></li> 
       
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a
href="#fragment-4"><img src="LINK IMAGINE MICA 4" alt=""
/><span>TITLU 4</span></a></li> 
    </ul> 
    <!-- Continut 1 (corespunde cu TITLU 1) --> 
    <div id="fragment-1" class="ui-tabs-panel" style=""> 
        <img src="LINK IMAGINE MARE 1" alt="" /> 
        <div class="info" > 
        <h2><a href="#" >TITLU 1</a></h2> 
        <p>DESCRIERE</p> 
        </div> 
    </div> 
    <!-- Continut 2 (corespunde cu TITLU 2) --> 
    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style=""> 
        <img src="LINK IMAGINE MARE 2" alt="" /> 
        <div class="info" > 
        <h2><a href="#" >TITLU 2</a></h2> 
        <p>DESCRIERE</p> 
        </div> 
    </div> 
    <!-- Continut 3 (corespunde cu TITLU 3) --> 
    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style=""> 
        <img src="LINK IMAGINE MARE 3" alt="" /> 
        <div class="info" > 
        <h2><a href="#" >TITLU 3</a></h2> 
        <p>DESCRIERE</p> 
        </div> 
    </div> 
    <!-- Continut 4 (corespunde cu TITLU 4) -->   
    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style=""> 
        <img src="LINK IMAGINE MARE 4" alt="" /> 
        <div class="info" > 
        <h2><a href="#" >TITLU 4</a></h2> 
        <p>DESCRIERE</p> 
        </div> 
    </div> 
</div>

Tutorial creat de Kozmyn
Pentru NetCustoms.net
Toate drepturile rezevate!

Sursa: Web Developer+
















Admin Panel
Design and coded by eTn Team
Creeaza un forum | © phpBB | Forum gratuit de suport | Semnaleaza un abuz | Discuții recente