Kod som behövs för tillämpningen

Externa js/css, placeras i head-sektionen

Script-initialisering, placeras i head-sektionen

Här anges fönstrets storlek och andra parametrar.

//2. Fancybox-Mobilläge med endast övre marginal
$(document).ready(function() {
if ($(window).width() < 500) {
$(".fancybox").fancybox({
'width': 1920,
'height': 1080,
'transitionIn': 'elastic', 
'transitionOut': 'elastic',
'type': 'iframe',
'fitToView' : true,
'afterLoad':closeFix,
margin: [30, 0, 0, 0],
padding: [1, 0, 0, 0],
});}

//3. Fancybox-Desktopläge med samtliga marginaler
else{
$(".fancybox").fancybox({
'width': 1920,
'height': 1080,
'padding': 1,
'margin': 20,
'transitionIn': 'elastic', 
'transitionOut': 'elastic',
'type': 'iframe',
'fitToView' : true,
});}
});

//4. Förflyttar stäng-knappen enligt övre marginal. "fancybox-close-gitech" kan heta något annat, kontrollera i webbläsaren
function closeFix(){
setTimeout(function(){
document.getElementsByClassName("fancybox-close-gitech")[0].setAttribute("style","position:fixed;top:-2px;right:-2px;");
}, 1000);
};
</script>

Inbäddningskod, placeras i body-sektionen.

Här anges valfri adress att bädda in.

Iframe Popup

Enkel demonstration av Iframe-inbäddning i Jquery fancybox.
Bör gå att anpassa till andra varianter av lightbox, colorbox eller motsvarande.
Två lägen, skärmbredd < 500 samt övriga fall (storleksändra fönstret och ladda om sidan för att testa).

Klicka på knappen:

Kod som behövs för tillämpningen

Externa js/css, placeras i head-sektionen

Script-initialisering, placeras i head-sektionen

Inbäddningskod, placeras i body-sektionen.

Iframe Popup

Enkel demonstration av Iframe-inbäddning i Jquery fancybox. Bör gå att anpassa till andra varianter av lightbox, colorbox eller motsvarande. Två lägen, skärmbredd < 500 samt övriga fall (storleksändra fönstret och ladda om sidan för att testa).

Klicka på knappen: Popup-länk: Demobilder

Kod som behövs för tillämpningen

Externa js/css, placeras i head-sektionen

Script-initialisering, placeras i head-sektionen

Inbäddningskod, placeras i body-sektionen.

Enkel demonstration av Iframe-inbäddning i Jquery fancybox.
Bör gå att anpassa till andra varianter av lightbox, colorbox eller motsvarande.
Två lägen, skärmbredd < 500 samt övriga fall (storleksändra fönstret och ladda om sidan för att testa).

Klicka på knappen: