Design Dreams

FireSigner

Creamos páginas web atractivas que tienen como principal objetivo aumentar los ingresos de nuestros clientes. Escuchamos las necesidades y objetivos de cada proyecto para crear páginas web que reflejen la esencia del negocio y su imagen de marca. Combinamos funcionalidad y estética, sin dejar de lado la usabilidad.
Para nosotros lo más importante es crear grandes ideas que deriven en trabajos que impacten, que consoliden identidades de marca, que fidelicen clientes y brillen por sí solas en el mercado
Creamos y diseñamos páginas web limpias, intuitivas y fáciles de usar para cualquier tipo de usuario.

Posts

Comments

The Team

Blog Journalist

Connect With Us

Join To Connect With Us

Portfolio

    Posted by: FIRESIGNER Posted date: 18:20 / comment : 0

    El resultado es una galería de videos con jQuery que permite pasar de un video a otro de forma deslizante haciendo click en las miniaturas que se encuentran debajo. A esta galería podemos añadirle hasta 7 videos con las medidas actuales que posee.


    El procedimiento es similar al otro slider, primero descarga este archivo, descomprímelo, sube los archivos a un hosting y luego pega este código antes de </head>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/>
    <script src='URL del archivo jquery-easing-1.3.pack.js'/>
    <script src='URL del archivo jquery-easing-compatibility.1.2.pack.js'/>
    <script src='URL del archivo coda-slider.1.1.1.pack.js'/>

    <script type='text/javascript'>
    //<![CDATA[

    $(function() {
    $("#main-video-slider").codaSlider();
    $navthumb = $(".nav-thumb");
    $crosslink = $(".cross-link");
    $navthumb
    .click(function() {
    var $this = $(this);
    theInterval($this.parent().attr('href').slice(1) - 1);
    return false;
    });

    theInterval();
    });
    //]]>
    </script>
    Ahí coloca donde se indica las URLs de los archivos que subiste previamente.
    Luego antes de ]]></b:skin> coloca los estilos de la galería:
    /* Coda Slider (Video)
    ----------------------------------------------- */
    #page-wrap {
    width: 490px; /* Ancho del contenedor general */
    min-height: 354px; /* Alto del contenedor general */
    margin: 0 auto;
    position: relative;
    background: url(http://lh5.googleusercontent.com/-G4VkOTiq72Y/TroR_ySL7-I/AAAAAAAAB54/Kg92zbZvd80/s490/vid-bg.png) top center no-repeat;
    }
    .slider-wrap {
    width: 450px;
    position: absolute;
    top: 20px;
    left: 20px;
    }
    .stripViewer .panelContainer
    .panel ul { text-align: left; margin: 0 15px 0 30px; }
    .stripViewer {
    position: relative;
    overflow: hidden;
    width: 450px; /* Ancho del contenedor de los videos */
    height: 274px; /* Alto del contenedor de los videos */
    margin-bottom:7px;
    }
    .stripViewer .panelContainer { position: relative; left: 0; top: 0; }
    .stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 450px; }
    .stripNavL, .stripNavR, .stripNav { display: none; }
    .nav-thumb { border: 1px solid black; margin-right: 5px;}
    #movers-row { margin: -39px 0 0 62px; }
    #movers-row div { width: 16.6%; float: left; }
    #movers-row div a.cross-link { float: right; }
    .cross-link { display: block; width: 58px; margin-top: -10px; position: relative; padding-top: 3px; z-index: 100; }
    El tercer paso es entrar en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript (para la interfaz antigua), o Diseño | Añadir gadget | HTML/Javascript (para la interfaz nueva). Ahí pega este código:
    <div id="page-wrap">
    <div class="slider-wrap">
    <div class="csw" id="main-video-slider">
    <div class="panelContainer">

    <div class="panel" title="Panel 1">
    <div class="wrapper">
    <iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_UNO" frameborder="0" allowfullscreen></iframe>

    </div></div>


    <div class="panel" title="Panel 2">
    <div class="wrapper">
    <iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_DOS" frameborder="0" allowfullscreen></iframe>

    </div></div>


    <div class="panel" title="Panel 3">
    <div class="wrapper">
    <iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_TRES" frameborder="0" allowfullscreen></iframe>

    </div></div>


    <div class="panel" title="Panel 4">
    <div class="wrapper">
    <iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_CUATRO" frameborder="0" allowfullscreen></iframe>

    </div></div>


    <div class="panel" title="Panel 5">
    <div class="wrapper">
    <iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_CINCO" frameborder="0" allowfullscreen></iframe>

    </div></div>


    <div class="panel" title="Panel 6">
    <div class="wrapper">
    <iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_SEIS" frameborder="0" allowfullscreen></iframe>

    </div></div>


    <div class="panel" title="Panel 7">
    <div class="wrapper">
    <iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_SIETE" frameborder="0" allowfullscreen></iframe>

    </div></div>

    </div></div>
    <!-- Estas son las MINIATURAS de los videos -->

    <a class='cross-link active-thumb' href='#1'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_UNO/1.jpg" width='58px'/></a>

    <div id='movers-row'>

    <div><a class='cross-link' href='#2'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_DOS/1.jpg" width='58px'/></a></div>

    <div><a class='cross-link' href='#3'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_TRES/1.jpg" width='58px'/></a></div>

    <div><a class='cross-link' href='#4'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_CUATRO/1.jpg" width='58px'/></a></div>

    <div><a class='cross-link' href='#5'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_CINCO/1.jpg" width='58px'/></a></div>

    <div><a class='cross-link' href='#6'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_SEIS/1.jpg" width='58px'/></a></div>

    <div><a class='cross-link' href='#7'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_SIETE/1.jpg" width='58px'/></a></div>

    </div>
    </div></div>
    Coloca donde se indica la ID del video de YouTube. La ID del video es toda esa serie de caracteres que aparecen al final de la URL del video, por ejemplo:

    URL video

    Como puedes ver, la ID del video debes colocarla dos veces, una es para el video, y otra para la imagen en miniatura del video.

    También puedes poner videos de otros servicios, sólo debes eliminar un código como este:
    <iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE" frameborder="0" allowfullscreen></iframe>

    Y en su lugar deberás poner el código de tu video, que deberá medir 450px de ancho y 274px de alto. También deberás cambiar la URL de la imagen de la miniatura:
    <img class='nav-thumb' height='40px' src="URL de la imagen" width='58px'/>

    Es una galería de videos sencilla pero que puede verse muy bien arriba de las entradas del blog, y si la usamos sólo para videos de YouTube entonces será menos complicado.

    icon allbkg

    Tagged with:

    Next
    Entrada más reciente
    Previous
    Entrada antigua

Comments

The Visitors says
Download Free Software Latest Version