WordPress.org

Ready to get started?Download WordPress

Forums

Easy FancyBox
[resolved] Images & Inline not displaying correctly (13 posts)

  1. nef426
    Member
    Posted 2 years ago #

    I am using Easy Fancybox, calling it manually for images and inline content. When i do so, however the box appears with the height and width set to 0, and aligned top left. If i manually expand the boxes dimensions with CSS + firebug, the image/content is visible underneath -- I have tried messing with the 'box size' options under settings-media, however this doesn't appear to help anything... Additionally the close button is set to 'display:none;' and if i force it to display it doesn't function.

    The plugin works fine for iframes and youtube items, provided i use the classes fancybox-iframe, and fancybox-youtube.

    Any ideas?

    Thanks in Advance for any suggestions.

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

  2. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

    check your page source code to see if the main jQuery library is being loaded twice, or if the easing script file is missing due to missing wp_footer() call in your themes footer.php

  3. nef426
    Member
    Posted 2 years ago #

    Thanks for the quick reply -

    wp_footer() is being called in the footer.php file - and the easing script is present.

    I've double checked and the jQuery library is not being loaded twice.

    WP - 3.3.1
    Easy Fancybox - 1.3.4.9

    any other thoughts?

  4. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

    And accessing the easing script file directly (use the URL present in your source) does indeed return the script? And what about the stylesheet referenced in the source header?

    Do you have a developer toolbar on your browser to see what javascript errors occur?

    Otherwise, I'll need a link to your site to find out more...

  5. alphaalec
    Member
    Posted 2 years ago #

    I believe I'm getting the same issue. It's something to do with the Elastic transitions I think, because when I click the Fancybox image link, Console gives me this error:
    f.easing[i.animatedProperties[this.prop]] is not a function

    A temporary fix is to go to the Easy Fancybox settings and change transitions to Fade. Hopefully this is somewhat helpful.

  6. nef426
    Member
    Posted 2 years ago #

    Yup, same issue as alphaalec, switching to fade 'solves' the issue (thanks!) -- upon further inspection i get the same error that alphaalec referenced above:

    f.easing[i.animatedProperties[this.prop]] is not a function

  7. alphaalec
    Member
    Posted 2 years ago #

    This is slightly beyond my knowledge span, but maybe the Easing library for those transitions isn't be linked to properly?

  8. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

    @all, I'll need links to live examples to check wy the easing script is failing...

  9. alphaalec
    Member
    Posted 2 years ago #

    I've put my settings back to Elastic, see here: http://testing.alphaalec.com/graphic

    The link I have hooked up to FancyBox is the Preview Wallpaper link under Angle Fractal.

  10. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

    alphaalec, there is a hardcoded inclusion of the main jQuery library in your theme header.php template source that results in double loading of (different versions of) the library:

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

    Please remove it or replace with an if statement.

    Plus some remaining stylesheet that might have some impact here:

    <link rel='stylesheet' id='woocommerce_fancybox_styles-css'  href='http://testing.alphaalec.com/wp-content/plugins/woocommerce/assets/css/fancybox.min.css?ver=3.3.1' type='text/css' media='all' />
  11. alphaalec
    Member
    Posted 2 years ago #

    There we go, that solved it! I just had to remove the hardcoded inclusion. Many thanks.

  12. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

    nef426, could you check for double inclusion of the jquery library on your site too? You'll find it in the source code either named jquery.min.js or jquery.js ...

  13. nef426
    Member
    Posted 2 years ago #

    RavanH,

    I finally found the extra JQuery inclusion buried in the content body -- scoured the last time<head> and footer of the site with firebug, but didn't find it. Once i deactivated the one i found in the body, i was able to get the elastic transitions working.

    Thanks for your help on this one --

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic