I have Matrix installed into EE and am getting single pictures out. I need to add a JQuery light box to manage my pictures. I have added ColorBox and it is working with hard coded hrefs. The Matrix docs says I need to use:

Matrix.bind('fieldtype_class', 'event_name', function(cell){ // custom code here });

I presume "custom code" means the ColorBox finction call ?

Also I am not too sure what is meant by 'fieldtype_class' and 'event_name'.

MANY THANKS for your advice - sorry it's such a newb Q.

  • Please provide more details about what you are doing... your question is not very descriptive or clear.
    – Anna_MediaGirl
    Mar 6 '13 at 3:15

You are using Pixel & Tonic's Matrix Development Docs. You don't need to. Unless, I'm misunderstanding, it sounds like, the url to the image file is stored in a Matrix field and you want to output that information to ColorBox to create a lightbox gallery.

If that's true, then let's assume your set-up is something like:

Matrix Field Set-Up

{image} | {image_url}  | {image_caption} 

Planned Output

With ColorBox you'd want the output to the specified class, to look something like this…

<p><a class="myClass" href="{image_url}" title="{image_caption}">Text or {image}</a></p>

If all your information is stored in the Matrix field, then you'd want

{my_matrix_fieldname}<p><a class="myClass" href="{image_url}" title="{image_caption}">Text or {image}</a></p>{/my_matrix_fieldname}

That is, if you are trying to use information from a Matrix field. If you are actually trying to create a new field_type that will work with Matrix and ColorBox, then this answer went horribly wrong.

  • Thanks Guys for your help so far. What I am trying to do is load my images into the ColorBox lightbox uisng Matrix. I have the light box working now with hard coded hrefs to the images.
    – vincej
    Mar 6 '13 at 18:30
  • I don't know what 'sinapearing' is. It looks like a typo, but I can't figure out for what. Anyway, if Matrix just has the {image} field, which points to the file output url. Then just use that in the <img src="{image}" />, but you still need the name of the matrix field to act as paired tags, such as {my_image_field}{image}{/my_image_field}. Mar 6 '13 at 18:35
  • Thanks Guys ! What I am trying to do is load my images into the ColorBox lightbox WITH A SLIDE SHOW using Matrix. This is JQuery functionality. I have the light box working now with hard coded hrefs to the images. And using your advice here I can deliver static images from a page in the lightbox using Matrix. But so far I have not gotten the slide show part to work. I have set the ColorBox to "open = true" with no affect. <br /> Matrix docs say to include a JQuery effect you must use Matrix.bind('fieldtype_class', 'event_name', function(cell){ // custom code here });
    – vincej
    Mar 6 '13 at 18:41
  • I don't know how to use the Matrix.Bind function.
    – vincej
    Mar 6 '13 at 18:44
  • Thanks - I think I have what you are suggesting: {embed="includes/header"} {exp:channel:entries channel="gallery"} {gallery} <a class="gallery" href="{cell_1}">Gallery</a> {/gallery} {/exp:channel:entries} <script> jQuery('a.gallery').colorbox(); </script> This gives me static images in a view template where each image is called through the "gallery" link. What I need is a slide show that automatically runs when I go to the page. MANY THANKS ! :o)
    – vincej
    Mar 6 '13 at 19:13

As nonprofit_tech said, this is much simpler than you are assuming. If you have the hard coded version working, you are almost there. Say you are serving up your thumbnails in a list, like this:

  <li><a href=""><img src="" alt="" title=""></a></li>
  <li><a href=""><img src="" alt="" title=""></a></li>
  <li><a href=""><img src="" alt="" title=""></a></li>

You then set up a Matrix field (called, say, 'gallery-pix') and then create the necessary fields within that. You end up with markup something like this:

  <li><a href="{gallery-pix-large}" title="{gallery-pix-title}"><img src="{gallery-pix-thumb}" alt="{gallery-pix-title}"></a></li>{/gallery-pix}            
  • Thanks Ralph for your suggestion, however, while it does provide individule pictures in a lightbox, I can not get colorbox to read all the pictures, and present them as a slide show.
    – vincej
    Mar 6 '13 at 21:12
  • @vincej I'm not familiar with ColorBox, but it seems that to group the images together into a slideshow, they all need to have the same class. So try adding a class to your EE code, such as: <li><a class="gallery1" ... </a></li>
    – ralph.m
    Mar 6 '13 at 21:59
  • If you want the slideshow to run automatically, there is a setting for that in ColorBox: slideshowAuto true (see the settings page: jacklmoore.com/colorbox)
    – ralph.m
    Mar 6 '13 at 22:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.