Trouble-shooting fancybox, etc.

[katiebugla]

Here is the current site page http://richieadams.com/reels.html

The images beneath the headers "Live Action" and so on should be popping up the fancybox with .mov files... I found this code which is supposed bring up an iframe, but it's just popping the video up in a full page. Also, it is cutting off the controls on the video.
Code for calling the iframe:

<script type="text/javascript">
	$(document).ready(function() {
		$(".fancyMovie").fancybox({
'transitionIn' : 'elastic',
'padding' : 0,
'autoScale' : false,
'transitionOut' : 'fade',
'width' : 480,
'height' : 286,
'type' : 'iframe',
});
	});
</script>

Video code that is supposed to play in iframe:

<embed src="qtms/rrc_live_action_reels_022912.mov" width="480" height="270" 
autoplay="true" controller="true" pluginspage="http://www.apple.com/ 
quicktime/download/" /> <!-- this is your code for each individual reel html -->

Finally, is there a way to get rid of the white flashes between page loads? I have tried to restructure the site in a way that makes sense and should take less time to load, but the flashes are still registering for me.

Thank you.

[Beverleyh]

Hi Katie,

I think you need to tackle this in 2 parts; first the fancybox setup and then the iframed pages (you probably already know that though)

I downloaded your page and the first thing I noticed was that the following files didn't download along with everything else;
- jquery.mousewheel js file,
- jquery.fancybox.pack js file,
- jquery.fancybox css file

Once I'd downloaded the files from the fancyapps website and corrected the paths in the source code, your fancybox windows do in fact work 'as is'.

So there's your first solution - correct the paths to those 3 files on your server and the fancyboxes will work fine

Next step is the iframed video pages. I'd firstly tackle the video format to make it more suitable for the web - .flv or .mp4 will be your best options.

You can use this FREE video converter: http://www.dvdvideosoft.com/guides/f...-converter.htm - instructions are included and it automatically outputs an html page with the correct video embed code already inserted. You also have several customisation options for video resolution and the styles of control bar so you can tailor it to your website.

Anyway, let this video converter software do all the work for you and you'll have a ready-made html page, with your video already converted and inserted, pop out of the other side. Very usable, the most appropriate code/video format, higher compatability and no white flash. You might need to tweek the html a little bit in the generated file, but overall I don't think you can get any more convenient!

[katiebugla]

Hi Katie,

I downloaded your page and the first thing I noticed was that the following files didn't download along with everything else;
- jquery.mousewheel js file,
- jquery.fancybox.pack js file,
- jquery.fancybox css file

Once I'd downloaded the files from the fancyapps website and corrected the paths in the source code, your fancybox windows do in fact work 'as is'.

So there's your first solution - correct the paths to those 3 files on your server and the fancyboxes will work fine

Thank you, Beverly. I will try all of the things are suggesting, but the first thing you mentioned - I have all of of those files and I believe they are in the correct files - I will attach a screengrab. Did I misunderstand something?

[katiebugla]

It never uploaded server-side on the FTP. I will attempt the video converter shortly.

[Beverleyh]

Hi,

Unfortunately I can't view your code/image right now (I'm on my BlackBerry), but from memory, when I saved your web page to my desktop, those 3 files didn't download; Other js files, images and css files did - just not those 3 critical files, which usually means that the paths are wrong on the server, or they are being blocked for some reason.

When they didn't save onto my computer, I manually copied your relative paths for each of the files, and pasted them into my browser address bar at the end of your website domain name, but again nothing (no download prompt), which suggests that those files are in another location, or maybe not uploaded at all.

One thing I did notice was the use of 2 different domains in your code; one for richieadams.com and another that looked something like http://rrc.la/ ? - again that is just from memory so probably won't be 100% correct. Maybe that's the problem? If your scripts are on another domain (a test server perhaps?) your relative paths won't work.

To be sure, after you've double checked that the js/css files are uploaded, change your js/css paths to be absolute for now while you troubleshoot, and then change them back to relative paths once you're sure that everything else is setup and working how you'd like. If you paste the absolute path of each file into your browser address bar, it *should* prompt a download, so that's when you know the src="" references will be correct in the code of your web page.

Hope that helps

[Beverleyh]

Ha - that's what I get for trying to reply on BlackBerry - it too so long that you already figured out the problem

[katiebugla]

Thank you, again, Beverly! I really appreciate the help. I don't know if this appropriate or not, but as I work on this site I will need some input/help with widely varying issues. Is there a way I can contact you directly?

Another question: Regarding the rrc.la - richieadams.com is living in a test folder and then we've used some sort of site-forwarding to populate richieadams.com... I have noticed this causes some issues. That all said, what is an absolute path versus a relative path? (Excuse my lack of knowledge.)

Thank you for your help... Agan, it is really appreciated.

[Beverleyh]

No problem.

If you need to contact me direct, feel free to email me through my Focus on Function website, however, it still might be best to openly post her on DD to take full advantage of the collective knowledge on the forum. 3 new mods have just been announced and those guys, along with longstanding regulars, John (jscheuer1) and Dan (djr33), will all be able to give advice in all manner of areas - more so than me on my own - hey, I fly a flag for the ladies in IT but these boys really know their stuff, and you'll get at least one of them looking in on things around the clock

To answer your other question, an absolute path is when you use the full link/url, inluding the http:// part, so you could specify the src="" as;
src="http://www.mywebsite.com/js/fancyscript.js" (absolute), OR
src="js/fancyscript.js" (relative - to the file that's using it)

A relative path can work offline but you need to be online for an absolute path to work (as long as the file in the src="" is uploaded to the specified location).

Bye for now

[katiebugla]

Ok, back to the fancybox - I am now trying to use fancybox to have a video lightbox pop up over the screen on the home page of http://richieadams.com - I co-opted some code from someone else, but the vimeo video is taking over the whole screen. I am sure I am missing something. HELP?!

[katiebugla]

ARG! Didn't attach js and css... SORRY!