Cómo quitar un título sobre una imagen en la mesa de luz

Existe una variedad de plugins jQuery mesa de luz que le permiten mostrar imágenes y galerías en una ventana de estilo que se superpone a su sitio web. Dependiendo de la forma en que la luz se programó, puede incluir características tales como flechas de navegación, descripciones o títulos. Ocultación de cualquiera de estas opciones depende también el plugin caja de luz y la forma en que fue diseñado. En el caso del original plugin de jQuery caja de luz, ocultando el título de la imagen o leyenda se puede hacer a través de la hoja de estilo CSS o mediante la edición del archivo JavaScript.

Instrucciones

Modificar el título El uso de CSS

1 Abra la hoja de estilo CSS que se entrega con la caja de luz plugin. Para jQuery caja de luz, que le abra el archivo "jquery.lightbox.css" ubicado en la carpeta "css".

2 Localizar el selector que pertenecen a su título caja de luz o contenedor de subtítulos. Si no está seguro de qué selector para elegir, utilizar Opera o Firebug para Firefox y haga clic en el texto que desea ocultar.

3 Elija "Inspeccionar elemento" para ver el fragmento de código relacionado con el área de texto, y tomar nota de la identificación o clase asignada al rango de medición o div. Por ejemplo, jQuery utiliza la mesa de luz "# caja de luz-imagen-datos" y "# caja de luz-image-detalles-caption". Copiar estos estilos en hojas de estilo CSS principal de su sitio web.

4 Agregar una línea a cada clase con un "display: none" regla. Esto ocultará eficazmente el elemento en la mayoría de los casos. Desde trucos CSS son impredecibles en todos los navegadores, los resultados pueden variar. Si oculta el elemento no funciona, añadir una línea a cada clase con un valor negativo "texto-guión". Este truco CSS empujará cualquier texto en el elemento mucho más allá de las fronteras de los elementos. Asegúrese de que cada cambio que realice se adjunta con "Importante" para indicar al navegador para utilizar su declaración de estilo en lugar de incumplimiento por parte del guión. Por ejemplo:

caja de luz-contenedor-imagen-datos # caja de luz-imagen-datos {

width: 70%;

flotador izquierdo;

text-align: left;

! Display: none importante;

text-indent: -9999px! important;

}

5 Cambiar el color de fondo o fondo de atributos de la clase a "ninguno" si el título de la imagen o descripción de contenedores es la superposición de imágenes. Por ejemplo:

caja de luz-contenedor-imagen-datos-box {

font: 10px Verdana, Helvetica, sans-serif;

background-color: ninguna importancia;

margin: 0 auto;

line-height: 1.4em;

overflow: auto;

width: 100%;

padding: 10px 0 0;

}

Consejos y advertencias

• Vuelva a colocar títulos en sus imágenes con el texto "alt" en su lugar. Esto se considera una mejor práctica que el uso de hacks CSS o alterar su archivo JavaScript y es menos probable que cause efectos visuales extraños en los navegadores antiguos. Mantenga siempre una copia de seguridad de la hoja de estilo original en caso de realizar un cambio no se puede revertir. Algunas secuencias de comandos mesa de luz contienen un atributo "titleShow" en el script de inicialización, o el archivo principal de JavaScript, que simplemente se puede cambiar a "falso". Esto no está presente en todos los scripts sin embargo, y se sobrescribirán si se actualiza la secuencia de comandos, por lo tanto, la creación de estilos personalizados a menudo es más infalible.