vimeo: extreem beginner
Cady
things out by taking a sample and swapping out my files. I've had
some trouble with fancybox because I couldn't find any bare bones
samples...
I want to embed vimeo vids, and couldn't figure it out from other
posts. my photo gallery works so far. just to make absolutely
positive, I'm including all the html of the two bare bones photo and
video galleries. The video one is unfinished because I couldn't get
the first link to work...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe Dreamweaver CS4" />
<title>Ladies Brewing Club: San Francisco Chapter</title>
<link rel="shortcut icon" href="/favicon.ico">
<link href="LBC.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="fancybox/
jquery.fancybox-1.3.0.css" type="text/css" media="screen">
<script type="text/javascript" src="http://code.jquery.com/
jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="fancybox/
jquery.fancybox-1.3.0.pack.js"></script>
<script language=javascript>
<!--
if((navigator.userAgent.match(/iPhone/i)) ||
(navigator.userAgent.match(/iPod/i)))
{
location.replace("http://iphone.ladiesbrewingclub.com/Photos.html");
}
-->
</script>
<script type="text/javascript">
$(document).ready(function() {
$("a.gallery").fancybox();});
</script>
<script type="text/javascript">
$(document).ready(function() {
//Activate FancyBox
$("a.gallery2").fancybox({
// avoid closing fancybox with clickable content
'hideOnContentClick': false,
// set the fancybox size
'frameWidth':480,
'frameHeight':295,
// avoid video keep playing after
// fancybox is closed in IE
'callbackOnClose': function() {
$("#fancy_content").empty();}
});
});
</script>
</head>
<body>
<div id="wrap">
<div id="MAIN">
<div id="MAINcontent">
<div id="title">
</div> <!--title-->
<div id="nav">
<li id="Button1CURRENT"><a
href="index2.html"title="About">About</a></li>
<li id="Button2"><a href="Members.html"title="Members">Members</
a></li>
<li id="Button3"><a
href="Meetings.html"title="Meetings">Meetings</a></li>
<li id="Button4"><a href="Photos.html"title="Photos">Photos</
a></li>
<li id="Button5"><a href="Videos.html"title="Video">Video</a></
li>
</div> <!--nav-->
<div id="PicFrame">
<div id="PicThumbs">
<li id="gallery31"><a rel="group"
class="gallery" title="title 1" href="media/Pics/Pic31.png" ></a></li>
<li id="gallery30"><a rel="group" class="gallery" title="title
2" href="media/Pics/Pic30.png" ></a></li>
<li id="gallery29"><a rel="group" class="gallery" title="title
3" href="media/Pics/Pic29.png" ></a></li>
</div> <!--PicThumbs-->
<div id="VidThumbs">
<li id="gallery1"><a rel="group"
class="gallery2" title="title 1" href="http://vimeo.com/moogaloop.swf?
clip_id=4424147&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=0"
></a></li>
<li id="gallery2"><a rel="group" class="gallery2" title="title
2" href="media/Pics/Pic30.png" ></a></li>
<li id="gallery3"><a rel="group" class="gallery2" title="title
3" href="media/Pics/Pic29.png" ></a></li>
</div> <!--VidThumbs-->
</div> <!--PicFrame-->
</div> <!--MAINcontent-->
</div> <!--MAIN-->
<div id="footer">
<p><h1>© 2009</h1></p>
</div> <!--footer-->
</div> <!--wrap-->
</body>
</html>
JFK
go here
http://fancybox.net/blog
...... and follow the example No. 4
also notice the option were renamed in v1.3.0
check syntax here
http://fancybox.net/api
Cady
suggested at the top before head, basically replacing this:
<script type="text/javascript">
$(document).ready(function() {
//Activate FancyBox
$("a.gallery2").fancybox({
// avoid closing fancybox with clickable content
'hideOnContentClick': false,
// set the fancybox size
'frameWidth':480,
'frameHeight':295,
// avoid video keep playing after
// fancybox is closed in IE
'callbackOnClose': function() {
$("#fancy_content").empty();}
});
});
</script>
Also, what is the name of the gallery--in the script you suggested,
would I replace "#tip4" with "a.gallery2"? ie, what elements do I
need to change to customize the script on fancybox's website?
thanks so much!
On Mar 1, 10:38 am, JFK <jfk.d...@gmail.com> wrote:
> you can integrate vimeo the same way you do youtube
> go herehttp://fancybox.net/blog
>
> ...... and follow the example No. 4
>
> also notice the option were renamed in v1.3.0
> check syntax herehttp://fancybox.net/api
JFK
1. you place the script instead of the old one ...
anywhere BETWEEN <head></head> or <body></body> and nowhere else
(or replacing the old one)
2. if you mean to display several videos then you use 'class' in your
anchor
<a class="myclass" href="xxx"> ....
otherwise for a single video you could use id
<a id="myid" href="xxx">...
(please don't do href="xxx" ....kidding)
THEN ... you make your script accordingly so
$("a.myclass").fancybox({ ...
or
$("a#myid").fancybox({ ...
can you see it? period(.) for classes and # for ID
Tony Alfrey
> new to html, css, jquery eh?
> 1. you place the script instead of the old one ...
> anywhere BETWEEN <head></head> or <body></body> and nowhere else
> (or replacing the old one)
>
> 2. if you mean to display several videos then you use 'class' in your
> anchor
> <a class="myclass" href="xxx"> ....
> otherwise for a single video you could use id
> <a id="myid" href="xxx">...
>
> (please don't do href="xxx" ....kidding)
>
> THEN ... you make your script accordingly so
> $("a.myclass").fancybox({ ...
> or
> $("a#myid").fancybox({ ...
>
> can you see it? period(.) for classes and # for ID
>
>
A very good summary. ;-)
You realize of course that the fancybox group is much more popular than
the facebox group?
;-)
--
Tony Alfrey
tonya...@earthlink.net
"I'd Rather Be Sailing"
JFK
Tony Alfrey
> is there any other lightbox?
> really?
no. of course not.
--
Tony Alfrey
tonya...@earthlink.net
Cady
together my websites by trial and error, hence TOTAL BEGINNER.
preesh!
Cady
<script type="text/javascript">
$(document).ready(function() {
$("a.videogallery").fancybox();
});
$("a.videogallery").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 400,
'height' : 300,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
return false;
});
</script>
and THIS is the html bit:
<div id="VidThumbs">
<li id="gallery1"><a rel="group" class="videogallery" title="title
1" href="http://vimeo.com/moogaloop.swf?
clip_id=8755983&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1"
></a></li>
</div> <!--VidThumbs-->
but this is what I get in Safari (in firefox it just spins and spins)
FWS �p �� C ���? ��f embed_locationmoogaloopmoogaloop_typehttp://
assets.vimeo.com/rev/2/flash/
moogaloop_np.swf_root� <� <� � A@
PLEASE HELP!
On Mar 1, 5:43 pm, JFK <jfk.d...@gmail.com> wrote:
Janis
There is demo for vimeo - http://fancybox.net/vimeo
Janis
Cady
Why so rude...? I made clear that I'm a complete beginner, and I
graciously asked for group knowledge. If I had know that there was a
vimeo link on fancybox.net, I would have checked. THANKS.
seriously what's up with this community being super rude to
beginners...?
On Mar 3, 12:28 am, Janis <janis.skarne...@gmail.com> wrote:
> You have no idea what are you doing, don`t you?
> There is demo for vimeo -http://fancybox.net/vimeo
> ...
>
> read more »
Janis
support forum and 99% of these questions would not be related to
fancybox itself but rather JavaScript/jQuery/HTML, then how would you
feel after receiving another question where user uses copy/paste code
without understanding what it does?
Janis
> ...
>
> read more »
Tony Alfrey
on this list, and we discover this fantastic tool, we are hoping to
learn and do not yet understand what is necessary. We may not yet even
understand the *difference* between js/jQuery/html/css. So you could
leave out:
"You have no idea what are you doing, don`t you?"
and just say
"There is demo for vimeo -http://fancybox.net/vimeo"
And you may also say
"you may need to study some js basics before having complete success
with this."
Just my 2 cents.
;-)
Janis wrote:
> If you would receive tons of private messages for help and also on
> support forum and 99% of these questions would not be related to
> fancybox itself but rather JavaScript/jQuery/HTML, then how would you
> feel after receiving another question where user uses copy/paste code
> without understanding what it does?
>
> Janis
>
> On Mar 8, 8:12 am, Cady <m...@ecady.com> wrote:
>> Janis--
>>
>> Why so rude...? I made clear that I'm a complete beginner, and I
>> graciously asked for group knowledge. If I had know that there was a
>> vimeo link on fancybox.net, I would have checked. THANKS.
>>
>> seriously what's up with this community being super rude to
>> beginners...?
>>
>> On Mar 3, 12:28 am, Janis <janis.skarne...@gmail.com> wrote:
>>
>>> You have no idea what are you doing, don`t you?
>>> There is demo for vimeo -http://fancybox.net/vimeo
>>> Janis
JFK
I do understand what you say and the only reason I have posted more
than 600 solutions in this forum (nobody asking me to do so) is
because just like you I was a beginner at some point and now I want to
help you and other beginners as well, however Janis has a point:
this is a fancybox forum where the questions should be related to the
plugin, functionality and specifications
but we are nice though and we ended up (when we have time .... because
believe it or not we work on projects too) teaching you basic html,
css, javascript and jquery
sometimes we debug your code (where the rate is US$50/hour) for free
so don't be picky, we are not rude, we are straight forward because if
you want us to be nicer than we are, you should pay us then
the plugin is well documented but you people don't read not even the
FAQ
as Janis say, there are other proper forums where you can learn html,
css and javascript .... but not here (we help you here though)
so contribute to the forum without complaining that somebody hurt your
feelings ... we are too busy for that
Cady
Typical tech forums egos.
Addison
Cady- I too am a beginner. I also cobble together code, hoping to
understand as I go along.
As I looked at the code I noticed the name of the author. The rude
Janis that has been responding to your questions is none other than
the creator of FancyBox!
Janis - I guess your creation has enjoyed so much success that you are
no longer enthusiastic about its usage. That's too bad. Thanks for the
great script anyway.
Cady - Wish I could help but I'm just a neophyte too... I'm also
trying to implement a youtube lightbox. All I get when I click on the
image is it opens up the youtube video. If you have any success please
share with me!
Cady
don't understand it, fancybox is hot. (but seriously, be patient with
us awful, yet polite, beginners)
www.ecady.com will shortly have fancybox implemented
www.ladiesbrewingclub.com seems to work well!
feel free to view source and see how I cobbled it together
JFK
all your videos instead of 7 scripts ...how?
you don't have to but if you want
1. change every <a rel="vimeo" id="video1" ....etc
by <a rel="vimeo" class="vimeo" ... etc
(notice all links with the same class)
2. use this single script:
<script type="text/javascript">
$(document).ready(function() {
$("a.vimeo").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'title' : this.title,
'width' : 640,
'height' : 360,
'href':this.href.replace(new RegExp("([0-9])","i"),'moogaloop.swf?
clip_id=$1'),
'type' : 'swf'
});
return false;
});
}); // ready
</script>
how is the beer btw?
On Apr 7, 2:07 pm, Cady <m...@ecady.com> wrote:
> HA! well A HUGE BOW AND THANK YOU TO JANIS, because even though I
> don't understand it, fancybox is hot. (but seriously, be patient with
> us awful, yet polite, beginners)
>
> www.ecady.comwill shortly have fancybox implementedwww.ladiesbrewingclub.comseems to work well!
Cady
Beer is cold n delicious, and a lot easier to jump in to than web
design :)
> >www.ecady.comwillshortly have fancybox implementedwww.ladiesbrewingclub.comseemsto work well!