Binding functions to fancybox on next/prev events?

[Sam Allen]

I am trying to merge a few tutorials I've found on the Fancybox blog,
the API pages, and around the web, but I've hit a wall and could use a
hand.

I am trying to essentially create a video gallery using Flowplayer. I
have been able to dynamically initialize Flowplayer and dynamically
pass the desired video to flowplayer using the following strategies:

How to include a flowplayer video inside a fancybox modal window:
https://gist.github.com/571643

Fancybox Tips & Tricks #4: Show youtube clips:
http://fancybox.net/blog#tip4

Plus a few passes at similar attempts in this Google Group.

In each instance, I was able to get the first video to load, but
getting the next video in the gallery proved to be tricky. If I use
the 'github' example, the modal dialog grabs a hidden div on the page
and loads it inline, and I place the flowplayer config/init details
inside the onStart parameter and all is well.

Ideally, I should have access to next/prev events where I can pass the
next item from the gallery array. Again, using the github example,
Fancybox is able to tell where I am in the gallery, but I am never
able to pass the next video url due to the way the github method
loads.

Are there hooks into the next/prev events where I can drop some JS
magic? Do I have to generate the gallery manually and extract their
indices and pass those to flowplayer? The trick here is that there is
a JS-based click-tracking script that I need to be able to use. So a
lot of the hackery required to get flowplayer to initialize abstracts
the click event from the resource being loaded. So without next/prev
hooks (at least none that I can find in the API, blog examples, the
Tips & Tricks sections, and a bit of thoughtful Googling), I'm having
trouble figuring out where in Fancybox I can use some jQuery to
trigger / pass a 'click' event to the tracking script even if the item
being clicked is not what we're tracking (because it's being used to
load what I want into the overlay).

Any assistance would be greatly appreciated.

[JFK]

I wouldn't use such github method
I would use the regular method as suggested in fancybox tip #4 so no
issue having a gallery of videos
http://groups.google.com/group/fancybox/browse_thread/thread/86d6804536837ec1/

[Sam Allen]

Thanks for the reply. I've given that method a try and I can get the
video to load, but can't get anything beyond the player defaults to
parse in the 'swf': parameter, or where I put the config="{'clip':
[etc...]}". Here's the code (I've stripped out the gallery
functionality for the time being until I can get this working):

The anchor tag looks like so:
<A class="overlay" href="http://mydomain.com/landing/Pages/flowplayer/
flowplayer.commercial-3.2.7.swf?config={'clip':'http://
www.mydomain.com/videos/Client%20Testimonial_First%20Comp.mp4'}"
name="Client_20Testimonial_First_20Comp.mp4" title="Client
Testamonial">[Microsoft rendered garbage which I've excluded for
brevity]</a>

$("a.overlay").click(function(){
/* This variable grabs the name attribute from the anchor being
clicked on */
var thisVid = $(this).attr('name');
var videopath = "http://www.mydomain.com/elqNow/elqRedir.htm?
ref=http://www.mydomain.com/videos/";
var elqVidRed = videopath+thisVid;
$(this).fancybox({ // OPTIONS :: DIMENSIONS, PADDING, ETC CAN BE SET
HERE
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : true,
'showNavArrows' : false,
'padding' : 30,
'scrolling' : 'no',
'height' : 340,
'width' : 480,
'title' : this.title,
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'key' : '#################',
'allowfullscreen' : true,
'plugins' : {'controls':
{'url':'flowplayer.controls-3.2.5.swf','autoHide':'never','progressColor':'#112233','buttonColor':'#D4D6D6','buttonOverColor':'#002B5C','backgroundGradient':'none','hideDelay':'1000','timeBgColor':'#D4D6D6','borderRadius':'0px','volumeSliderGradient':'none','tooltipColor':'#666666','sliderColor':'#002B5C','durationColor':'#ffffff','bufferColor':'#D4D6D6','volumeSliderColor':'#D4D6D6','timeColor':
'#ffffff','sliderGradient':'none','bufferGradient':'none','progressColor':'#D4D6D6','height':
24,'opacity':1.0}}
},
'onStart' : function(){

/* THIS NEXT STATEMENT WILL CHECK TO SEE IF THE OVERLAY HAS THE
NECESSARY
LINKS ALREADY INSIDE THE HIDDEN DIV, AND IF NOT INJECT THEM AFTER
THE
FLOWPLAYER DIV HAS FINISHED INITIALIZATION */

if($("#fancybox-outer .video-links").length == 0) {
$("#fancybox-content").after(
'<div class="video-links"><a class="video-library" href="#">VIEW
ALL VIDEOS</a><a href="" class="video-share">SHARE</a><a href=""
class="eloqua-redirect"></a></div>'
);
}
},
'onComplete' : function() {
$('.video-links .eloqua-redirect').attr("href",
elqVidRed).click();
/*alert(elqVidRed);*/
},
'onCleanup' : function() {
/* THESE STATEMENTS WILL RETURN THE OVERLAY DIV FLOWPLAYER
OCCUPIES TO
IT'S ORIGINAL STATE, AND UNLOAD OVERLAY'S FLOWPLAYER INSTANCE
BEFORE
EXITING THE SCRIPT */
/*$("#overlayPlayer").hide();*/
$('#fancybox-outer').remove('.video-links');
$f().unload();
}
});
return false;
});

I am unable to get any of the other parameters like the 'key' or the
'plugin':{'controls':{[...]}} code to parse properly. Am I doing
anything obviously incorrect?

On May 3, 9:09 pm, JFK <jfk.d...@gmail.com> wrote:
> I wouldn't use such github method
> I would use the regular method as suggested in fancybox tip #4 so no

> issue having a gallery of videoshttp://groups.google.com/group/fancybox/browse_thread/thread/86d68045...