WordPress.org

Ready to get started?Download WordPress

Forums

Easy FancyBox
[resolved] FancyBox activation on mouse hover? (11 posts)

  1. mat
    Member
    Posted 2 years ago #

    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/

  2. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

    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.

  3. mat
    Member
    Posted 2 years ago #

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

    Maybe some folks will check the code later.
    Cheers!

  4. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

    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.

  5. mat
    Member
    Posted 2 years ago #

    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.

  6. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

    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.

  7. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

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

  8. mat
    Member
    Posted 2 years ago #

    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: (...)

  9. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

    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!)

  10. mat
    Member
    Posted 2 years ago #

    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)

  11. mat
    Member
    Posted 2 years ago #

    <post was duplicated>

  12. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

    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...

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic