Problema con Slider

Siguiendo éste tema, prefiero preguntar aquí.
Lo dejé aparcado y ahora quiero volver a intentar ponerlo.
Tengo varías dudas:
Cuando hay que modificar el global.css, se modifica el de estilos dentro del ACP o me tengo que meter con Fillezilla y modificar el global.php?¿

Es esto?¿

Código PHP:
/* 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;
} 

Lo más que conseguí fue esto:

[Imagen: ifsllx.png]

Última modificación: 31 Mar, 2014, 5:09 am por storm.

Te refieres al punto 4? si es ese copias el código y lo pones al final del todo del global.css (teniendo cuidado, porque te añade otro body y tienes que modificarlo), y luego supongo que lo editas desde el panel de administrador en global.css

A ver si alguien que sepa del tema me corrige que no tengo mucha idea, yo solo lo instalé hace poco pero no le hice ninguna modificación y lo puse en el portal.

En qué parte de tu foro estás intentando poner el slider? dame el link para poder ver tu código y saber en qué estás fallando. Tongue

Estoy intentando poner el slider en la página principal, en la zona de arriba, no sé si en el header.

Vamos por pasos para determinar el problema, no he visto bien tu foro por falta de tiempo, pero integrar sliders es algo sumamente sencillo.

Primero que nada, verifica que los archivos con extensión .js estén bien llamados desde tus plantillas porque actualmente no lo están, y sin los archivos .js bien linkeados no te funcionará nada.

Verifica eso y vemos poco a poco qué sigue.

Hola, yo intentaba poner un slider, y me pasaba lo mismo, eso si, lo hice de forma propia sin seguir ningun tuto, con otro tipo de slider, este: Default Theme - Skitter - Slideshow for anytime! aunque supongo, que a ti tambien te serviran como interprete yo los codigos y los inclui en mi foro.

El primer paso, es coger TODO el codigo css, y pegarlo en un archivo de texto en tu ordenador. Cuando acabes, cambia la extension del archivo de texto de ".txt" a ".css".

Subelo a alguna carpeta de tu foro a la carpeta raiz, a tu gusto.

Luego, haz todo el tuto que has puesto, pero no en una plantilla, si no en un archivo html, en tu ordenador. Para que te funcione, pon esto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link type="text/css" href="CARPETA DONDE ALOJASTE EL ARCHIVO CSS/NOMBRE DEL ARCHIVO QUE CREASTE.css" media="all" rel="stylesheet" />

</head>
<body>
PON AQUI EL CODIGO DEL SLIDER
</body>
</html>

Cuando acabes, guarda ese archivo como "elnombrequetuquieras.html" y lo subes a la carpeta raiz de tu foro.

Cuando hayas acabado de hacer esto, copia este codigo:
<center><iframe onload="JavaScript Confused

ubwindow()" rows="0,*" framespacing="0"
border="0" height="160" frameborder="NO" scrolling="no" src="/slider.html" width="970"></iframe></center>

En 160, pon el alto de tu slider.
En 970, pon el ancho de tu slider.
En /slider.html, pon el nombre del archivo html con su extension html, y la barra siempre al principio.

Una vez configurado, pegas ese ultimo codigo donde quieras que este el slider, y listo.

Ojo, si vas a poner enlaces en el slider, pon siempre target="_blank" en el codigo, porque si no te los abrira dentro del slider.

Asi es como me funciono a mi, saludos!

Hago trabajos por encargo para foros MyBB:

Temas personalizados (HTML5, flat, responsive, SEO Friendly, etc)
Plugins y sistemas personalizados (Galería de imagenes, Bolsa de Trabajo, etc)

(2 Apr, 2014, 2:55 pm)Jean Pierre escribió: Vamos por pasos para determinar el problema, no he visto bien tu foro por falta de tiempo, pero integrar sliders es algo sumamente sencillo.

Primero que nada, verifica que los archivos con extensión .js estén bien llamados desde tus plantillas porque actualmente no lo están, y sin los archivos .js bien linkeados no te funcionará nada.

Verifica eso y vemos poco a poco qué sigue.

Cómo hago esto?¿ Dónde se supone que debe poner, en qué sitio de "plantillas"¿?

EnriqueVB, gracias por la info, pero me gustaría poner el diseño de la otra web.

Muchas gracias

(3 Apr, 2014, 11:19 am)storm escribió:
(2 Apr, 2014, 2:55 pm)Jean Pierre escribió: Vamos por pasos para determinar el problema, no he visto bien tu foro por falta de tiempo, pero integrar sliders es algo sumamente sencillo.

Primero que nada, verifica que los archivos con extensión .js estén bien llamados desde tus plantillas porque actualmente no lo están, y sin los archivos .js bien linkeados no te funcionará nada.

Verifica eso y vemos poco a poco qué sigue.

Cómo hago esto?¿ Dónde se supone que debe poner, en qué sitio de "plantillas"¿?

EnriqueVB, gracias por la info, pero me gustaría poner el diseño de la otra web.

Muchas gracias

De hecho te lo explico para que lo hagas con su tutorial, es valido en todos porque es algo muy generico en el html (un iframe que muestra un elemento que esta en otro documento, y que por lo tanto no interfiere en la carga del documento principal, sin interferir con css o javas), el enlace que puse solo era un ejemplo de que a mi, si me ha funcionado.

Saludos!

Hago trabajos por encargo para foros MyBB:

Temas personalizados (HTML5, flat, responsive, SEO Friendly, etc)
Plugins y sistemas personalizados (Galería de imagenes, Bolsa de Trabajo, etc)

He intentado seguir tu tutorial pero no me funciona, me sale una copia de mi header, donde tengo el logo.

Me surge la duda, creo que no lo estoy haciendo bien, dónde tengo que poner estos¿?

Código PHP:
<!DOCTYPE html>
<html>
<head>
    <title>Demo 6</title>
    <link href="public/slider.css" rel="stylesheet" type="text/css" />
    <script src="themes/6/mcVideoPlugin.js" type="text/javascript"></script>
    <script src="themes/6/js-image-slider.js" type="text/javascript"></script>
    <link href="generic.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="div1"><h2>Demo 6 &nbsp; - Video Slider</h2>
        <p>Demos: <a href="demo1.html">1</a><a href="demo2.html">2</a><a href="demo3.html">3</a><a href="demo4.html">4</a>
        <a href="demo5.html">5</a><a href="demo6.html" class="current">6</a><a href="demo7.html">7</a><a href="demo8.html">8</a></p>
    </div>
    <div id="sliderFrame">
        <div id="slider">
            <a href="http://www.menucool.com/video-slider">
                <img src="images/image-slider-1.jpg" alt="Bienvenido a Acuariofilia Madrid" />
            </a>
            <a>
                <b data-src="images/image-slider-2.jpg">Vimeo</b>
            </a>
            <a>
                <b data-src="images/image-slider-3.jpg">Image Slider</b>
            </a>
            <a class="lazyImage" href="images/image-slider-4.jpg">Slide 4</a>
            <a class="video" href="http://www.youtube.com/watch?v=3WADFIsB3o0" data-autovideo="true">
                <b data-src="images/image-slider-5.jpg">Slide 5</b>
            </a>
        </div>
    </div>

    <div class="div2">
        <p>Currently supports <a href="http://www.youtube.com" target="_blank">Youtube</a> and <a href="http://www.vimeo.com" target="_blank">Vimeo</a></p>
        <p>You can download the source code from the <a href="/javascript-image-slider">JavaScript Image Slider</a> page.</p>
        <p>Visit online <a href="http://www.menucool.com/video-slider">Demo 6</a> for detailed instructions.</p>
    </div>
</body>
</html> 

Código PHP:
/* 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;
} 

Por favor, me podéis echar una mano¿? Sigo intentando poner el slider.