Search code examples
javascriptjquerycssfancyboxfullpage.js

Change fancybox close button within html for one page scroll site

I have one page scroll site(like f.ex. fullPage.js, fullContent.js), where fancybox is used to open up new content.

<a class="fancybox" rel="group"  href="#content">
    <img src="img/thumb.jpg" alt="" />
</a>
<div id="content" style="display:none;">
    // content
</div>

Close button by default in fancybox is positioned absolute, which is not acceptable in my case - close button needs to be within specific div.

One way to trigger close is the following:

<a href="#" onClick="parent.jQuery.fancybox.close();">close</a>

It does close content, but it drops to start position of website, not to section from where fancybox is triggered. Any ideas how to get close button working so that after closing content, viewpoint doesn't change?
Interesting that default close button, which is enabled through js keeps viewpoint where it was before opening fancybox.

$(".fancybox").fancybox({
    closeBtn   : true,
});

Thanks in advance.

Solution

  • Use this:

    <a href="javascript:void(0);" onClick="parent.jQuery.fancybox.close();">close</a>

    This will stop the the browser to slide up.

    Or you may also try:

    <a href="#nogo"> or <a href="javascript:;">