5 posts by 2 authors in: Forums > CMS Builder
Last Post: July 12, 2012   (RSS)

By cmsb - July 11, 2012

I have two very basic questions about images here:

1. How do I code / where do I put the code to make small images on my website "clickable", so that they open to a larger image? I didn't see this exact post anywhere, though I saw references to it in other posts. I have several list pages on my website which need clickable images. I also have detail pages which need the same thing - basically, a global function on pictures to make them clickable.

2. Also, how to I make image uploads (jpg, gif, etc) default to a consistent position on the page? (Top right, as per the design of the entire site). I use, and instructed my client to use the Insert Image icon to place an image where it belongs on a page. But to make this image clickable, will this functionality still work? Uploads is different from Insert Image.

I really need an elementary level explanation on these, sorry. Many thanks![unsure]

Re: [InHouse] code for when someone clicks on a thumbnail it opens the larger photo in a new window

By cmsb - July 11, 2012

Thank you for your reply, and for your advice. I thought this might be a little easier than installing an add-on but perhaps not. The site I am writing about is www.mtgrovecemetery.org. The client wants the content photographs clickable so that the user can view them larger, with captioning. If you look at the site you'll see photos are all on the right side. That's where I want them to stay, even as uploads. Now they are coded into the body of the content using the wysywig editor.

Many thanks for your ideas.

Re: [cmsb] code for when someone clicks on a thumbnail it opens the larger photo in a new window

By InHouse - July 11, 2012

The pages which have a single image could easily have a lightbox added to them. My approach for all pages with a layout similar to that of: http://www.mtgrovecemetery.org/read_chapelDetail.php would be to:
1 - Create an upload field in the page editor.
2 - Have it create a thumbnail that meets the size you want to display on the page.
3 - On the page code, add jQuery and lightbox libraries.
4 - Use the CMSB Code generator to display the thumbnail in the correct location on the page.
5 - Follow the instructions for that lightbox and make the thumbnail into a link with the required lightbox settings (either class, or rel tag depending on how your lightbox works). That link should point to the full sized image that your client will upload into the CMS.

It sounds worse than it is. The whole process might take 30 mintues. But once done, it can be applied to other pages in seconds.

Hope that helps,
J.

Re: [InHouse] code for when someone clicks on a thumbnail it opens the larger photo in a new window

By cmsb - July 12, 2012

Thank you so much, InHouse. You have been so very helpful and I really appreciate it. I will try the lightbox you recommended.