Only display visible images in Shadown box (hide images where opacity:0)

I am building a wordpress website. I am implementing isotope for image layout and filtering (isotope.metafizzy), and then using Shadowbox to show larger versions of the images when clicked.

THE ISSUE:
Currently, when i open an image in the shadowbox, it loads ALL the images in the series, including images which are currently hidden (filtered by Isotope). Isoptope appears to use opacity: 0; to hide the images – is there a way for sahdowbox to recognise this, and only load the opacity:1; images into the box? (so that when I navigate using next, that i only loop through the images which were visible when i loaded the page?

NOTE: I am using the Shadowbox JS wordpress plugin.

Any help would be greatly appreciated. My Javascript coding skills are marginal at best! Preferaly I would like a solution which does not involve me needing to rebuild the shadowbox code (if possible)

Can anyone assist with suggestions on how to modify shadowbox to only see the images in the filtered list?

I have apreview version of my website up here
http://www.preview.imageworkshop.com/portfolio/

(almost complete and ready for launch now!) This is one of the last few bits of functionality that i need to get working.

Any help would be hugely appreciated.