adding code to images
Is there any way to add code so that I can get a lightbox effect on images that are uploaded via cms? I guess I would have to find a way for the user to upload a thumbnail and larger version first.. any thoughts?
Is there any way to add code so that I can get a lightbox effect on images that are uploaded via cms? I guess I would have to find a way for the user to upload a thumbnail and larger version first.. any thoughts?
You can't add the light box effect when the image is being uploaded. You could only get the light box effect when the image is being displayed on the page itself.
do you think some rollover code would work better? I would prefer lightbox, but I could live with a rollover for larger...any ideas on how to code something like that in?
If you are trying to add an effect to the image, you will need to add it where the image is being displayed on the page. At that point you could do a light box effect which is not hard to do and there is a lot of examples on how to do it:
lightbox/
You could also do a rollover image:
dw-rollover-img.htm
I'm sorry, I was about as clear as mud in my prior posts. I have done rollovers and lightbox's before. What I meant was how would I set this up so that if a user uploaded a photo using pcms..the correct code would be placed where it needs to be. I know that using lightbox you just set a href from 1 image to another then add the rel value in there. But how would I add that code to work with dynamic images? Or even to create a thumb from the original and use that as the second image...or actually first. I just can't figure out how to place/or where to place to work with dynamic images.
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
I think I may be onto something, but first I need to know something. In lightbox, you need to delare your doc type, will the fact that I now have 2 lines of code for cms above my doc type declaration mess up the lightbox function?
I have the 2 lines of powerCMS php code above the doctype and the lightbox works.
earrings.php
nice site, did you do the lightbox manually or is that integrated in your cms code?
I had to enter the javascript into the head of each page manually, but you only need to do that once and that's it.
The other bit requires 'rel-"lightbox"' to be inserted in the link from each individual thumbnail. This is done by the client in the CMS editor as described above.
Mick
Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.
These out-of-the-box solutions provide you proven, tested applications that can be up and running now. Build a store, a gallery, or a web-based email solution.