Entrar

Problema con light box v 2.04

beatriz150 · ·
Bueno pues cuando no es una cosa es otra, creo que voy a acabar con los nervios destrozados jeje.

Instalé la litebox y ya comenté en otro post que las zonas negras de las fotos me salían con puntos o manchurrones blancos; después de mucho intentar no encontré solución, así que desinstalé y ahora estoy instalando la light box v 2.04, la jodía hace un amago durante un segundo de manchurrones blancos pero luego se le quitan así que bien.

El problema:

Cuando se abre la ventana con la foto, en la zona derecha o izquierda o ambas aparece un rectángulo blanco que tapa media imagen; a pasar el ratón por la imagen, ese rectángulo blanco desaparece y aparece el botón "next" o "prev" correctamente en su lugar.

¿Alguién tiene idea de por qué aparece este rectángulo blanco?

Muchas gracias por adelantado.
johnpeterjp · ·
Déjanos la url para ver en vivo y directo que sucede.
beatriz150 · ·
Bueno, en la web no la he puesto porque eso no es una galería, es una chapucilla :), pero os dejo unas capturas de pantalla y el código a ver.

Esto es lo que me ocurría con litebox, si alguien sabe cómo solucionar lo de los manchurrones blancos la instalaría de nuevo porque por lo demás iba de fábula:

[contenido no disponible]

Y esto es lo que me ocurre con lightbox y slimbox ;de esta instalé dos versiones, la original y una con pequeñas modificaciones que encontré y es la que tengo instalada ahora mismo:

como ves, al visualizarse la foto sale un rectángulo blanco que tapa media foto ( si hay solo botón prev o solo next) o dos rectángulos blancos que tapan toda la foto ( si hay ambos botones)


[contenido no disponible]

Luego al pasar el ratón por la imagen se quita ese rectángulo y aparece correctamente el botón next ( o prev en su caso):

[contenido no disponible]

Uploaded with ImageShack.us
beatriz150 · ·
Aquí va el código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>



<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/slimbox.js"></script>

<link rel="stylesheet" href="css/slimbox.css" type="text/css" media="screen" />




<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<title>Mi Embarazo En Fotos-Algunas de mis fotos del embarazo</title>

<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">

</head>

<body OnContextMenu="return false" >



<div id="global">
<div id="cabecera">
<div id="logotipo">
[contenido no disponible]
</div>
</div>
<div id="navegacion">

<ul>
  • Contacto
  • Precios
  • En palabras
  • La sesión fotográfica
  • Fotografías
  • Inicio

    </div>
    <div id="contenido">
    <div id="menu">
    <ul>
  • Ellas
  • Siluetas
  • Con papá
  • fotos en blanco y negro y sepia

    </div>
    <p class="separacion">Aquí podéis ver algunas de mis fotos. Dispongo de un amplio portfolio que podéis ver sin
    compromiso. Para ello poneos en contacto
    conmigo a través de teléfono o mail; todos los datos están en la sección "Contacto".</p>

    <p class="margininf50px">Para visualizar las fotografías, hacer clik en cualquiera de las miniaturas; una vez aparece
    la primera foto dentro de la misma aparecen los controles "PREV" y "NEXT" con los que avanzar y retroceder a través
    de la galería.</p>


    [contenido no disponible]
    [contenido no disponible]
    [contenido no disponible]
    [contenido no disponible]



    </div>







    </div>




    </body>
    </html>


    El css:


    html, body { height:100%; }
    body {
    font-family:Verdana,arial,Tahoma;
    font-size:.8em;
    color:#222;
    margin:0;
    padding:0;
    background:#fff;
    text-align:justify;
    }
    a { color:#557FFF; }
    a:hover { text-decoration:none; }
    p, li { margin:2px; color:#555; padding:2px}
    ul { padding-left:1em; }
    img { border: none; }
    .bordered { border:1px solid #aaa; }
    h1 { text-align:right; margin:2px; color:#000; font-family:Georgia,Arial,Tahoma; font-size: 3em;}
    h3, h5 { margin-bottom:4px; }
    textarea { background:#ccc; color:#333; border:1px solid #aaa; }
    #content { width:700px; background:#eee; margin-left:auto; margin-right:auto; padding:8px; border-left:10px solid #ccc; border-right:10px solid #ccc; }
    • johnpeterjp · ·
    Intenta con este lightbox, quizás estés usando alguno con archivos corruptos.

    Primero, copia este código en la cabecera de tu web entre HEAD y HEAD;

    <script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

    Segundo, a cada imagen cuando la linkees con la tamaño grande agrega este código;

    rel="lightbox"

    Quedando así, ej;

    image #1


    Ahora si corresponde a una galería tienes que agregar este otro pedacito de código:

    [roadtrip]

    Quedando todo así, ej:

    image #1

    De ésta forma debería funcionar perfectamente.

    Acá la galería de scripts con instrucciones y ejemplo, para que descargues:

    http://www.megaupload.com/?d=0FH8MRBV

    Prueba este ejemplo antes, sin hacer ninguna modificación para verificar que el problema no es en tu PC.
    beatriz150 · ·
    ok, ahora voy a estar unos días muy liada y no me va a dar tiempo pero en cuanto pueda probaré y te comento,

    Muchas gracias !!
    beatriz150 · ·
    Bueno johnpeter, pues he probado con el ejemplo y me sigue saliendo el rectángulo blanco que tapa media foto, ¿puede ser entonces problema de mi pc?

    Sobreviviréeeee