code for when someone clicks on a thumbnail it opens the larger photo in a new window
5 posts by 2 authors in: Forums > CMS Builder
Last Post: July 12, 2012 (RSS)
By cmsb - July 11, 2012
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: [cmsb] code for when someone clicks on a thumbnail it opens the larger photo in a new window
By InHouse - July 11, 2012
I'm not sure that I can provide the full detailed explanation you're seeking. That would take a while and also would depend greatly on the specifics of your site. However:
1 - What you're looking for is called a "lightbox". There are many dozens of them available for free or low-cost. Just do a Google search for 'jQuery Lightbox' and you'll find lots of choices to get you started. They all rely on javascript so they use something like the jQuery or MooTools base libraries to work. So you'll have to add those to your site also. There are many tutorials on how to do this online. FWIW, I like FancyBox 2 (http://fancyapps.com/fancybox/) but that is a commercial product. There are lots of excellent free ones.
In a nutshell, after you install jQuery and the lightbox add-on library, you'll follow the lightbox instructions to adjust the anchor/link which wraps your thumbnail so that it triggers the use of the lightbox when clicked. You'll wind up with something that may look a bit like:
<a href="fullSizeImage.jpg" rel="lightbox"><img src="myThumb.jpg"></a>
or
<a href="fullSizeImage.jpg" class="lightbox"><img src="myThumb.jpg"></a>I don't think you'll want to have this applied to all images on a site or you'll start opening lightbox with every graphical element of your design. However, you can easily make CMSB add the lighbox code to images added to the site via an upload field. For images added by clients via a WYSIWYG editor, you'll have a bigger issue for various reasons. Because of that, we usually create explicit 'upload gallery' fields in our CMSB editors.
2 - The position of your images on your public pages will be determined by where the user inserts the images in the editor and what CSS rules are being applied. This is where seeing the actual site becomes important in order to offer a specific solution. Sorry!
J.
Re: [InHouse] code for when someone clicks on a thumbnail it opens the larger photo in a new window
By cmsb - July 11, 2012
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
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