Hi,
I've tackled this and I can't see a way of setting it up automatically.
What I've done is created a 'User Guide' for my client covering the use of the CMS as a whole and then added specific instructions for the lightbox. This involves editing the source code in the CMS which is not that great but it's not too complicated.
Basically what I've done is taken them through how to optimise images for the web so that they end up with an image that is the 'larger version' with a reasonably small filesize (less than 200kb).
I have already placed the required lightbox javascript in the head of the page.
Then they place the image on the page using the CMS and in the image editor change JUST the width (to maintain the ratio) to the required thumbnail size.
Then:
1.In the CMS editor select the ‘thumbnail’ image and click the ‘Insert/Edit Image’ icon to open the ‘Image Properties’ dialogue.
2.Click the ‘Link’ tag.
3.Click ‘Browse Server’.
4.Select ‘Image’ from the ‘Resource Type’ drop down menu (top left).
5.Click on the filename of the image you want to use.
6.Check the URL box has been filled with a value in the ‘Link’ tag area of ‘Image Properties’ e.g. http://www.yoursite.co.uk/cms/cms_images/mirror.jpg.
7.Make sure that the ‘Alternative Text’ has been entered.
8.Click ‘OK’ to exit ‘Image Properties’.
9.In the CMS editor click the ‘Source’ button and the source code of the editable section of the web page will be shown (N.B. be very careful here!!).
10.Locate the following piece of code:
<a href="http://www.yoursite.co.uk/cms/cms_images/01_mirror.jpg">
(The section at the end in italics will relate to the image used and will vary)
Immediately after the ‘<’ insert ‘rel="lightbox"’ so that the piece of code reads:
<a rel="lightbox" href="http://www.yoursite.co.uk/cms/cms_images/01_mirror.jpg" >
!! Important – Be sure to select the code beginning with ‘<a href=’ and NOT the code beginning with ‘src=’
10.I have found it best to click the ‘Source’ button to return to the CMS editor preview window – sometimes if this is not done your edit will not be saved. If it doesn’t work this is the first thing to check.
11.Click ‘Save’.
I have found that if you insert ‘rel="lightbox"’before the closing > it works just as well but the editor moves it to after the opening < if you insert it as described it gets moved to the end :rolleyes:
HTH
