Seleccionar idioma:
Realizar Donación - Mods Premium - Portfolio



Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.
* Cartelera de estrenos para tu web
  Leído 4192 veces
* Viendo el foro
 0 Usuarios y 1 Visitante están viendo este foro.


*
Autor: uge
May 30 2013
Lo que vamos a lograr será esto:

*


Demo:

http://guia-uploader.1x.net/slider.html

Os diré como instalarlo en vuestra web. Yo en mi caso lo hice como un bloque de simple portal. Para ello:

1. Index.css de nuestro tema:

Añadimos al final:

Código: [Seleccionar]
#cwrapper {
width: 900px;
margin-top:10px;
}

#myslides{
background: white url('Aquí tu logo') no-repeat;
margin-bottom: 10px;
border: 2px solid #4DC2E9;
-moz-box-shadow: 2px 2px 2px #ccc;
-webkit-box-shadow: 2px 2px 2px #ccc;
box-shadow: 2px 2px 2px #ccc;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

.stepcarousel{
position: relative;
overflow: scroll;
width: 96.5%;
height: 170px;
margin: 1px 1px 1px 25px;
border:solid #070707 0px;
}
.stepcarousel .belt{
position: absolute;
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left;
overflow: hidden;
margin: 17px 17px ;
width:100px;
background:#121315;
height:140px;
border:1px solid #666666;
}
.stepcarousel .panel p{
text-align: left;
overflow: hidden;
margin: 15px 15px ;
}
.stepcarousel .panel h2{
text-align: left;
height:20px;
overflow: hidden;
margin: 0px 0px ;
font-weight:bold;
text-align:center;
}
.stepcarousel .panel img{
float: left;
background:#040404;
margin: 0px 0px 0px 0px;
padding:0px 0px;
}

La parte que dice:

#cwrapper {
width: 900px;

Cambiamos los px para adaptar la longitud del cuadro azul donde van las carátulas. Yo en mi caso lo cambie a 800.

Donde dice
#myslides{
background: white url('Aquí tu logo') no-repeat;

cambiamos el Aquí tu logo por la url de un logo de tu web de medidas: 51X171. El logo debe de estar girado, es decir, así:

Además cambiamos:
#myslides{
border: 2px solid #4DC2E9;

#4DC2E9 es el color del recuadro azul. Lo podemos cambiar a negro #000 o al que vosotros elijáis.

2. Agregamos un bloque html en la parte del foro deseada y ponemos este código:

Código: [Seleccionar]
<script src='http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'></script>
<script src='http://my-js-codes.googlecode.com/files/sliders.js' type='text/javascript'></script>
<style type='text/css'>
#mygallery{overflow: hidden;}
</style>
<script type='text/javascript'>
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 5, leftnav: ['http://i.imgur.com/wvr3U.png', -45, 60], rightnav: ['http://i.imgur.com/J8uwV.png', -3, 60]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>

<div align="center">
<div id='cwrapper'>
<div id='myslides'>
<div class='stepcarousel' id='mygallery'>
<div class='belt'>
<!-- 1st imagen -->
<div class='panel'>
<a href='URL de tu película en tu foro' target='blank' title='Titulo de tu película'><img alt='' height='140' src='URL de la carátula de tu película' width='100'/>
</a>
</div>
<!-- end code of 1st -->
</div></div></div></div>

El código de arriba sólo tiene para insertar una carátula. Sustituímos URL de tu película en tu foro, Título de película y url de la carátula de la película pues por esos mismos datos XD. Si queremos poner más carátulas sólo debemos añadir el mismo código antes del
</div></div></div></div>

Es decir:
<!-- 1st imagen -->
<div class='panel'>
<a href='URL de tu película en tu foro' target='blank' title='Titulo de tu película'><img alt='' height='140' src='URL de la carátula de tu película' width='100'/>
[/url]
</div>
<!-- end code of 1st -->
<!-- 2st imagen -->
<div class='panel'>
<a href='URL de tu película en tu foro' target='blank' title='Titulo de tu película'><img alt='' height='140' src='URL de la carátula de tu película' width='100'/>
[/url]
</div>
<!-- end code of 2st -->
<!-- 3st imagen -->
<div class='panel'>
<a href='URL de tu película en tu foro' target='blank' title='Titulo de tu película'><img alt='' height='140' src='URL de la carátula de tu película' width='100'/>
[/url]
</div>
<!-- end code of 3st -->

Y por último el
</div></div></div></div>


« Última Modificación: Mayo 28, 2017, 04:18:41 am por Príncipe_Azul »



Felicitaciones, muy bien explicado y muy buen tutorial. Definitivamente lo servirá a mas de uno!




Perfecto, podrías agregar una imagen de como se ve el resultado final? asi no tenemos que andar abriendo otra página (el enlace lo podes dejar, solo agregar una imagen por comodidad=

Saludos



uge

Hecho




Muy bueno! Excelente modificación, voy a ver si lo puedo implementar en el portal. Sigue así!  +10

Saludos!




gracias va muy bien pero mi pregunta sera  como se  puede hacer que  Cartelera de estrenos se moveria tambien sola  y no darle al bottoncito para ve  lo q ay muchas gracias a ver si alguen nos ayuda




Muy bueno uge felicitaciones!!!



uge

Citar
gracias va muy bien pero mi pregunta sera  como se  puede hacer que  Cartelera de estrenos se moveria tambien sola  y no darle al bottoncito para ve  lo q ay muchas gracias a ver si alguen nos ayuda

Ahora mismo estoy de finales en la uni. El finde del 6 y 7 de julio miro haber.




excelente gracias




Otros temas de su interes




Usuario:
Contraseña:
Sesión:
hermes bracelet replica, christian louboutin replica, van cleef and arpels replica, red bottoms replica, cartier love bracelet replica christian louboutin replica, christian louboutin replica, hermes bracelet replica,