Comunidad de diseño web y desarrollo en internet online

Slideshow jquery - Cómo lo pongo

Citar            
MensajeEscrito el 19 Dic 2013 11:07 am
Hola.

Con un amigo estoy haciendo una web en Jimdo. Queremos poner el siguiente slideshow en nuestra página http://www.jcoverflip.com/demo pero ninguno de los dos sabemos absolutamente nada de programación. ¿Podéis ayudarme? Necesitaría una explicación para novatos.

Saludos.

Por Aliasmarcos

0 de clabLevel



 

firefox
Citar            
MensajeEscrito el 07 Ene 2014 10:50 pm
Links de los JS y el CSS (hacen botón derecho, guardar como y lo guardan con el mismo nombre en la misma carpeta del HTML)

jquery.jcoverflip.js

jquery-ui-1.7.2.custom.js

jquery-1.3.2.js

jquery-ui-1.7.2.custom.css

Copiar y pegar tal cual esta

Código HTML :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<link rel="stylesheet" href="jquery-ui-1.7.2.custom.css" type="text/css" media="all">
<script src="jquery-1.3.2.js"></script>
<script src="jquery-ui-1.7.2.custom.js"></script>
<script src="jquery.jcoverflip.js"></script>
<script>
/*Iniciamos el Slider*/

    jQuery( document ).ready( function(){
        jQuery( '#flip' ).jcoverflip({
          current: 2,
          beforeCss: function( el, container, offset ){
            return [
              $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 210 - 110*offset + 20*offset )+'px', bottom: '20px' }, { } ),
              $.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,100-20*offset*offset) + 'px' }, {} )
            ];
          },
          afterCss: function( el, container, offset ){
            return [
              $.jcoverflip.animationElement( el, { left: ( container.width( )/2 + 110 + 110*offset )+'px', bottom: '20px' }, { } ),
              $.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,100-20*offset*offset) + 'px' }, {} )
            ];
          },
          currentCss: function( el, container ){
            return [
              $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 100 )+'px', bottom: 0 }, { } ),
              $.jcoverflip.animationElement( el.find( 'img' ), { width: '200px' }, { } )
            ];
          },
          change: function(event, ui){
            jQuery('#scrollbar').slider('value', ui.to*25);
          }
        });
        
        
        jQuery('#scrollbar').slider({
          value: 50,
          stop: function(event, ui) {
            if(event.originalEvent) {
              var newVal = Math.round(ui.value/25);
              jQuery( '#flip' ).jcoverflip( 'current', newVal );
              jQuery('#scrollbar').slider('value', newVal*25);
            }
          }
        });
      });
      
      
    
</script>

<!--Esta es el estilo, seria conveniente que lo pongan en un file css-->
<style>
   body{
      width:100%;
      margin:0px;
      padding:0px;   
   }
   #wrapper{
      width:663px;
      margin:0 auto;
      overflow: hidden;
      position: relative;
      }
   #slider{
      width:630px;
      padding: 1em;
      border: 1px solid #E9EDF0;
      background: #EDEFF0;
      -moz-box-shadow: 0 0 10px #EDEFF0;
   }
   /* Basic jCoverflip CSS */
   .ui-jcoverflip {
      position: relative;
   }
   
   .ui-jcoverflip--item {
      position: absolute;
      display: block;
   }
   
   /* Basic sample CSS */
   #flip {
      height: 200px;
      width: 630px;
      margin-bottom: 50px;
   }
   
   #flip .ui-jcoverflip--title {
      position: absolute;
      bottom: -30px;
      width: 100%;
      text-align: center;
      color: #555;
   }
   
   #flip img {
      display: block;
      border: 0;
      outline: none;
   }
   
   #flip a {
      outline: none;
   }
   
   ul,
   ul li {
      margin: 0;
      padding: 0;
      display: block;
      list-style-type: none;
   }
</style>
</head>

<body>
<div id="wrapper">
<div id="slider">
<ul id="flip">
<li title="imagen 1"><a href="#"><img src="http://www.jcoverflip.com/files/docs/jcoverflip-demo/1.png"><span class="title">Titulo 1</span></a></li>
<li title="imagen 2"><a href="#"><img src="http://www.jcoverflip.com/files/docs/jcoverflip-demo/2.png"><span class="title">Titulo 2</span></a></li>
<li title="imagen 3"><a href="#"><img src="http://www.jcoverflip.com/files/docs/jcoverflip-demo/5.png"><span class="title">Titulo 3</span></a></li>
<li title="imagen 4"><a href="#"><img src="http://www.jcoverflip.com/files/docs/jcoverflip-demo/4.png"><span class="title">Titulo 4</span></a></li>
<li title="imagen 5"><a href="#"><img src="http://www.jcoverflip.com/files/docs/jcoverflip-demo/3.png"><span class="title">Titulo 5</span></a></li>
<!--
Para agregar mas imagenes solo deben agregar la siguiente linea y modificar los titulos y las imagenes
<li title="TITULO"><a href="#"><img src="RUTA DE LA IMAGEN"><span class="title">TITULO</span></a></li> 
-->
</ul>
<div id="scrollbar" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 25%;"></a></div>
</div>
</div>
    
</body>
</html>

Por PX10

70 de clabLevel



 

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.