If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

fancybox script issues

I am a newbie at javascript
I am having a problem using and setting up fancybox iframe video
is there someone here who has a little time and patience. I would really like to understand what is wrong with this.

I will send you much much good karma if you can help me outta this situation and everyone on countyfairgrounds.net will be MOST thankful too - cause I bloody well cannot fix it. I "think" I got the right scripts loaded but am having trouble getting the youtube smaller and in the center when the image is clicked on AND there is no closing x tag.... the image does click to open the youtube however. I "think" it has something to do with my script in my header.
<section class="video">
<a rel="gallery" class="Fancybox fancybox.iframe" href="http://www.youtube.com/embed/QzGyjGff-Q4">
<IMG Style="width:250;height:141;" alt="J.J. Harrison Rodeo Clown" src="http://www.countyfairgrounds.net/images/rodeoclownvideo.png"></a>
</section>

In the head you can see the files needed to do a video in a fancy box.

I than looked at your working site, found links at the end of the code and moved them up.
I first looked for the needed files on your site - in the next code section they are there with full address. This works:

hi sunfighter = I have not had a chance to get to this today. Now with a glass of wine - well, it will have to wait till tomorrow. I really appreciate your help. I do have a question - I have been taught to put the js files in near the closing body tag. Does it make a difference? and why did you put them in the head? Or is it hust fancybox. I am new at javascript and jquery - and am feeling a little overwhelmed.

I have always put the "calls to outside files" in the header; css first followed by javascript, and the order of these files based on dependency like jquery is loaded before files that use the framework. That is different than the coding itself. I also put my php above the doctype and try to place all of it there and not litter the html code with it.

Back in the day, about two years ago when I was dragged kicking and screaming to use javascript, I was taught to place the code in the head. Soon that was causing problems, because some code executed before the page loaded so along came 'onload' and it's own problems. Then a new rule was passed to put javascript after the page but before the </body> tag. Good advice, you wont go wrong if you follow that(but who knows?).

What I have found is js and jq functions need to be called and it makes no difference where they are placed normally(please notice my use of non-committal words. Because nothing is ever written in stone.) I usually place them in the header so I can see what going on as soon as I start to read the code.

I did put some links and script calls in the header and that's Ok. Besides the calls I do have executable js code, but that is bounded by the $(document).ready(function() and wont execute until the page is loaded.

Every programmer has his/her own style. That's mine. It is subject to change.

okay now if you will be patient I think we are getting someplace. That is first off where I am right now resisting javascript - I do know css3 and html5 - my site is built on it. As many years as I have used it - I am stilllearning new stuff with it. I do not php - I got a php guy - who does my php.
First your code came okay in the post the first time you placed it - I have it - First question - I downloaded fancy box on the 13th - latest version - I believe, (and I absolutely LOVE it when they tell you how easy something is to use - and I certainly "KNOW" better!) anyway I see the three folders in the download. - demo, lib, source. They are not to clear about how to use the graphics. I am used to putting my graphics in my html .... so I am a little confused - obviously there is another way. Anyway. I do understand and am comfortable with the order of this

-where did it come from. I looked at all the js files in the folders I downloaded. I take it then this is needed for placing video? Please be patient - I am trying to understand as much as possible.
AND I am not feeling at all comfortable with the javascript.... I am taking jquery lessons and like that better,.

ah I found it - thanks. I am a little confused about the words in the link called media="screen" - is this new? cause I have never seen anything like that in a link before.
at any rate here is the test link I am working on and we still have some problems
Can you help? http://www.countyfairgrounds.net/tes...tertainers.php
The pix of the cowboy is floating up and down as I scroll the page and it is messing up the code after it too. I finally figured out that if I put in our fancybox css folder the pix - it would work. ...here is the validation link http://html5.validator.nu/?doc=http%...tertainers.php

that id is in the fancybox.css file - if you do not give the image the id - then when you click on the image on the page you do not get the nice background or nice X when it loads.
can you help me with the css - or should I take it to the html formum - I know css but we all write code differently unfortunately. This is causing a problem on this page that I thought might be a JS issue having the image float as the page is scrolled - is it?

I have never really understood fixed in css - maybe I got it better now.
Thanks.

Okay next question - in my original code of javascript I had input this line
attr('rel', 'gallery')

a video gallery is where it is flipping through videos in the same opening from one pix right? is that what that line does?

I also have a question or two about the javascript code as I am a newbie here.
can you give me a comment on each of these fields so I have a little of understanding of what each means? cause I don't
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'