Support » Plugin: Easy FancyBox » [Plugin: Easy FancyBox] FancyBox activation on mouse hover?

  • Resolved mat

    (@newash2)


    Hi!
    I was thinking about using FancyBox iframe for display of text content from other document on my site to describe some technical phrases over curent document without leaving it.. Well, now I am just using it like it is – making an anchor there, and (text)link with iframe and FancyBox class here.

    But – it would bring better User experience when it could be a possibility to activate FancyBox on mouse hover over text with link – to omit Users affraid of link destination/content.

    It is already?

    http://wordpress.org/extend/plugins/easy-fancybox/

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author RavanH

    (@ravanh)

    No, it is not… but you could do this:

    Ad a text widget to your site footer or sidebar with this content

    <script type="text/javascript">
    jQuery(document).bind('ready gform_post_render',function(){
     jQuery('.fancybox-iframe').mouseenter(function() {
      jQuery(this).trigger('click');
     });
    });
    </script>

    Note: untested so it might need some more work… The general idea is to add a new event on mouse hover that will activate a click on that element which in turn should activate FancyBox.

    Thank You! But it dont want to work:)
    No matter that – its just my whim.

    Maybe some folks will check the code later.
    Cheers!

    Plugin Author RavanH

    (@ravanh)

    Just tested the code on my own site and it works… See http://demo.4visions.nl/easy-fancybox-sandbox/ a little bit down the page there is a link called ‘iframe link’. Hover over it 🙂

    If you got a link to your site I can take a look.

    Strange – It doesnt work for me. I’m using Win XP SP2, actual Chrome, with even PopUps on ;)and JavaScript on. Also tested on FF 11.

    Any idea?

    Link to my site is not needed for now I gues? (Entrepreneur top secret stuff;)

    I would like to notice, that class=”fancybox-iframe” (with “-” ) do not make a popup – just going to the page. <- just to make full view for You, Doctor.

    Plugin Author RavanH

    (@ravanh)

    Hmmm… On my side, in Firefox 14, Chromium 18 (the open version of Google Chrome) and Opera 12 it works but you are right, in Google Chrome it does not.

    Strange.

    Plugin Author RavanH

    (@ravanh)

    Strike that… it was a caching issue on my test site. Got a link to your site?

    For a test one:
    http://quake2download.pl/

    its a ‘komponenty’ link:
    <a href="http://quake2download.pl/blog/2011/11/26/podsumowanie-pracy-nad-pak0pak/#wywalone_rzeczy" class="fancybox iframe">komponenty</a>

    on source:
    http://quake2download.pl/blog/2011/11/26/podsumowanie-pracy-nad-pak0pak/
    (…) podejrzanych plików. <a name="wywalone_rzeczy"></a>Wywaliłem dzieki temu: (…)

    Plugin Author RavanH

    (@ravanh)

    Ah, I see what is going on. Since you are using iframe content, I assumed you where using the dedicated class “fancybox-iframe” (notice the hyphen) but you are using “fancybox iframe” which also works fine, except that the code I gave you will not be bound to it.

    Use this as alternative:

    <script type="text/javascript">
    jQuery(document).bind('ready gform_post_render',function(){
     jQuery('.fancybox.iframe').mouseenter(function() {
      jQuery(this).trigger('click');
     });
    });
    </script>

    (notice the hyphen is now a dot!)

    THIS IS AWSOME !

    Great tool to make explanation of some things in text from other documents (i gues many more examples of uses can be done by it as well 🙂

    Really, really usefull.

    Thanks!

    (but why on Your site i do not get this effect? and why class with “-” do not make a popup for me? – just obstinate curiosity)

    <post was duplicated>

    Plugin Author RavanH

    (@ravanh)

    jQuery can reference objects in the HTML document by means of ID or CLASS attributes. When you have a document object — like in this case an anchor tag <a ... > — that has the class attribute value set to “fancybox iframe” without the hyphen (which will be seen as two different class names) it can be targeted by jQuery with either jQuery('.fancybox'), jQuery('.iframe') or jQuery('.fancybox.iframe') where that dot before the value means jQuery should be looking for class names.

    But when you used the first code I gave you, with jQuery('.fancybox-iframe'), the script could not find any instances of objects with class=”fancybox-iframe” (which is seen as one class name) because there were none.

    On my test site, where I use class=”fancybox-iframe” for all iframe links (you would need to activate the iFrame option on your Settings > Media page if you want to use fancybox-iframe on your site too) the effect should be visible too. Try the second and third link on http://demo.4visions.nl/easy-fancybox-sandbox/pdf-embeds/ for instance…

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘[Plugin: Easy FancyBox] FancyBox activation on mouse hover?’ is closed to new replies.