Lightbox component

[Jan Tošovský, modificado hace 12 años.]

Hello Everyone,

I have a quite narrow column in my liferay portal for the specific content with images, which hence from time to time doesn't fit to the available area.
I've thought it would be nice to allow to the user to display these images in full size after clicking on them in the lightbox-like layer.

I've tried to implement YUI Lightbox, but it interferes with the rest of scripts. After small modification it is better, but far from ideal state http://www.liferay.com/community/forums/-/message_boards/message/9504561. After some tweaking I am still unable to achieve the desired effect.

I've noticed there is Image View component in the AUI set. I've added the link to it into the portlet header and the following code int the footer:

YUI().use('gallery-aui-image-viewer-base', function(Y) {
    
	function handleClick(e) {
		var imageViewer1 = new Y.ImageViewer({
			links: e.target
		}).render();
    }
    
	Y.on("click", handleClick, "a[rel=lightbox]");
	
});	

but it display lightbox without image just after entering the page. I cannot get rid of it.
Any idea what do I wrong? I am not JS guru so the code above is maybe too naive.

Regards,
Jan

[Jan Tošovský, modificado hace 12 años.]

I've managed it with the following code (please note that declaration at the beginning) :

AUI().ready('aui-image-viewer-gallery', function(A) {
		
var imageGallery1 = new A.ImageGallery({
	links: 'a[rel=lightbox]',
	caption: ''
	})
	.render();	
});

I've also removed Image View component script link from the portlet header as the code above shares some built-in libraries (so there is no library clash any more).

[Dave Kliczbor, modificado hace 12 años.]

Thanks for sharing your solution! I'm going to need it

[Bilal Zaheer, modificado hace 8 años.]

HI
i need guidance regarding slideshow with light box effect. I have created a simple slide show in liferay using the following link.
http://www.liferaysavvy.com/2014/06/liferay-62-web-content-aui-carousel.html

I want to add the lightbox effect in the slideshow. Can anyone share the script with me ?

Thanks

Bilal

[Víctor Ponz, modificado hace 8 años.]

You can start taking a look at ImageGallery or ImageViewer
Here you can view an example
http://mestreacasa.gva.es/web/ponz_vic/visor-de-imagenes

Hope it helps