Let's step through it
> THE SCRIPT:
>
> this.vidPopUp = function(){
I take it that we're in an object at this point?
>
> $(".vidList li").click(function(){
Give me all of li descendents of DOM nodes with a class of "vidList"
and add a click event on them
> var vidLink = $(this).find(".vidMedia")
give me the first DOM node that is a descendent of the li clicked on
that has a class of "vidMedia"
> $("body").append("<div class='vidPopUp'></div>");
Append a div with a class of vidPopUp to the body. Incidentally, it
will be cleaner if you swap your quotes around:
$('body').append('<div class="vidPopUp"></div>');
> $(".vidPopUp").append("<div class='vidClose'>")
Give me every DOM node with a class of "vidPopUp". The first time
this is clicked on it will be the div you just appended above, the
second time you click on something it will also append the above div,
and this will return both DOM nodes unless it has been removed by
then. You're also only appending a part of a node... need a close
tag.
>
> $(".vidClose").append("/callift/templates/calumet_custom/images/closeBtn.gif
> " + "[CLOSE]")
You're appending the text of the path to the image on the page, not
the actual image here. If that is what you meant to do, then you
don't need the " + " it could just be one long string. And again, you
are pulling up multiple DOM nodes with this. The last three lines are
better done as one long append.
$('body').append('<div class="vidPopUp"><div class="vidClose">/callift/
templates/calumet_custom/images/closeBtn.gif [CLOSE]</div></div>');
> $(".vidPopUp").center();
Again, multiple DOM nodes, and you could have cached this and reused
it, $() is an expensive function.
var $vidPopUp = $('.vidPopUp');
> $('.vidPopUp').expose({
> //fade background
Is this a plugin you wrote, or got from somewhere? I'm not familiar
with it, however, you are selecting every DOM node on the page with a
class of "vidPopUp", this will be multiple nodes after the first
click.
> api: true,
> color:'#000',
> opacity:'.8',
> closeOnClick:false,
> onLoad: function(event){
> $(".vidPopUp").fadeIn(400);
again, will select multiple nodes. and fade them all in
> $(".vidPopUp").append(vidLink);
selects multiple nodes again, and appends vidLink to all of them
> }
> }).load();
> $(".vidClose").click(function(){
every time an li with a class of vidList is click, you will create a
click event on every node with a class of vidClose. Should be
using .live('click', ... instead. Look up the documentation on it,
its very cool.
> $(".vidPopUp").fadeOut(400, function(){
> $(".vidClose").remove();
> });
> $(".vidPopUp").expose({}).close(); //unfade
> bckrnd
> });
> });
> };
It's not a direct answer to your question, and I don't know without
more investigation what the answer is, but I hope this helped.
Josh Powell
