descripción de la caja de luz a la derecha de la imagen?

Tengo un problema al intentar cambiar la forma en que se muestra la descripción, no quiero que se muestre debajo de la imagen porque la información es grande, así que quería mostrarla al lado de la imagen pero siempre me da un error, le pregunté al soporte del complemento y no tengo ninguna repetición, busqué en Google, pero sin suerte, incluso intenté buscar otro complemento que admita descripciones a la derecha de la imagen, pero no tuve suerte, usé este complemento

http://www.huddletogether.com/projects/lightbox2/

http://www.sabayafrah.com/secure/

haga clic en cualquier imagen, la imagen se expandirá y el título se mostrará en la parte inferior donde el usuario podría no saberlo, así que quería cambiar todo el título para que estuviera a la derecha de la imagen.

actualización # 1 que agregué en el css #imageDataContainer{ floating:right y funcionó, pero ahora quería levantarlo

preguntado el 20 de enero de 11 a las 08:01

¿Puede publicar su código modificado? ¿Qué has probado ya? -

@Barry intenté editar el CSS para mostrar la descripción a la derecha pero sigue ignorándolo, intenté cambiar este código http://pastie.org/1480064 pero sin suerte

1 Respuestas

Necesita cambiar el archivo Lightbox.css. El enlace que publicó apunta al archivo JavaScript.

Creo que desea que el título de la imagen se muestre en la parte inferior derecha y el botón de cierre en la parte inferior izquierda. Si es así, debe modificar Lightbox.css de la siguiente manera:

  • Cambie el float y text-direction propiedades para #imageDetails a derecha

#imageData #imageDetails{ width: 70%; float: right; text-align: right; }

  • Cambie el float propiedad para #bottomNavClose a la izquierda

#imageData #bottomNavClose{ width: 66px; float: left; padding-bottom: 0.7em; outline: none;}

EDITAR

Estos cambios mostrarán el título y la imagen de cierre en la parte superior derecha, al nivel de la parte superior de la imagen.

En el archivo Lightbox.js:

Tienes que cambiar las secciones del nodo del constructor para que imageDataContainer esté en la parte superior. Así que de la línea 134 a la 163 ahora debería verse así

objBody.appendChild(Builder.node('div',{id:'lightbox'}, [
            Builder.node('div', {id:'imageDataContainer'},
        Builder.node('div',{id:'imageData'}, [
            Builder.node('div',{id:'imageDetails'}, [
                Builder.node('span',{id:'caption'}),
                Builder.node('span',{id:'numberDisplay'})
            ]),
            Builder.node('div',{id:'bottomNav'},
                Builder.node('a',{id:'bottomNavClose', href: '#' },
                    Builder.node('img', { src: LightboxOptions.fileBottomNavCloseImage })
                )
            )
        ])
    ),
    Builder.node('div',{id:'outerImageContainer'}, 
        Builder.node('div',{id:'imageContainer'}, [
            Builder.node('img',{id:'lightboxImage'}), 
            Builder.node('div',{id:'hoverNav'}, [
                Builder.node('a',{id:'prevLink', href: '#' }),
                Builder.node('a',{id:'nextLink', href: '#' })
            ]),
            Builder.node('div',{id:'loading'}, 
                Builder.node('a',{id:'loadingLink', href: '#' }, 
                    Builder.node('img', {src: LightboxOptions.fileLoadingImage})
                )
            )
        ])
    )
]));
  • En la línea 303 comente la siguiente línea:

    this.imageDataContainer.setStyle({ width: widthNew + 'px' });

Luego, en el archivo Lightbox.css, debe cambiar el #imageDataContainer a:

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; float:right; background-color: #fff; overflow: auto; width:25%; height:100%; }

Esto luego mostrará la imagen como esta: texto alternativo

contestado el 29 de mayo de 13 a las 20:05

@Barry no, no es eso, lo que quería es que la leyenda se mostrara a la derecha de la imagen. http://www.huddletogether.com/forum/comments.php?DiscussionID=759&page=1#Item_0 - Mahmoud

@Barry revisa el enlace en la pregunta que entiendes bien - Mahmoud

@Barry, ¿se pueden adjuntar o cerrar? Mahmoud

@Barry es posible centrar el título - Mahmoud

@Mahmoud - sí, solo modifique el text-direction centrarse en #imageDetails en el archivo CSS. es decir #imageData #imageDetails{ width: 70%; float: left; text-align: center; } - codificador

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