How the heck do I install this script !?!?

Your page still has the vars with incorrect paths and above fancyplayer.js rather than below. Here is the replacement code again.

<script src="/construction/fancyplayer.js" type="text/javascript"></script>

<script type="text/javascript">
var videopath = "http://www.thecreativesheep.ca/construction/";
var swfplayer = videopath + "videos/flowplayer-3.1.5.swf";
</script>

I hope I had fixed the paths, but the video continues to ask to be saved instead of being played !

You have still not fixed the var paths.

Change this:

<script type="text/javascript">
var videopath = "http://www.thecreativesheep.ca/construction/";
var swfplayer = videopath + "construction/videos/flowplayer-3.1.5.swf";
</script>

to this

<script type="text/javascript">
var videopath = "http://www.thecreativesheep.ca/construction/";
var swfplayer = videopath + "videos/flowplayer-3.1.5.swf";
</script>

Can you see why the bottom code is correct?

var videopath points into the “construction” folder.

var swfplayer points first to videopath and adds on (with a +) the path from there to the swf file i.e. videos/flowplayer-3.1.5.swf

Do you see how that works? The path set in the videopath var is also used in the swfplayer var.

I’ve applied those changes, but it continues not to work.

Let’s compare the demo site with yours. Can you spot the difference between the anchors that link to the videos?

Demo

<a class="video_link" href="videos/tour.flv">[...]</a>

Creative Sheep

<a class="videoplayer" href="videos/truck.flv">[...]</a>

A peek inside fancyplayer.js shows this on line 18:

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

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 ?

What did you change?

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

I changed the class within the script.

Please be more specific. Which script, which line and which class?

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.

jquery.fancybox.css only provides rules for Fancybox. Best seek advice in the CSS forum.

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.

The Fancybox overlay appears, then nothing. The Firefox error console eventually reports

Error: script stack space quota is exhausted
Source File: http://www.thecreativesheep.ca/construction/jquery-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:

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.

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!

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:

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

The page has been updated, same situation.

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

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

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:

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

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.

It loads, but I get an error “unable to load resources ?”

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.

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