Using fancybox with different DOM stucture

I want to able to use fancybox with below DOM structure.

<div>
 <im开发者_JAVA技巧g src="smallImageSource" rel="bigImageSource">
 <img src="smallImageSource" rel="bigImageSource">
 <img src="smallImageSource" rel="bigImageSource">
<div>

I want to provide big image sources in rel attributes or any other data attributes.

Why don't you just apply a container with a class specifically for fancybox.

You can then target the elements in your styling that will be fancybox only styles

Instead of changing the way of fancybox reading it, I would create a javascript that turns your dom structure into the way fancybox likes it.

for example:

$('img').each(function () {
$this = $(this);
$this.wrap('<a href="'+$this.attr('rel')+'"></a>');
$this.removeAttr('rel');
});
// run fancybox