15. febrero 2013

Slide four sections

      DESCRIPCCION

 

Saludos espero que les guste este slide que quiero compartir con ustedes es lo que siempre quisé tener

Aqui mismo fue editado especialmente para esta pagina pero les comparto el codigo por si 

ustedes quieren tenerlo en su web.

 

 

PASO 1.-  Vas a copiar el CSS y todo el codigo JAVASCRIPT  y lo vas a pasar dentro de el HEAD(cabecera) de tu pagina web. En jimdo vas a AJUTES - EDITAR HEAD, pegas todo y das GUARDAR.

 

PASO 2.-  En el BODY de tu pagina vas a copiar todo el codigo HTML. En jimdo vas a crear un nuevo MODULO y le vas a dar en Widget/HTML pegas y das guardar y actualizas la pagina.

 

 

 

A el codigo HTML le vas a cambiar los textos en rojo seleccionados, el primero es del chat, el segundo de las lista de videos el que sigue es una imagen (544x307 pixeles) y la parte donde colocas imagenes la explico mas adelante.

 


DEMO:


CODIGO HTML:


 

<div class='slider-container'>

<div class='slider-bgr'></div>

<div class="slider">

<div class="fp-slides">

<div class="fp-slides-items fp-first">

<div class="fp-thumbnail">

<iframe src="http://www.xatech.com/web_gear/chat/chat.swf?id=183603293&amp;rl=Spanish" width="100%" height="100%" frameborder="0"></iframe>

</div>

 

</div>

<div class="fp-slides-items">

<div class="fp-thumbnail">

<iframe src="http://www.youtube.com/embed/videoseries?list=PL918A69F65AA94F3A&amp;hl=es_MX" frameborder="0" width="544" scrolling="no" height="307"></iframe>

</div>

 

</div>

 

<div class="fp-slides-items">

<div class="fp-thumbnail">

<img src="http://notoyontoy.site40.net/img/billboard-sfs.png" width="544" height="307" />

</div>

 

</div>

 

<div class="fp-slides-items">

<div class="fp-thumbnail">

<center>

<!--Empieza articulos intereasantes -->

<div style="height: 307px; width: 544px; margin-right: auto; margin-left: auto; overflow-y: scroll;">

<a href="#enlace-del-articulo" class="article-slide-n" title="nombre del articulo"><img src="http://notoyontoy.site40.net/img/article-sfs.png"/></a>

<a href="#enlace-del-articulo" class="article-slide-n" title="nombre del articulo"><img src="http://notoyontoy.site40.net/img/article-sfs.png"/></a>

<a href="#enlace-del-articulo" class="article-slide-n" title="nombre del articulo"><img src="http://notoyontoy.site40.net/img/article-sfs.png"/></a>

<a href="#enlace-del-articulo" class="article-slide-n" title="nombre del articulo"><img src="http://notoyontoy.site40.net/img/article-sfs.png"/></a>

<a href="#enlace-del-articulo" class="article-slide-n" title="nombre del articulo"><img src="http://notoyontoy.site40.net/img/article-sfs.png"/></a>

<a href="#enlace-del-articulo" class="article-slide-n" title="nombre del articulo"><img src="http://notoyontoy.site40.net/img/article-sfs.png"/></a>

</div>

<!-- termina articulos interesantes-->

</center>

 

</div>

 

</div>

</div>

<div class="fp-prev-next-wrap">

<div class="fp-prev-next">

<a href="#" class="fp-next"></a>

<a href="#" class="fp-prev"></a>

</div>

</div>

<div class="fp-nav">

<div class="fp-pager"></div></div>

</div>

 

</div>

 

 

 

 

CSS Y JAVASCRIPT:

Coloca todo el codigo en el head de tu pagina web.

 

 

<link href="http://notoyontoy.site40.net/css/slide-four-sections.css" rel="stylesheet" type="text/css" />

 

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=3.3.1'></script>

<script src="http://notoyontoy.site40.net/Js/jquery.cycle.all.js" type="text/javascript"></script>

 

 

<script type="text/javascript">

  var a = jQuery.noConflict();

        a(document).ready(function() {

 

        a(document).ready(function() {

 

 

          a('.fp-slides').cycle({

          fx: 'fade',

          timeout: 8000,

          delay: 0,

          speed: 2000,

          next: '.fp-next',

          prev: '.fp-prev',

          pager: '.fp-pager',

          continuous: 0,

          sync: 1,

          pause: 8000,

          pauseOnPagerHover: 1,

          cleartype: true,

          cleartypeNoBg: true

          });

        }); 

 

});

</script>

 

 


Principalmente en la ultima seccion se adapto para colocar imagenes con enlaces.  mira bien el codigo:

 

<a href="http://notoyontoy.jimdo.com/2013/02/15/slide-four-sections/" class="article-slide-n" title="slide de cuatro secciones"><img src="http://u.jimdo.com/www17/o/s224fc11c65cbc592/img/i196d62b46ff185fc/1360975000/std/image.png"/></a>

 

Lo que esta de azul es el enlace al que abre al dar click ,   lo que esta en verde es el titulo que aparece al pasar el mouse por encima y

lo de rojo es la  URL de la imagen.

Y para poner mas y mas y mas enlaces copias una y otra vez seguido.(claro que diferentes enlaces)

 

  

Comenta , reponderé tus dudas ! :  si te gusto el post dale like.

 

 

 

 

Etiquetas: Codigos, de, insercion, html, estilos, css, jquery, iframe, slide, four, sections, carrousel, javascript
Comentarios: 0