Album Absolute - CSS & JQuery

Hola amigos, en esta ocasión les comparto algo que me han pedido muchos usuarios, se trata de los conocidos IDTabs pero orientados específicamente para paginas webs de videos online, los cuales te dan la opción de que si un video ya no esta disponible en alguno de los tabs el usuario puede escoger entre las demás opciones del mismo, al final de esta entrada como siempre les dejare la demo en vivo, empecemos

Paso 1 - JavaScript

lo principal para que nuestro tabs funcionen es el jquery, si ya tienen una version instalada en sus webs pueden omitir este paso, los que no lo tienen aun agreguen este codigo arriba de "</head>"

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

y listo, ahora necesitaremos agregaremos el codigo para hacer funcionar el tooltip de cada opcion, al igual que el jquery solo agreguen este codigo arriba de "</head>"

<script type="text/javascript" src="http://encript-s.googlecode.com/svn/trunk/jquery.tipsy.js"></script>

ya para terminar con el codigo JS copiaremos todo el siguiente codigo y lo agregaremos nuevamente arriba de "</head>":

<script type="text/javascript">
  $(function() {
    $("#Zk-gb a[title]").tipsy({gravity: 's'});
  });
</script>
<script>
$(document).ready(function() {
    $("#cuerpo-tabs div.box-vd").hide(); //Ocultamos todos los tabs
    $("#Zk-tabs li:first").attr("id","active"); // Activamos el primer li
    $("#cuerpo-tabs div.box-vd:first").fadeIn(); //Activamos el primer tab
   
    $('#Zk-tabs a').click(function(e) {
        e.preventDefault();
        if ($(this).closest("li").attr("id") == "active"){ //Detectamos el tab ejecutado
         return      
        }
        else{            
        $("#cuerpo-tabs div.box-vd").hide(); //Ocultamos todos los tabs
        $("#Zk-tabs li").attr("id",""); //Borramos los id's
        $(this).parent().attr("id","active"); //Si esta activo agregamos el id
        $('#' + $(this).attr('name')).fadeIn(); //Mostramos solo el tab que este activo
        }
    });
});
</script>

Paso 2 - CSS

Ahora procederemos a instalar el CSS lo cual acomodara todo en su sitio y le dara un bune aspecto, para hcerlo simplemente copien todo el codigo siguiente y agreguenlo a su sitio web o blog, en el caso de blogger lo agregaremos arriba de "]]></b:skin>"

#Zk-gb {
    height: 454px;
    margin: 40px 0 10px 20px;
    position: relative;
    width: 720px;
}

#Zk-tabs {
    background: #262626;
    background-image: linear-gradient(bottom, #262626 0%, #505050 100%);
    background-image: -o-linear-gradient(bottom, #262626 0%, #505050 100%);
    background-image: -moz-linear-gradient(bottom, #262626 0%, #505050 100%);
    background-image: -webkit-linear-gradient(bottom, #262626 0%, #505050 100%);
    background-image: -ms-linear-gradient(bottom, #262626 0%, #505050 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #262626),color-stop(1, #505050));
    border-color: #111;
    border-radius: 5px 5px 0 0;
    border-style: solid;
    border-width: 2px;
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.15) inset;
    height: 30px;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

#Zk-tabs li {
    float: left;
    border-right: 1px solid #242424;
}

#Zk-tabs li > a {

    color: #DDDDDD;

    display: block;

    font-family: arial;

    font-size: 10px;

    font-weight: bold;

    height: 14px !important;

    line-height: 14px !important;

    padding: 8px 25px;

    text-decoration: none !important;

    text-shadow: 0 -1px 1px #000000;

    text-transform: uppercase;

}

#Zk-tabs li#active {
    background: rgba(255, 255, 255, 0.1);
    position: relative;
}
#Zk-tabs li#active > a {
    border-bottom: 2px solid #006CC0;
}
.box-video {
    background: #000;
    height: 400px;
    overflow: hidden;
    padding: 10px;
    position: relative;
    width: 700px;
}

.tipsy {
    padding: 5px;
    font-size: 10px;
    font-family:Arial, Helvetica, sans-serif;
    opacity: 0.8;
    filter: alpha(opacity=80);
    background-repeat: no-repeat;
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhimtXzZMeRl63xwDWKRl1f_31k7ESjTV2E-RudJRHU6qq0N3DWGT0rYuLcu1gHNQT4Lbb1pcWcU7PBlX5k04SZNq-Y1jiDDYhyphenhyphenQhv3m1QGlRVYnaH4xSxv98_oMd5pSZyV9RY7vRv3u8ha/s1600/tipsy.gif");
}

.tipsy-inner {
    padding: 5px 8px 4px 8px;
    background-color: black;
    color: white;
    max-width: 200px;
    text-align: center;
}
.tipsy-inner {border-radius:3px;}
.tipsy-north {background-position: top center;}
.tipsy-south {background-position: bottom center;}
.tipsy-east {background-position: right center;}
.tipsy-west {background-position: left center;}

.copy {
    display: block;
    position: absolute;
    right: 10px;
    top: 4px;
}

.copy > a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhip7gQ-GizUz3Xzpv9ukzQU61e0WIDeR2xELaUz4bZTuwMrIdXfpe26sv6ziLLHYV6M5Gi6mgmKeRaBcL-duMGVkthrydYdmB7aaRlyhw5WkI927XHZkygvhZ-eZ8gvWW9NmPuE5vx9UiS/s1600/zk-ico.png") no-repeat scroll 0 0 transparent;
    display: block;
    height: 25px;
    width: 36px;
}

Paso 3 - HTML

Por ultimo ya solo nos queda formar la estructura html la cual la ubicaremos en donde deseemos usar el idTabs, copiaremos todo el siguiente codigo html y pegaremos en donde queramos usar

<div id="Zk-gb">
<ul id="Zk-tabs">
    <li><a title="Vkontakte" href="#" name="tab1">OPCION 1</a></li>
    <li><a title="NowVideo" href="#" name="tab2">OPCION 2</a></li>
    <li><a title="Rutube" href="#" name="tab3">OPCION 3</a></li>
    <li><a title="Putlocker" href="#" name="tab4">OPCION 4</a></li>
    <li><a title="Novamov" href="#" name="tab5">OPCION 5</a></li>
    <li><a title="Videoweed" href="#" name="tab6">OPCION 6</a></li>
   
</ul>
<span class="copy"><a title="Z+Kreations" href="http://css.zanime-mf.com/" target="_blank"></a></span>
<div id="cuerpo-tabs">

<!-- Vkontakte -->
    <div class="box-vd" id="tab1">
    <div class="box-video">
    <iframe src="http://vk.com/video_ext.php?ID del video" width="700" height="400" frameborder="0"></iframe>
    </div>
    </div>

<!-- NowVideo -->
    <div class="box-vd" id="tab2">
    <div class="box-video">
    <iframe width="700" scrolling="no" height="400" frameborder="0" src="http://embed.nowvideo.eu/embed.php?v=ID del video&width=700&height=400"></iframe>
    </div>
    </div>

<!-- Rutube -->
    <div class="box-vd" id="tab3">
    <div class="box-video">
    <embed width="700" height="400" allownetworking="internal" allowfullscreen="true" wmode="transparent" autoplay="false" type="application/x-shockwave-flash" src="http://video.rutube.ru/ID del video"></embed>
    </div>
    </div>

<!-- Putlocker -->
    <div class="box-vd" id="tab4">
    <div class="box-video">
    <iframe width="700" scrolling="no" height="400" frameborder="0" src="http://www.putlocker.com/embed/ID del video"></iframe>
    </div>
    </div>

<!-- Novamov -->
    <div class="box-vd" id="tab5"> 
    <div class="box-video"> 
    <iframe style='overflow: hidden; border: 0; width: 700px; height: 400px' src='http://embed.novamov.com/embed.php?width=700&height=400&v=ID del video&px=1' scrolling='no'></iframe>
    </div>
    </div>

<!-- Videoweed -->
    <div class="box-vd" id="tab6">
    <div class="box-video">
    <iframe width="700" height="400" frameborder="0" src="http://embed.videoweed.es/embed.php?v=ID del video&width=700&height=400" scrolling="no"></iframe>
    </div>
    </div>
    
</div>
</div>

 

Y listo, ya tendremos todo funcionando ahora solo les queda cambiar "ID del video"