Excelente 8 Slider en 1, Videos y Imagenes

subzr 28 Jul, 2013, 10:34 am

#31

ya ha probado algunas cosas e no me va
tanbien no sei javascript :x pero ha tentado algunas cosas en google e hasta ahora nadie

storm 29 Jul, 2013, 1:53 pm

#32

Tengo varias dudas:

La primera, en el paso 3 hay que borrar un .css pero cual¿?
El generic.css de la carpeta inicial donde tenemos las carpetas de images y themes o alguno que hay dentro de la carpeta que hayamos elegido?¿

La segunda, en el paso 4, Agarramos el archivo CSS del slider que elegimos lo abrimos los copiamos y lo ponemos en nuestro CSS Global (esto nos facilitara para editar los css del slider a nuestro gusto), cómo se hace esto?¿

Saludos y muchas gracias!!!

Finer 30 Jul, 2013, 2:40 am

#33

En sentido no hace falta borrar ningun css Tongue

.
Agarras el archivo de CSS del slider lo abris "copypaste" y lo pones o pegas en tu global css.

Última modificación: 30 Jul, 2013, 2:41 am por fabiibiografiia.

[Imagen: tumblr_nj9sv13aff1tga1sco4_r1_500.gif]

storm 30 Jul, 2013, 6:08 am

#34

El archivo js-image-slider.css o el generic.css?¿

A qué altura de mi global.css lo pongo, al final de la última palabra escrita?¿

Finer 30 Jul, 2013, 8:17 am

#35

(30 Jul, 2013, 6:08 am)storm escribió: El archivo js-image-slider.css o el generic.css?¿

A qué altura de mi global.css lo pongo, al final de la última palabra escrita?¿

La verdad es que no me acuerdo igual pone los dos Tongue

Acordarte de corregir las rutas de las imagenes de algunos css Wink

Ponelo debajo de todo.

storm 30 Jul, 2013, 10:03 am

#36

Añado ambos al global.css y subo el html a la raíz del foro y me sale error.
En el footer de la página sale blanco y algunos textos están cambiados.

Qué puedo estar haciendo mal?¿

Última modificación: 30 Jul, 2013, 10:04 am por storm.

Finer 30 Jul, 2013, 3:58 pm

#37

(30 Jul, 2013, 10:03 am)storm escribió: Añado ambos al global.css y subo el html a la raíz del foro y me sale error.
En el footer de la página sale blanco y algunos textos están cambiados.

Qué puedo estar haciendo mal?¿

Es seguro porque ai veces que los archivos css que pusiste tambien halla otro body
creo que se entiende en sentido si ai otro body te va a hacer interferencia con el body comun que ya viene puesto en mybb.
Fijate los archivos que pasaste en global css y fijate que no halla ningun css repetido con lo que viene con mybb ejemplo body.

storm 30 Jul, 2013, 4:33 pm

#38

Cuelgo el generic.css

/* For generic page styles. Not for sliders. */

body {background:#F6F6F6;font:normal 0.9em Arial; margin:0; padding:0; padding-bottom:60px;}
h2 {display:inline;}
.div1, .div2 {width:700px;margin:0 auto;}
.div1 {margin-top:30px;margin-bottom:60px;text-align:center;line-height:20px;}
.div1 P {font-size:18px;}
.div1 a, .div2 a {color:#07C; }
.div1 a {margin:0 8px;}
.div1 a.current {color:black; text-decoration:none;}
.div2 {margin-top:70px;}
.div2 li {padding-top:6px;padding-bottom:6px;}
.green {color:Green;}
.cn {font-family: "Courier New", Georgia;}
#status {display:inline-block; margin-left:26px;line-height:50px;height:50px;vertical-align:middle;}

.code
{
    border: dashed 1px #BCBCCB; padding:8px 12px; background-color: #F3F3F9; white-space:pre; font-family:"Courier New", Georgia;
    font-size:12px; margin:6px 0;overflow:auto; 
}

El js-image-slider.css:

/* http://www.menucool.com */

#sliderFrame {position:relative;width:700px;margin: 0 auto;}
   
#slider {
    width:700px;height:306px;/* Make it the same size as your images */
    background:#fff url(loading.gif) no-repeat 50% 50%;
    position:relative;
    margin:0 auto; /*this makes the image slider center-aligned. Remove this line if you want to align the whole slider to the left side*/
    box-shadow: 0px 1px 5px #999999;
}
#slider img, #slider>b, #slider a>b{
	position:absolute;
	border:none;
	display:none;
}
#slider>a {display:none;}

/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
	z-index:2;
	position:absolute;
	top:0px;left:0px;border:0;padding:0;margin:0;
	width:100%;height:100%;
}
#slider a.video {
	background:transparent url(video.png) no-repeat 50% 50%;
}

/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
	position:absolute;
	width:100%;
	height:auto;
	padding:0;
	left:0px; /*if the caption needs to be aligned from right, specify by right instead of left. i.e. right:20px;*/
	bottom:0px;/*if the caption needs to be aligned from top, specify by top instead of bottom. i.e. top:150px;*/
	z-index:3;
	overflow:hidden;
	font-size: 0;
}
div.mc-caption-bg {
	background-color:black;
}
div.mc-caption-bg2 {
    background:none;
}
div.mc-caption {
	font: bold 14px/20px Arial;
	color:#EEE;
	z-index:4;
	padding:10px 0;/*Adding a padding-left or padding-right here will make the caption area wider than its background. Sometimes you may need to define its width again here to keep it the same width as its background area (div.mc-caption-bg).*/
	text-align:center;
    background:none;
}
div.mc-caption a {
	color:#FB0;
}
div.mc-caption a:hover {
	color:#DA0;
}


/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper  {
	top:320px; left:280px; /* Its position is relative to the #slider */
	width:150px;
	background:none;
	padding-left:20px;
	position:relative;
	z-index:5;
	cursor:pointer;
}

/* each bullet */
div.navBulletsWrapper div 
{
    width:11px; height:11px;
    background:transparent url(bullet.png) no-repeat 0 0;
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
    margin-right:11px;/* distance between each bullet*/
    _position:relative;/*IE6 hack*/
}

div.navBulletsWrapper div.active {background-position:0 -11px;}


/* --------- Others ------- */
#slider 
{
	transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
}

.loading 
{
    width:100%; height:100%;
    background:transparent url(loading.gif) no-repeat 50% 50%;
    filter: alpha(opacity=60);
    opacity:0.6;
    position:absolute;
    left:0;
    top:0; 
    z-index:9;
}

Finer 30 Jul, 2013, 5:31 pm

#39

(30 Jul, 2013, 4:33 pm)storm escribió: Cuelgo el generic.css

/* For generic page styles. Not for sliders. */

body {background:#F6F6F6;font:normal 0.9em Arial; margin:0; padding:0; padding-bottom:60px;}
h2 {display:inline;}
.div1, .div2 {width:700px;margin:0 auto;}
.div1 {margin-top:30px;margin-bottom:60px;text-align:center;line-height:20px;}
.div1 P {font-size:18px;}
.div1 a, .div2 a {color:#07C; }
.div1 a {margin:0 8px;}
.div1 a.current {color:black; text-decoration:none;}
.div2 {margin-top:70px;}
.div2 li {padding-top:6px;padding-bottom:6px;}
.green {color:Green;}
.cn {font-family: "Courier New", Georgia;}
#status {display:inline-block; margin-left:26px;line-height:50px;height:50px;vertical-align:middle;}

.code
{
    border: dashed 1px #BCBCCB; padding:8px 12px; background-color: #F3F3F9; white-space:pre; font-family:"Courier New", Georgia;
    font-size:12px; margin:6px 0;overflow:auto; 
}

El js-image-slider.css:

/* http://www.menucool.com */

#sliderFrame {position:relative;width:700px;margin: 0 auto;}
   
#slider {
    width:700px;height:306px;/* Make it the same size as your images */
    background:#fff url(loading.gif) no-repeat 50% 50%;
    position:relative;
    margin:0 auto; /*this makes the image slider center-aligned. Remove this line if you want to align the whole slider to the left side*/
    box-shadow: 0px 1px 5px #999999;
}
#slider img, #slider>b, #slider a>b{
	position:absolute;
	border:none;
	display:none;
}
#slider>a {display:none;}

/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
	z-index:2;
	position:absolute;
	top:0px;left:0px;border:0;padding:0;margin:0;
	width:100%;height:100%;
}
#slider a.video {
	background:transparent url(video.png) no-repeat 50% 50%;
}

/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
	position:absolute;
	width:100%;
	height:auto;
	padding:0;
	left:0px; /*if the caption needs to be aligned from right, specify by right instead of left. i.e. right:20px;*/
	bottom:0px;/*if the caption needs to be aligned from top, specify by top instead of bottom. i.e. top:150px;*/
	z-index:3;
	overflow:hidden;
	font-size: 0;
}
div.mc-caption-bg {
	background-color:black;
}
div.mc-caption-bg2 {
    background:none;
}
div.mc-caption {
	font: bold 14px/20px Arial;
	color:#EEE;
	z-index:4;
	padding:10px 0;/*Adding a padding-left or padding-right here will make the caption area wider than its background. Sometimes you may need to define its width again here to keep it the same width as its background area (div.mc-caption-bg).*/
	text-align:center;
    background:none;
}
div.mc-caption a {
	color:#FB0;
}
div.mc-caption a:hover {
	color:#DA0;
}


/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper  {
	top:320px; left:280px; /* Its position is relative to the #slider */
	width:150px;
	background:none;
	padding-left:20px;
	position:relative;
	z-index:5;
	cursor:pointer;
}

/* each bullet */
div.navBulletsWrapper div 
{
    width:11px; height:11px;
    background:transparent url(bullet.png) no-repeat 0 0;
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
    margin-right:11px;/* distance between each bullet*/
    _position:relative;/*IE6 hack*/
}

div.navBulletsWrapper div.active {background-position:0 -11px;}


/* --------- Others ------- */
#slider 
{
	transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
}

.loading 
{
    width:100%; height:100%;
    background:transparent url(loading.gif) no-repeat 50% 50%;
    filter: alpha(opacity=60);
    opacity:0.6;
    position:absolute;
    left:0;
    top:0; 
    z-index:9;
}

Espero que se te solucione
El css de generic borralo todo y se te debe solucionar el deforme con el foro.

PD: si vez el css generic ai un css que se llama body con lo que te dije te debes dar cuenta..

Última modificación: 30 Jul, 2013, 5:37 pm por fabiibiografiia.

storm 31 Jul, 2013, 2:21 pm

#40

He puesto sólo el js-image-slider.css.
Ahora no me sale nada raro.

Luego pongo el archivo demo6 (el html) dentro de la raíz del foro?¿
Es que lo coloco y no sale nada en el foro.
Hay que ponerlo en otro sitio o cambiarlo el nombre?¿