Forum for discussing general topics related to Couch.
3 posts Page 1 of 1
Is it possible to use a lightbox like colorbox or pretty box with couch cms and if so, how would i implement it so my clients could self maintain?

thanks
Josse.
Hello Josse,

First, sorry for my english, I'm french.

You can add un class name to your image in CKEditor (ex: imagebox) and add to your front page:
Code: Select all
$('img.imagebox').colorbox();

"Voila"

I don't test that, but I think it's ok !

Say me if it's work.
Hi Josse,

As dutom007 mentioned above, working with colorbox involves simply adding the right class to the images and linking in the js files.

Whereas he used ckeditor to upload images and add the classname, we can also take the more structured approach of creating editable regions for uploading the images. I'll describe one such way that can be used to create an image gallery.

Begin by using a template named, say gallery.php. Add the following two editable regions to it -
Code: Select all
<cms:template title='Colorbox Test' clonable='1' >
   <cms:editable name='large_image' width='900' height='600' type='image' />
   <cms:editable name='small_image' width='300' height='200' assoc_field='large_image' show_preview='1' type='thumbnail' />
</cms:template>

This will create one image upload region and an associated thumbnail of the image.
The template has been declared clonable so the user can now create several pages out of it each containing an image and its thumbnail. The name field gets available by default in cloned pages and we'll it set the title of the image.

Once we create several such pages, we can list the images out -
Code: Select all
<cms:pages masterpage='gallery.php' >
      <a class="colorbox" href="<cms:show large_image />" title="<cms:show k_page_title />" ><img src="<cms:show small_image />" /></a>
</cms:pages>

Note how we are displaying the thumbnails which are linked to the main bigger images and that we have given a class of 'colorbox' to the links.

With this in place, we can add colorbox to the images by including the js and CSS files that come with colorbox and invoking JavaScript function at page load to add colorbox to all our images that have the class 'colorbox'-
Code: Select all
<link media="screen" rel="stylesheet" href="<cms:show k_site_link />colorbox/colorbox.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="<cms:show k_site_link />colorbox/jquery.colorbox.js"></script>
<script>
  $(document).ready(function(){
    //Assign the ColorBox event to elements
    $(".colorbox").colorbox();
  });
</script>


Add your desired CSS to style it, use pagination if required and you have a functional gallery ready.
3 posts Page 1 of 1