Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
Like Tree2Likes
  • 1 Post By Ronald Roe
  • 1 Post By Ronald Roe

Thread: Fancybox not working

  1. #1
    Junior Member iRmandos's Avatar
    Join Date
    Jan 2017
    Location
    South Africa
    Posts
    7
    Member #
    56020

    Question Fancybox not working

    Good Day everyone.

    I have recently asked for help with my first website coding by hand and was amazed by how fast the support in the community helped me resolve my problem.

    I have used a free template to build the website but I can't get fancybox to work on my media page.

    website and code is hosted on GitHub.com => https://github.com/irmandos/IOE
    website that doesn't want to display the fancybox when viewing backgrounds => Isle of Evolution | Media

    I would really appreciate it if someone can have a look as to why my fancybox is not coming up.

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    2,913
    Member #
    27197
    Liked
    906 times
    You're getting an error that "$(...).fancybox() is not a function". Start there. Most likely, either the element you're calling it on is incorrect or it's firing before fancybox or one of its dependencies are done downloading.

    I'm going to go with the latter.
    iRmandos likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Junior Member iRmandos's Avatar
    Join Date
    Jan 2017
    Location
    South Africa
    Posts
    7
    Member #
    56020
    Quote Originally Posted by Ronald Roe View Post
    You're getting an error that "$(...).fancybox() is not a function". Start there. Most likely, either the element you're calling it on is incorrect or it's firing before fancybox or one of its dependencies are done downloading.

    I'm going to go with the latter.
    Thank you for your reply, I have used it and applied the following which solved my problem. I don't know whether what I did was correct (best practice though).

    1. I moved the fancy box invoking script to the footer of the website.
    2. I have moved the script loading jQuery from the Google servers to be one of the first lines in my head
    3. Made all the other fancy box helper scripts load async.

    Isle of Evolution | Media <= when clicking on a background it now shows a fancy box on my side.

  5. #4
    Junior Member iRmandos's Avatar
    Join Date
    Jan 2017
    Location
    South Africa
    Posts
    7
    Member #
    56020
    Quote Originally Posted by iRmandos View Post
    Thank you for your reply, I have used it and applied the following which solved my problem. I don't know whether what I did was correct (best practice though).

    1. I moved the fancy box invoking script to the footer of the website.
    2. I have moved the script loading jQuery from the Google servers to be one of the first lines in my head
    3. Made all the other fancy box helper scripts load async.

    Isle of Evolution | Media <= when clicking on a background it now shows a fancy box on my side.
    I have reported that my issue was resolved but I am seeing something else that is now causing an issue, should I open a new thread for it?

    When the page is loaded the first time and the jquery script is loaded from Google servers the fancybox is working perfectly.

    BUT

    When you navigate to any other page and come back to the media page the jQuery script is loaded from cache and then the fancybox stops working.

    Does anyone have any idea why this is happening?
    I understood that when loading a resource from HTTPS it won't be cached (yet this still happens).<= https://msdn.microsoft.com/library/d...(v=vs.85).aspx
    Last edited by iRmandos; Jan 10th, 2017 at 04:53 AM. Reason: added link

  6. #5
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    2,913
    Member #
    27197
    Liked
    906 times
    You're likely having the same problem. What you need to do is have the script wait until everything is loaded and ready.

    JavaScript has a number of events that it can latch onto. One of those events is the "load" event that is attached to the window object.

    Since you're using jQuery, there's 2 ways you can attach a function call to the window's load event.

    No jQuery:
    HTML Code:
    window.addEventListener('load', function(evt){
    
      // Call your fancybox script here.
      $('.fancybox').fancybox();
    
    });
    jQuery:
    HTML Code:
    $(window).load(function(){
    
      // Call your fancybox script here.
      $('.fancybox').fancybox();
    
    });
    Both do the exact same thing and will force the script to wait until everything is done loading before firing. In fact, the jQuery one is just an alias for the non-jQuery one.
    iRmandos likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  7. #6
    Junior Member iRmandos's Avatar
    Join Date
    Jan 2017
    Location
    South Africa
    Posts
    7
    Member #
    56020
    Thank you very much for your reply Ron.

    I have modified it as per your comment and it is working now. I seem to have to give the page an extra second after it appears to have loaded (when it loaded from cache) before I click on a background to make the fancy box appear.

    I am thinking that it can be my slow Internet causing this to happen? (the main reason I'm trying to cache as much as possible)

    Besides the little second or so, everything is working perfectly now (at least it does on my side).

  8. #7
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    2,913
    Member #
    27197
    Liked
    906 times
    That is the time it is likely taking jQuery to load it's document model.

    Without going down the long road of why jQuery needs to consolidate its useful bits into a separate library and die, it essentially loads its own version of the DOM after the DOM has already loaded. There is little you can do to help with that slight delay, because jQuery needs to do its thing, parsing everything on the entire page and creating an object from it that already exists. If you are interested in digging into it, check out this article: jQuery considered harmful | Lea Verou

    But don't stop using fancybox right now. It's the best modal setup out there, and it's not worth moving away from at this point. Do, however gain a deeper understanding of JavaScript and when you should and should not use jQuery.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Tags for this Thread

All times are GMT -6. The time now is 12:54 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2017 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com