fancybox - zmena veľkosti obrazu v rámci iframe - jquery, fancybox-2

Používam fancybox verzie 2.1.5 Snažím sa o to, aby sa vo fantázii iframe o šírke 900 a výške 500 zobrazovali veľké obrázky. Momentálne sa obrázky samozrejme vykresľujú obrovské a do tohto prvku iframe sa nezmestia. Ťažko zachytávam tú správnu triedu alebo spôsob, ako navigovať k obrázku a zmeniť jeho veľkosť. To, čo som sa snažil, je používať funkciu beforeShow a urobiť toto:

                 $(".fancybox").fancybox({
type: "iframe",
href: source,
title: title,
width: 900,
height: 500,
closeBtn: false,
nextSpeed: 0, //important
prevSpeed: 0, //important
beforeShow: function() {
alert("its working!");
$(".fancybox-iframe img").css("width","900px");
$(".fancybox-iframe img").css("height","auto");
$(".fancybox-iframe img").addClass("imageResize");
}
});

Ani jedno $(".fancybox-iframe img") ani $(".fancybox-inner img") sú správne spôsoby spustenia obr. Ako môžem používať beforeShow funkciu správneho nastavenia veľkosti mojich obrázkov vo vnútri prvku iframe. Vďaka!

odpovede:

prišiel som na to

                    beforeShow: function () {
var newWidth = 900; // set new image display width
$(".fancybox-iframe").contents().find("img").css({
width  : newWidth,
height : "auto"
}); // apply new size to img
}

pre mňa pomocou fancyboxu 3 som mal problém s načítaním iframe fancyboxu, ktorý sa nenačítal, takže to pomohlo:

Tento kód odošle iframe pre značku img každých 100 ms až 2 sekundy, aby sa zistilo, či bol obrázok načítaný. ak má, nastaví atribúty obrázka na maximálnu výšku.

Ak sa iframe nenájde, potom by mal interval okamžite vyčistiť.

var fancyboxOptions = {
onComplete: function( instance, slide ) {
var timeCompleted = new Date();
function afterLoading () {
clearInterval(pollLoaded);
$("iframe",slide.$content[0]).contents().find("img").attr("height","100%");
}
var pollLoaded = setInterval(function(){
var iframe = document.getElementById($("iframe",slide.$content[0]).attr("id"));
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
if (iframeDoc) {
if (( iframeDoc.readyState  === "complete" )
&& ($("iframe",slide.$content[0]).contents().find("img").length > 0)) {
afterLoading();
}
// try for 2 seconds then stop.
if (new Date() - timeCompleted > 2000) {
clearInterval(pollLoaded);
}
}
else {
clearInterval(pollLoaded);
}
},100);
}

};