Calling Fancybox from within dhtmlxGrid

Suite and Optimus Suite 5
#1

I need to popup Vimeo videos in a Fancybox (similar to Lightbox) when user clicks on a link in a dhtmlxGrid. When the fancybox call happens outside the grid, it works fine, but when the call is a link inside a cell in the grid, the call fails without an error and redirects the browser.

Full example is attached.
videos.zip (220 KB)

#2

Issue occurs because of script which initialize Vimeo popup executes too early when grid links is not rendered yet. To fix it change your code like the following:

[code]

function doOnLoad(){ mygrid = new dhtmlXGridObject("gridbox"); .... mygrid.load("data.xml",doOnDataLoaded); } function doOnDataLoaded(){ $("#testdiv").click(function() { $.fancybox('http://google.ca', { 'padding' : 0, 'type' : 'iframe' }); }); // Using manual call - dynamic url change $("a#vimeo_test").click(function() { $.fancybox({ 'padding' : 0, 'autoScale' : false, 'transitionIn' : 'elastic', 'transitionOut' : 'elastic', 'title' : this.title, 'width' : 500, 'height' : 365, 'href' : this.href.replace(new RegExp("([0-9])","i"),'moogaloop.swf?clip_id=$1'), 'type' : 'swf' }); return false; }); // Testing grouping and full-screen function formatTitle(title, currentArray, currentIndex, currentOpts) { return '
prev next' + title + '
'; } var fb_opts = { 'padding' : 0, 'cyclic' : true, 'autoScale' : false, 'transitionIn' : 'elastic', 'transitionOut' : 'elastic', 'width' : 640, 'height' : 360, 'type' : 'swf', 'showNavArrows' : false, 'titlePosition' : 'inside', 'titleFormat' : formatTitle, 'swf' : { 'wmode' : 'transparent', 'allowfullscreen' : 'true' } }; $("#vimeo_test3").fancybox( $.extend(fb_opts, {'href' : 'http://vimeo.com/moogaloop.swf?clip_id=3979490&fullscreen=1'}) ); $("#vimeo_test4").fancybox( $.extend(fb_opts, {'href' : 'http://vimeo.com/moogaloop.swf?clip_id=3979989&fullscreen=1'}) ); $("#vimeo_test5").fancybox( $.extend(fb_opts, {'href' : 'http://vimeo.com/moogaloop.swf?clip_id=6058176&fullscreen=1'}) ); jQuery(document).ready(function() { /* //just test for auto-open $.fancybox('

Hi!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque

', { 'autoDimensions' : false, 'width' : 350, 'height' : 'auto', 'transitionIn' : 'none', 'transitionOut' : 'none' }); */ //$("#vimeo_test3").trigger('click'); }); }[/code]
#3

That’s perfect, Olga…thank you very much.

#4

Actually, it works great in at least Chrome and IE8, but not in IE7 (only other version with which I can test).

Is there something I can do to make it compatible with other versions of IE?

Thanks again!

#5

Actually it works in IE7 for me. When I click on Watch link in grid, vimeo pop up opens.
But when I click on “This” link, it redirects to vimeo page.