mixed gallery of iframe and images

[Tom X]

as in subject, if I use this code:
----------------------------------------------
$("a[rel=group]").fancybox({
'width' : 800,
'height' : 600,
'transitionIn' : 'elastic',
'transitionOut' : 'fade',
'type' : 'iframe',
}
});

with this:
----------------------------------------------
<a rel="group" href="somepage.html">IFRAME</a>
<a rel="group" href="image.jpg">IMAGE</a>

then first in the gallery is the webpage and it is fitting alright but
image is not entirely fitting it is being squeezed as it there were
some margins around. (type is iframe) and it works for both elements
in the gallery but if I change it to image then only image is working
and page is not loading.

Is there any solution to this invisible margins around image???

[Kevin F.]

Let me start by saying I am not an expert and my solution may not be
the best/most efficient.

But, I Define the attributes for an iframe separately from the rest of
the group. (you can check out http://kevinfolk.com/portfolio.html to
see it in action).

Here is the code I used:

$("a.group").fancybox({
'cyclic' : 'true',
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'titlePosition' : 'outside',
'overlayColor' : '#000',
'overlayOpacity' : 0.9,
'titleFormat' : function(title, currentArray, currentIndex,
currentOpts) {
return '<span id="fancybox-title-outside">Image ' + (currentIndex +
1) + ' / ' + currentArray.length + ( title.length ? ' <br> ' + title :
'') + '</span>';}
});

$("a.iframe").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'titlePosition' : 'outsid e',
'overlayColor' : '#000',
'overlayOpacity' : 0.9, 'titleFormat' : function(title,
currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-outside">Image ' + (currentIndex +
1) + ' / ' + currentArray.length + ( title.length ? ' <br> ' + title :
'') + '</span>';},
'width' :'85%',
'height' :'85%',
'type' :'iframe',
'showNavArrows' : false
});
________

<a class="group" rel="zoroaster" href="images/portfolio_images/
Zoroaster_Flyer.jpg"
title="Zoroaster Wines In-Store Flyer
<br><br>Title.">
</a>

<a class="iframe" rel="zoroaster" href="http://issuu.com/kevinfolk/
docs/zoroaster_stylebook?mode=embed&viewMode=presentation&layout=http
%3A%2F%2Fskin.issuu.com%2Fv%2Fdarkicons%2Flayout.xml&showFlipBtn=true"
title="Zoroaster Wines Stylebook
<br><br>Title."></a>

[Kevin F.]

I should note that I am pretty sure the 'type' : 'iframe' tag is
essential, and that the 'width':x% 'height' :x% tags might be as well.

[JFK]

create a separated script for each object, one for the iframe and one
for images
then just add the same rel attribute to each element so
$("a.iframe").fancybox({

'width' : 800,
'height' : 600,
'transitionIn' : 'elastic',
'transitionOut' : 'fade',
'type' : 'iframe'

});
$("a.images").fancybox();

with this:
----------------------------------------------
<a class="iframe" rel="group" href="somepage.html">IFRAME</a>
<a class="images" rel="group" href="image.jpg">IMAGE</a>