0

quick question:

1) I have got the standard Fancybox (V2) setup working and I want it to fire the modal when the user is reading the page and then reaches a certain div (or any other element).

2) So it's not a 'delay', its when the user reaches a certain part of the page.

Can someone throw some coding light on how to do this please? :)

(Note: I AM NOT a programmer, but can handle mediocore js/html/css...)

Amod
  • 283
  • 8
  • 18

1 Answers1

0

The easiest way is to check the scroll height versus the height of the element you wish to trigger, then simulate a click on the Fancybox link you want to open.

UPDATE: This fiddle should give you an idea how to do it. http://jsfiddle.net/eKF4f/2/. It is not the most complete example, but should give you a starting point.

This is the part that does the work

$(document).scroll(function () {
    if($(document).scrollTop() >= $('#box').offset().top && !fired)
    {
         $.fancybox.open([
         {
             href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',                
             title : '1st title'
         }]);
    }
});

NOTE: As far as UX is concerned, this is generally bad practice. Unless you have a good reason to open a modal, you should not block page content unless the user takes an action that triggers the modal.

Zane M.
  • 490
  • 2
  • 7
  • How can this be used to open inline content? – Amod Oct 15 '14 at 12:20
  • @Amod Care to elaborate what you mean by "inline content?" Do you mean an image already present in the page? This is done very easily in a variety of ways per the Fancybox docs: [http://fancybox.net/howto](http://fancybox.net/howto) – Zane M. Oct 15 '14 at 22:01
  • I mean showing NOT an image, but text content from a div with a specific id. Something like this one: http://stackoverflow.com/questions/3963338/loading-inline-content-using-fancybox – Amod Oct 17 '14 at 07:15