Selecting a current row in a Matrix field of multiple rows

Question

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?

Answer 1

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

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

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?

Answer 2

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:

{panel_content}    
    <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}
    </div>
    </div><!--/.simple_overlay-->    
{/panel_content}

The js to trigger the instance is:

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

});