SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    FancyBox doesn't load

    FancyBox won't load here. Checked the paths all looks good, click the Cafe Icon.

  2. #2
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It appears you have the main Fancybox .js file linked to from the <head> of your page, but I don't see the following in the <head> anywhere (though I might have missed it):
    Code:
    $(document).ready(function() {
    
    	/* This is basic - uses default settings */
    	
    	$("a#single_image").fancybox();
    	
    	/* Using custom settings */
    	
    	$("a#inline").fancybox({
    		'hideOnContentClick': true
    	});
    
    	/* Apply fancybox to multiple items */
    	
    	$("a.group").fancybox({
    		'transitionIn'	:	'elastic',
    		'transitionOut'	:	'elastic',
    		'speedIn'		:	600, 
    		'speedOut'		:	200, 
    		'overlayShow'	:	false
    	});
    	
    });
    Then on a linked image (if it's just a single image that's not part of a group) than it needs an ID (you can only declare an ID once per page) of single_image:
    HTML Code:
    <a id="single_image" title="" href=""><img src="" alt="" /></a>
    If you have a group of images (as it appears you do on that page) you can assign a class (can have as many of the same class as you want per page) of grouped_elements with a matching rel="" attribute.

    HTML Code:
    <ul>
    <li><a class="grouped_elements" rel="group1" href="#" title="#"><img src="image1.jpg" alt="" /></a></li>
    <li><a class="grouped_elements" rel="group1" href="#" title="#"><img src="image2.jpg" alt="" /></a></li>
    </ul>
    Also you appear to be using an older version of Fancybox. Not sure if upgrading to the latest will solve the issues you're having, but it's probably a good idea to do, nonetheless.

    More info!

    Hope it helps.

  3. #3
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using flow player, sorry.

  4. #4
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    LOLzilla

  5. #5
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I found this, it seems pretty easy to set up: http://flowplayer.org/demos/installa...e-players.html

  6. #6
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It was working. Now it's not, I guess it breaks on it's own. (This)

  7. #7
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is so odd. Any ideas ? My Paths are good.

  8. #8
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unless I'm doing something stupid again.

  9. #9
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Try comparing your current page to the version that was working a few weeks ago. If you don't have a copy, Google has it cached.

  10. #10
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't pin point the problem. I'm scanning everything using FireBug and HTTP request, comparing the paths etc. I can't find it.

  11. #11
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    If you study the current HTML with Firebug you'll see that, when the current page loads, the Fancybox code is correctly generated at the bottom of the body.

    Here's what happens in the older, working version of the page: when the video link is clicked, #fancy_outer is given some inline styles including display:block;. When the video ends or the background is clicked, the display value changes to none.

    When the video link is clicked in the current page, display:block; is not applied to #fancy_outer. If you highlight #fancy_outer in Firebug and add display:block in the Style panel, the video will appear and play.

    Find what's preventing display:block from being applied - to show the element - and you'll fix it.

    The old version of the page uses a different version of jQuery: 1.4.2 rather than 1.6.4. Maybe that has something to do with it.

  12. #12
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The little stuff always gets me. It frustrates me. I think I changed the style and didn't change it back. Thank you.

    If you study the current HTML with Firebug you'll see that, when the current page loads, the Fancybox code is correctly generated at the bottom of the body.
    How did you find this out ?

  13. #13
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The generated code is shown in Firebug's HTML pane. Hidden elements are greyed out. #fancy_outer is in #fancy_wrap.

    Your linked page isn't working yet. Did you try the older jQuery?

  14. #14
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Problem was jQuery. Victor do you remember the issue I was having with IE and the contact page, I know this is not related to JS but if you could test ? I had someone test a little while ago they didn't experience any issues, so I'm a little bewildered.

  15. #15
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The Contact form validation still has the same bug.

  16. #16
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Odd. Can you personally recall if it was there before the downgrade of jquery ? I need to nail this bug.

  17. #17
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    No, I didn't test your form with the later version of jQuery.

  18. #18
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This bug seems to be hard to explain, do you have any suggestions on explaining ? Mentioning there is flickering between two fields appears vague.

  19. #19
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I described the bug and the process of activating it on your previous thread. As I said before, the script seems to have been buggy from the outset, so your best bet is to either contact the person who supplied it or look for an alternative.

  20. #20
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanx. I'm going to hopefully find a solution.


Bookmarks

Posting Permissions

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