Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje24-08-2014, 00:40 (UTC)    
Título del mensaje: [Petición] Adaptar Slider

Quiero ve si pueden adaptar este slider para PWG :D
http://wordimpress.com/jflow-plus-auto-slide-examples-demo-and-tips/
al que lo haga, lo amare por la eternidad
Mensaje28-08-2014, 01:34 (UTC)    
Título del mensaje:

Hola, un cordial saludo
Básicamente todo estaba hecho

El codigo general es el siguiente:

Código:
<!doctype html>
<html>
<head>

<link href="styles/jflow.style.css" type="text/css" rel="stylesheet"/>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script src="scripts/jflow.plus.js" type="text/javascript"></script>
<script src="scripts/jflow.plus.min.js" type="text/javascript"></script>

<script type="text/javascript">

   $(document).ready(function(){

       $("#myController").jFlow({

         controller: ".jFlowControl",

         slideWrapper : "#jFlowSlider",

         slides: "#mySlides", 

         selectedWrapper: "jFlowSelected",
         
         effect: "flow", //este es el efecto de deslizamiento (rebobinar o flujo) (rewind or flow)

         width: "940px",  // esta es la anchura por el contenido deslizante (Solo la imagen, no el ancho de la galeria)

         height: "300px",  // esta es la altura por el contenido deslizante (Solo la imagen, no el alto de la galeria)

         duration: 400,  // tiempo en milisegundos para la transición de una diapositiva
         
         pause: 5000, //tiempo entre transiciones

         prev: ".jFlowPrev",

         next: ".jFlowNext",

         auto: true   

    });

});

</script>

</head> 

<body>

 <div id="sliderContainer">

<div id="mySlides">

    <div id="slide1" class="slide">   

        <img src="images/jflow-sample-slide1.jpg" alt="Slide 1 jFlow Plus" />

        <div class="slideContent">
           <h3>Usted lo pidio, jFlow Delivered</h3>
            <p>Todo es cuestion de retribuir a la comunidad de desarrollo.</p>
       
        </div>

   </div>       

    <div id="slide2" class="slide">

        <img src="images/jflow-sample-slide2.jpg" alt="Slide 2 jFlow Plus" />

        <div class="slideContent">
           <h3>W3C Valido</h3>
            <p>¿Eres un purista de la escritura de codigo valido? Asi es jFlow.</p>
         </div>

    </div>   

   <div id="slide3" class="slide">

        <img src="images/jflow-sample-slide3.jpg" alt="Slide 3 jFlow Plus" />

        <div class="slideContent"><h3>Actualizaciones frecuentes Codigo</h3>
        <p>Esta opcion se ha desarrollado activamente y utilizada por miles de sitios web</p></div>

    </div>
   
    <div id="slide4" class="slide">

        <img src="images/jflow-sample-slide4.jpg" alt="Slide 3 jFlow Plus" />

        <div class="slideContent">
           <h3>Observa la paginacion?</h3>
            <p>Haga clic en los botones de arriba para navegar.</p>
        </div>

    </div>

</div>



<div id="myController">

   <span class="jFlowControl">1</span>

   <span class="jFlowControl">2</span>

   <span class="jFlowControl">3</span>
   
   <span class="jFlowControl">4</span>

</div>



<div class="jFlowPrev"></div>

<div class="jFlowNext"></div>

</div>
<!--Fin de la galeria-->


</body>
</html>


Postdata: Para adaptar el slider, los archivos descargados tenian que ser subidos a un host. Por tanto, si quieres cambiar las direcciones deberás resubirlos a tu propio host.

Si tienes alguna pregunta, no dudes en hacerla. Saludos
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group