JQuery colorbox comportamiento extraño

Tengo un problema extraño. De hecho, trabajo en el complemento jquery.colorbox.js. El propósito de mi programa es mostrar una página html simple con un enlace a un cuadro de color que muestra una imagen. El problema proviene de la vinculación con el archivo css. Si pongo la URL href="colorbox.css" funciona perfectamente pero con esta href="css/colorbox.css" la animación parece buena pero no hay fondo y el colorbox es solo un cuadrado blanco con la imagen correctamente mostrada en su centro. Pero todos los efectos geniales están ausentes.

Tengo 3 carpetas en mi carpeta de proyecto principal más index.html y una copia del archivo colorbox.css:

Imágenes de la carpeta: palmiers.jpg
Carpeta css: colorbox.css
Carpeta js: jquery.min.js jquery.colorbox-min.js

Archivo : colorbox.css
Archivo: index.html

Aquí está el contenido del archivo index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
        <title>ColorBox Examples</title>
        <style>
            body
            {
                background-color:#666;
            }
        </style>
        <link rel="stylesheet" media="screen" type="text/css" href="css/colorbox.css"/>
        <script language="javascript" src="js/jquery.min.js"></script>
        <script language="javascript" src="js/jquery.colorbox-min.js"></script>
        <script>
            $(document).ready(function(){
                $("#image").colorbox({width:'500', height:'500'});
            });
        </script>
    </head>
    <body>
        <p><a id="image" href="images/palmiers.jpg">link to the lightBox</a></p>
    </body>
</html>

Entonces, si cambio esta línea de código:

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

Por:

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

El colorbox que se muestra es correcto. Pero quiero tener todos mis archivos css en la carpeta css. ¿Por qué cuando cambio el enlace tengo dos comportamientos diferentes? Los dos archivos colorbox.css son exactamente iguales.

¿Alguien puede ayudarme? Gracias de antemano por su respuesta.

preguntado el 12 de junio de 12 a las 10:06

Usando el patrón de velas del css/colorbox.css en su código, abra Index.html en Google Chrome, haga clic derecho, ver fuente, en su head etiqueta css/colorbox.css debe ser un enlace. Haga clic en el enlace. ¿Lo que pasa? ¿Ves un estilo? Publique la URL aquí -

La sección de estilo es: elemento en línea {}. Está vacío pero el código fuente html es el mismo que el mío. -

Lo siento, la respuesta preventiva es incorrecta. Hice clic en el enlace 'css/colorbox.css' y permite acceder a todo el contenido del archivo colorbox.css. Pero es un contenido enorme. No puedo publicarlo aquí en su totalidad. Así que el enlace parece ser correcto. Por eso me voy a volver loco. -

Publique la URL que ve en su navegador después de hacer clic en css/colorbox.css -

Recomiendo usar Chrome y presionar la tecla F12 y ver la consola para ver si hay errores GET. Dirá lo que pueda No obtener enumerando la ruta/archivo que se esperaba. Y para estar seguro, ambos colorbox.css los nombres de los archivos deben tener el mismo tamaño de archivo en bytes... ¿verdad? -

3 Respuestas

Intente agregar una etiqueta base dentro de su etiqueta principal con la URL de su proyecto, como:

<head>
<base href="http://your_site_url" />

No estoy seguro, pero esto podría ayudar

Respondido el 12 de junio de 12 a las 10:06

Hola. Estoy en localhost, por lo que mi URL comienza con "file:///C:...". Lo puse en mi sección de cabeza y no funciona todavía. - user1364743

@ user1450730: Recomendaría evitar este enfoque simplemente por la necesidad de recordar cambiarlo ... lo que no recordará hacer todo el tiempo;) - musefan

No estoy seguro de que esta pregunta esté realmente relacionada con alguna de sus etiquetas, se trata más bien de un simple problema de referencia.

Puede especificar una ruta 'absoluta' prefijando su ruta con un / carácter, siempre que su carpeta 'css' sea una carpeta de directorio raíz, entonces esto debería funcionar ...

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

sin el / prefijo esencialmente está declarando una ruta 'relativa', lo que significa que la ruta completa comenzará dentro del directorio actual (es decir, donde sea que esté el archivo actual)

Respondido el 12 de junio de 12 a las 10:06

Hola. Ya probé esta solución pero el resultado es peor: hay una animación seguida de la visualización de la imagen pero ahora no hay un cuadrado blanco. Sólo la imagen está en la pantalla. - user1364743

@ user1450730: entonces sospecho que la estructura de su carpeta puede ser incorrecta, ¿está seguro de que no está usando ninguna otra carpeta que pueda afectar esto? ¿Puedes acceder a esta URL? : localhost/css/colorbox.css - musefan

Absolutamente seguro: en mi carpeta principal tengo mi index.html más las otras tres carpetas que contienen los archivos css, js y jpeg. Es solo cuando pongo la URL href="colorbox.js" que funciona. ¡Es una locura! La URL "localhost/css/colorbox.css" no funciona. En el framework CakePHP es el mismo problema. - user1364743

¿Cómo estás alojando el sitio? ¿Servidor de desarrollo de Visual Studio? Acabo de probar el equivalente en uno de mis archivos css y funciona bien... también, ¿tiene alguna configuración de directorio virtual? - musefan

No, es solo un programa de prueba en localhost. Lo edité con Notepad++. Y probé primero con el framework CakePHP editado con eclipse y es exactamente lo mismo. - user1364743

Lo que está viendo es el resultado de que el complemento no encuentra sus propios activos de imagen (no su imagen).

El propio archivo CSS de ColorBox hace referencia a los activos de imagen que utiliza. Hace una suposición sobre dónde se almacenarán esos activos. Para usar cualquier ubicación arbitraria, deberá editar el propio archivo CSS de ColorBox para usar esa ubicación.

Respondido el 12 de junio de 12 a las 17:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.