Ive got a jquery tabbed area, with each tab showing image and text. Id like the user to be able to click on an image being displayed in a tab (a matrix row) and launch a larger overlay version. I am having trouble being able to call up just a single image from a particular row. (The tabbed area is generated using the matrix fieldtype for rows to create the tabs, in the admin CP form.)

I understand how to use limit and offset etc, but cannot work out how to control which image is seen, ie I need some sort of '{current_row}' - which doesnt exist! Ive tried {field_row_count} and {row_count} and tried using conditionals, but nothing works. Has anyone done this already?

2 Answers 2


Matrix has a {row_id} variable which will output a unique ID for you, eg

<div id="{row_id}">{matrix_field_name} {matrix_field_image}</div>

Would output something like

<div id="1">Eggs eggs.png</div>
<div id="2">bacon bacon.png</div>
<div id="3">Cheese cheese.png</div>

Does that help?

  • Thanks. Ive tried row_id in several contexts (unsuccessfully) but maybe Im missing something on where I can implement it.
    – Boshy
    Commented Mar 3, 2013 at 6:55
  • Heres the code on Pastie pastie.org/6369482
    – Boshy
    Commented Mar 3, 2013 at 7:25
  • sadly, I am really really stuck with this so any further pointers would be great. No idea why its proving so hard to solve
    – Boshy
    Commented Mar 4, 2013 at 11:45

Ive solved it, so thought I'd share in case anyone else is as stupid as Ive been (doubtful, but possible).

Using simple overlay, tabs and accordions from jQuery tools, though others are all similar, and Matrix fields to create the accordions or tabbed content. The desired effect was to click on an image in a row and launch a large overlay of just that image.

In the page - this is just the section for holding the image, if it's there:

{panel_content} {if panel_image} {exp:ed_imageresizer image="{panel_image}" maxWidth="300" maxHeight="230" forceWidth="yes" forceHeight="yes" title="#{row_id}" cropratio="130:100" alt="{title}"} {/if} {/panel_content}

And in the overlay:

    <div class="simple_overlay" id="link{row_id}">
     {exp:ed_imageresizer image="{panel_image}" maxWidth="600" maxHeight="500" forceWidth="yes" forceHeight="yes" title="#{row_id}" cropratio="130:100" alt="{panel_title}"}

    <div id="{row_id}" class="panel-img-caption">
       {if panel_title}{panel_title}{/if}

The js to trigger the instance is:

$(function () { $("a[rel]").overlay({mask: '#000'});


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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