Migration from V3 to V4

[ephenyxshop]

Hi
I have been trying differnet option to migrate from v3 to v4; without any success, I essentially use fancybox for html content, I use for example on a success ajax request the following code :

success: function (data) {
$('#addAccountArea').html(data.html);
$.fancybox.open($('#addAccountArea'), {
touch: false,
clickContent: false,
clickSlide: false
});
}

I have been trying bind, show, theres no way to make it work properly.

Any help would be welcomed.

[fancyapps]

Hi,

You have to use Fancybox.show() method to immediately display content. Quick example:

<div id="addAccountArea">
  <p>
    <input name="sample" type="text" value="" />
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut semper, justo eget vehicula vestibulum, enim enim suscipit lectus, et sagittis nibh risus vel metus. Quisque eu ornare ante, et gravida mauris. Vivamus massa justo, sagittis non viverra sed, sodales non nisi. Nunc semper, massa a aliquet dictum, enim nisi malesuada orci, et elementum lectus turpis et velit. Nam vel felis vitae tortor dignissim malesuada. Nam suscipit, justo eu elementum pulvinar, magna sem tempor ex, vitae iaculis tellus odio non nisl. Duis dolor orci, viverra ut finibus sed, aliquet vitae tortor. Proin sodales ipsum ac ipsum hendrerit tempus.
  </p>
</div>

<p>
  Display cloned element <br />
  <button id="demo1">#1 Demo</button>
  <button id="demo2">#2 Demo</button>
</p>

<p>
  Preserve changes <br />
  <button id="demo3">#3 Demo</button>
</p>

document.getElementById('demo1').addEventListener('click', () => {
  Fancybox.show([
    {
      html : document.getElementById('addAccountArea').cloneNode(true)
    }
  ]);
});

document.getElementById('demo2').addEventListener('click', () => {
  Fancybox.show([
    {
      src : "#addAccountArea",
      type : "clone"
    }
  ]);
});

document.getElementById('demo3').addEventListener('click', () => {
  Fancybox.show([
    {
      src : "#addAccountArea",
      type : "inline"
    }
  ]);
});

Demo - https://fancyapps.com/playground/zW

[gavin310]

One thing I would like to add that the author didn't address is the touch: false option. This option doesn't exist anymore. If you want to disable the drag cursor on an inline overlay, you need to set the option dragToClose: false.

$( 'a[data-fancybox="site-alert"]', siteAlert ).click( function( e ) {
	e.preventDefault();
	Fancybox.show( [{
		src : '#site-alert-overlay',
		type : 'inline',
		autoFocus: false,
		dragToClose: false,
	}] );
} );

[fancyapps]

@gavin310 Set dragToClose: false to disable drag up/down gesture that closes the modal. Set Carousel: { Panzoom: { touch: false } } to disable swipe gesture. See this demo - https://fancyapps.com/playground/1TK