SitePoint Sponsor

User Tag List

Page 2 of 4 FirstFirst 1234 LastLast
Results 26 to 50 of 81
  1. #26
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Let's compare the demo site with yours. Can you spot the difference between the anchors that link to the videos?

    Demo
    Code HTML4Strict:
    <a class="video_link" href="videos/tour.flv">[...]</a>

    Creative Sheep
    Code HTML4Strict:
    <a class="videoplayer" href="videos/truck.flv">[...]</a>

    A peek inside fancyplayer.js shows this on line 18:
    Code JavaScript:
    	$(".video_link").hover(function(){
    		videoclip=$(this).attr('href');
    		$(this).attr({"href":"#video_box"});

    One of these things is not like the other (apart from the video filename)

  2. #27
    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 think I fixed, but I know something else has to be changed cause it continues not to work, besides how do I align the boxes horizontally and shrink them does the fancybox style have this in place or do I have to add ?

  3. #28
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    What did you change?

    Did you identify the difference between the anchors in the demo site and yours?

  4. #29
    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 changed the class within the script.

  5. #30
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Please be more specific. Which script, which line and which class?

  6. #31
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    OK, so here's what you've done:

    In fancyplayer.js you've changed 5 instances of ".video_link" to ".videoplayer".

    You left 7 instances unchanged.

    It would have been simpler to change the class on the anchors to .video_link. I suggest you revert your changes and do that.

  7. #32
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    ...how do I align the boxes horizontally and shrink them does the fancybox style have this in place or do I have to add ?
    jquery.fancybox.css only provides rules for Fancybox. Best seek advice in the CSS forum.

  8. #33
    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 see the script looks for a class called "video_link", clever. Although the video is not loading.

    How can I change the visual appearance of each of the list items ? There is a fancybox style sheet and an inline style, to shrink the boxes and cause a horizontal block element.

  9. #34
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The Fancybox overlay appears, then nothing. The Firefox error console eventually reports

    Code:
    Error: script stack space quota is exhausted
    Source File: http://www.thecreativesheep.ca/const...y-1.4.2.min.js
    Line: 21
    Just discovered I've been perusing the earlier Fancyplayer demo, which looks identical in the browser. The later demo
    includes two more vars that you can add below the others, though I doubt this'll solve the problem:

    Code JavaScript:
    var swfcontent = videopath + "videos/flowplayer.content-3.1.0.swf";
    var swfcaptions = videopath + "videos/flowplayer.captions-3.1.4.swf";

    In your place, I'd now set up a test page with everything not related to Fancyplayer removed.

  10. #35
    Non-Member
    Join Date
    Jan 2008
    Location
    N43° 44.4824', W079° 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Remove FancyPlayer, "script stack space quota is exhausted" could that mean that the video is too big ?!?! I'll comment it out, but I'd have to add it again to get it to work!

  11. #36
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    You haven't added the additional vars yet.

    The size of the video is unlikely to be responsible.

    I've spotted something else missing from your anchors, though I was sure they were there earlier: the anchor example I included earlier was from the earlier demo. Here's one from the later:

    Code HTML4Strict:
    <a href="images/tour_video.png" name="videos/tour.flv" title="Café Tour" class="video_link captions" rel="gallery">

    You'll need to change and add some attributes to each anchor.

    1. href - should link to the image, not the video.
    2. name - should link to the video
    3. title - caption (optional, requires the class "caption" to be included)
    4. rel - items with the same rel value are grouped together (optional, I think).

  12. #37
    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 page has been updated, same situation.

    This was the code I put within, assuming it would have worked.

    Code HTML4Strict:
    <a href="videos/gorilla.flv" class="video_link"><img src="images/gorilla_video.png" width="218" height="148" alt="gorilla" style="margin-bottom:4px" /></a>
    The page was working flawlessly before Fancybox, just a FYI.

  13. #38
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    There were a numbers of errors in your code. Replace the entire #videos ul with this and at least the markup will be as it should be:

    Code HTML4Strict:
    <ul id="videos">
    	<li>
    		<a class="video_link captions" title="Café Tour" name="videos/truck.flv" href="images/tour_video.png" rel="gallery">
    			<img height="148" width="218" alt="truck" src="images/tour_video.png">			
    		</a>
    	</li>
    	<li>
    		<a class="video_link captions" title="Gorilla" name="videos/gorilla.flv" href="images/gorilla_video.png" rel="gallery">
    			<img height="148" width="218" alt="gorilla" src="images/gorilla_video.png">
    		</a>
    	</li>
    	<li>
    		<a class="video_link captions" title="Bottle Opener" name="videos/bottleopener.mp4" href="images/bottleopener_video.png" rel="gallery">
    			<img height="148" width="218" alt="bottleopener" src="images/bottleopener_video.png">
    		</a>
    	</li>
    </ul>

    Firefox is no longer showing the previous error. So some headway is being made.

  14. #39
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I edited the above into your page using Firebug, and ran the fancyplayer code in the console.

    Clicking the images opened Fancybox. It tried to load the videos but the following required files are not where they should be - in the videos folder with flowplayer-3.1.5.swf

    flowplayer.content-3.1.0.swf
    flowplayer.captions-3.1.4.swf

    It's over and out from me tonight. You've should now have enough info to get this working.

  15. #40
    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 loads, but I get an error "unable to load resources ?"

  16. #41
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    My error.

    Flowplayer is trying to load caption files. You aren't using captions so remove the captions class from all the anchors e.g.

    Code HTML4Strict:
    <a class="video_link" title="Café Tour" name="videos/truck.flv" href="images/tour_video.png" rel="gallery">

  17. #42
    Non-Member
    Join Date
    Jan 2008
    Location
    N43° 44.4824', W079° 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Continues with 'failed to load resource 2032' !!

  18. #43
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    If you've uploaded all the files supplied with Fancyplayer then there should be a file named "empty.srt" in the videos folder.

    If it's not there, upload it.

  19. #44
    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 works but the close button doesn't show up, I assume to change the style of how the player looks I have to edit the fancyplayer.css ?!?! I want to ask a question about innerfade, as I assume the rest of the fancy player is depending on style sheets, but if I do have lingering fancyplayer questions I'll ask I tried to create a horizontal list from the fancyplayer UL but without success, the same player will be used in other parts of the page except for it has to be styled.

  20. #45
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Once again, it's paths.

    If you check the original Flowplayer files you downloaded you'll see that there's a folder named "css". In this are CSS files for Fancybox and the demo.

    There is also an "images" folder with images used by both the demo and Fancybox. These should all be on your server, retained within the "images" folder.

    Open the jquery.fancybox.css file and you'll see that where a background image is used, the URL for the images begins "../images" which means that the stylesheet looks for the images folder one level up from where the CSS file is. As you have put jquery.fancybox.css in the same folder as your HTML it will look for the "images" folder one level up from there. i.e. the wrong place.

    So your options are to either create a css folder alongside the HTML file and put jquery.fancybox.css in it, or leave it where it is and remove the "../: from all the background image URLs.

    As for the horizontal alignment of your list, open the css file supplied with Flowplayer named "style.css". The CSS rule you need has the selector "#videos li". Put that in the embedded stylesheet in your HTML file.

    Also, consider adopting an organised directory structure for your site: folders for css, js and images rather than keeping most everything in one place.

  21. #46
    Non-Member
    Join Date
    Jan 2008
    Location
    N43° 44.4824', W079° 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So your options are to either create a css folder alongside the HTML file and put jquery.fancybox.css in it, or leave it where it is and remove the "../: from all the background image URLs.
    I followed the route of creating a directory called CSS and placing all related fancybox CSS files within this directory, unfortunately the player is not loading up any longer. As for images I do have all the fancy player images in a directory called 'images' unless there is a folder misconception issue and as you mentioned it's unable to find !?!?

  22. #47
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    You know the CSS files have been moved, but does the HTML file?

  23. #48
    Non-Member
    Join Date
    Jan 2008
    Location
    N43° 44.4824', W079° 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Update/Change...

  24. #49
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Yes. So something needs to be changed in the HTML file so that it can find jquery.fancybox.css where it is now. I'm not going to spell it out, but it involves a path.

  25. #50
    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 player is now working. Although I can't get it to horizontally align, I'm also going to update this thread as it's not script specific on another script once I do some more research as to why I can't get it to work as I want it. I realized the path problem in the HTML before it was too late and nature called, and I was too late to update the thread!!! An embedded style sheet will override an external, I don't think so !!!


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
  •