There must be an easier way to add image lightbox links? Can a guru show me how?

First off, I’m very new to MODx (but worked a lot with Magento and Wordpress in the past).

I’ve built a very simple MODx site here: www.tbjoinery.com

My question is this - on the ’gazebo’ page you can click an image thumbnail on the right and it will open in a jQuery lightbox. Visually works as I want it.

However, I have had to code all the image/lightbox links by hand in the HTML editor window. Is there a way for non-HTML proficient users to add these images/links?

For each image I have had to add a link with ’rel=lightbox-myGroup’ in it to make it work, like this:



But I want to avoid everyday users the hassle of having to add the code like that. I want them to be able to choose through the manager the image they want as the thumbnail, specify the image to open from the file manager (e.g. the link) for the lightbox image and it to work.

Trouble is, at the moment, doing it with the image browser produces link code like this:



It’s missing the part. I can’t see any way of adding the part to the link - anyone know how to do that without dipping into the HTML editor window?

Have you seen Directresize or MaxiGallery?

Directresize deals with single images whereas MaxiGallery handles multiple images on one page and is configurable upto Wahzoo.

Quote from: BBloke at May 20, 2010, 10:08 AM

Have you seen Directresize or MaxiGallery?

Directresize deals with single images whereas MaxiGallery handles multiple images on one page and is configurable upto Wahzoo.

I used Directresize on my site, www.cherryclan.com, just add the full size image into the content editor, on the image properties just type in the size for the thumbnail, eg width 250px, height 250px. The image will be shrunk for the main page and then the image is linked to the full size image via lightbox.

I actually prefer Highslide rather than lightbox. With Highslide if you have a small screen when you first click on the image it will open in a new box zoomed to the visible screen area. This gives the user a larger image without having to scroll around. If the image is still not 1:1 view then in the bottom right hand corner there is a small compass icon, clicking on this will expand the image to 1:1 scale.

Regards

Adrian

Hi both, that looks (and sounds) like it could be just the job. I’ll take a look. Thanks for the pointers.