close ad
Databridge V2 with MySQLi support IS Now Available!
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

adding code to images

Thread began 11/10/2009 2:57 pm by clickhappy392103 | Last modified 11/11/2009 2:50 pm by Dani Chankhour | 3468 views | 10 replies |

clickhappy392103

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?

Sign in to reply to this post

Dani Chankhour

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.

Sign in to reply to this post

clickhappy392103

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?

Sign in to reply to this post

Dani Chankhour

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

Sign in to reply to this post

clickhappy392103

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.

Sign in to reply to this post

MickW

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

Sign in to reply to this post

clickhappy392103

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?

Sign in to reply to this post

MickW

I have the 2 lines of powerCMS php code above the doctype and the lightbox works.

earrings.php

Sign in to reply to this post

clickhappy392103

nice site, did you do the lightbox manually or is that integrated in your cms code?

Sign in to reply to this post

MickW

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

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

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.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...