Principală » Slide-uri » Slide Nr.3

Slide Nr.3

Demo:







Instrctiuni :

  • Descarcati arhiva.
  • Extrageti arhiva si intrati in folderul slide.
  • Acolo aveti folderul images acolo va puteti pune ce imagini doriti sa apara dar nu schimbati denumirea lasat 1.jpg sau 2.jpg ... pana la 5 maxim.
  • Apoi intrati in  CP » Customize design » Global blocks.
  • Creati un block cu numele slide.
  • Si in el puneti scriptul slide-ului de mai jos :

Code

  <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen">
  <style>
  background:transparent url(back.png) no-repeat top left;
  position:fixed;
  width:150px;
  height:27px;
  outline:none;
  bottom:0px;
  left:0px;
  }
  #content{
  margin:150px auto 10px auto;
  }
  .reference{
  clear:both;
  width:800px;
  margin:30px auto;
  }
  .reference p a{
  text-transform:uppercase;
  text-shadow:1px 1px 1px #fff;
  color:#666;
  text-decoration:none;
  font-size:10px;
  }
  .reference p a:hover{
  color:#333;
  }
  </style>
   
   
  <div id="content">
  <a class="back" href=""></a>

  <div class="rotator">
  <ul id="rotmenu">
  <li>
  <a href="rot1">Post 1</a>
  <div style="display:none;">
  <div class="info_image">1.jpg</div>
  <div class="info_heading">TITLE 1</div>
  <div class="info_description">
  Pro-Design.uCoz.ro...  
  <a href="http://pro-design.ucoz.ro" class="more">Read more</a>
  </div>
  </div>
  </li>
  <li>
  <a href="rot2">Post 2</a>
  <div style="display:none;">
  <div class="info_image">2.jpg</div>
  <div class="info_heading">TITLE 2</div>
  <div class="info_description">
  Descriere...
  <a href="#" class="more">Read more</a>
  </div>
  </div>
  </li>
  <li>
  <a href="rot3">Post 3</a>
  <div style="display:none;">
  <div class="info_image">3.jpg</div>
  <div class="info_heading">TITLE 3</div>
  <div class="info_description">
  Descriere...
  <a href="#" class="more">Read more</a>
  </div>
  </div>
  </li>
  <li>
  <a href="rot4">Post 4</a>
  <div style="display:none;">
  <div class="info_image">4.jpg</div>
  <div class="info_heading">TITLE 4</div>
  <div class="info_description">
  Descriere...
  <a href="#" class="more">Read more</a>
  </div>
  </div>
  </li>
  <li>
  <a href="rot5">Post 5</a>
  <div style="display:none;">
  <div class="info_image">5.jpg</div>
  <div class="info_heading">TITLE 5</div>
  <div class="info_description">
  Descriere...  
  <a href="#" class="more">Read more</a><a href="rot5">Applications</a>
  <div style="display:none;">
  <div class="info_image">5.jpg</div>
  <div class="info_heading">TITLE</div>
  <div class="info_description">
  Descriere...  
  <a href="#" class="more">Read more</a>  
  </div>
  </div>
  </div></div></li>
  </ul>
  <div id="rot1">
  <img src="" class="bg" alt="" height="300" width="800">
  <div class="heading">
  <h1></h1>
  </div>
  <div class="description">
  <p></p>

  </div>  
  </div>
  </div>
  </div>
  <div class="reference">
  </div>
  <!-- The JavaScript -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script type="text/javascript" src="http://stock-exchange.ucoz.com/990/jquery.easing.1.3.js"></script>
  <script type="text/javascript">
  $(function() {
  var current = 1;
   
  var iterate = function(){
  var i = parseInt(current+1);
  var lis = $('#rotmenu').children('li').size();
  if(i>lis) i = 1;
  display($('#rotmenu li:nth-child('+i+')'));
  }
  display($('#rotmenu li:first'));
  var slidetime = setInterval(iterate,3000);
   
  $('#rotmenu li').bind('click',function(e){
  clearTimeout(slidetime);
  display($(this));
  e.preventDefault();
  });
   
  function display(elem){
  var $this = elem;
  var repeat = false;
  if(current == parseInt($this.index() + 1))
  repeat = true;
   
  if(!repeat)
  $this.parent().find('li:nth-child('+current+') a').stop(true,true).animate({'marginRight':'-20px'},300,function(){
  $(this).animate({'opacity':'0.7'},700);
  });
   
  current = parseInt($this.index() + 1);
   
  var elem = $('a',$this);
   
  elem.stop(true,true).animate({'marginRight':'0px','opacity':'1.0'},300);
   
  var info_elem = elem.next();
  $('#rot1 .heading').animate({'left':'-420px'}, 500,'easeOutCirc',function(){
  $('h1',$(this)).html(info_elem.find('.info_heading').html());
  $(this).animate({'left':'0px'},400,'easeInOutQuad');
  });
   
  $('#rot1 .description').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
  $('p',$(this)).html(info_elem.find('.info_description').html());
  $(this).animate({'bottom':'0px'},400,'easeInOutQuad');
  })
  $('#rot1').prepend(
  $('<img/>',{
  style : 'opacity:0',
  className : 'bg'
  }).load(
  function(){
  $(this).animate({'opacity':'1'},600);
  $('#rot1 img:first').next().animate({'opacity':'0'},700,function(){
  $(this).remove();
  });
  }
  ).attr('src','images/'+info_elem.find('.info_image').html()).attr('width','800').attr('height','300')
  );
  }
  });
  </script>
  

Atentie : 
In loc de Post 1, Post 2 ... Post 5 puteti pune alt nume ce doriti.
In loc de TITLE 1,TITLE 2 .....TITLE 5 puteti pune alt titlu.
La Descriere... va puteti pune cate o descriere la fiecare imagine .
Iar in loc de
# din link-ul de sub descriere <a href="#" class="more">Read more</a> puteti
pune link catre post.


  • Acum puneti $GLOBAL_SLIDE$ unde doriti sa apara slide-ul.
      




Voturi : 0 | Rating : 0.0


Total comentarii : 0
Doar utilizatorii înregistraţi pot adăuga comentarii
[ Înregistrare | Logare ]

Abonare

Aboneaza-te gratuit si vei primi noi template-uri prin email !

Introduceti mai jos adresa de email :



Google Plus

Mini-Chat

ОК

Statistica


Total online: 1
Vizitatori: 1
Utilizatori: 0