The problem is that Photoset Grid wasn't really designed for template work. It takes this template:
{block:Photos}
<a href="{PhotoURL-500}" class="view" rel="{PostID}">
<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
</a>
{/block:Photos}
And pulls out all <img> tags and duplicates them--one per image in the row. It results in this HTML:
<a class="view" ... >
<div class="photoset-row cols-3" ...>
<div class="photoset-cell" ...>
<img ...>
</div>
<div class="photoset-cell" ...>
<img ...>
</div>
<div class="photoset-cell" ...>
<img ...>
</div>
</div>
</a>
<a class="view" ... ></a>
<a class="view" ... ></a>
Now, view.js is using anchors/links to pop open the lightbox. They are basically capturing the click event for the entire grouping. When, in your template, you attempt to wrap the <img>
in an <a>
, it is pulling out the <img>
tag out of the <a>
in the template and appending them to the first <a>
.
If you're up on jQuery plugin development, the Photoset-grid code, is pretty clearly bugged around line 113 (_setupColumns
).
Long story short, you're not going to be able to use view.js lightbox with the Photoset-grid. Unless some kind soul comes along and fixes the plugin.