Question

I’m trying to use create external controls for Fancybox, or somehow manipulate the controls that exist to look and position how I want them.

Here is the page I’m working on.
http://bit.ly/a5AGZB

At the moment, it’s set up to load these portfolio slides via iframe (HTML pages) via Fancybox. I’ve set the background to be white, and I’ve also put my menu in front of the overlay via z-index in my CSS.

I’ve set up my own (static) controls on the page, but I have no idea how I’d go about modifying the plugin in order to make these my controls. I want the controls to always be shown, and be positioned as I’ve set them up. All I’ve tried so far is giving them the ID names of the default Fancybox controls but that just hid them.

Suggestions? Any help is appreciated.

Answer 1

Your first problem is that the #fancybox-left div is on top of your controls, so you can’t even click on your controls. You can use CSS to hide them

#fancybox-left, #fancybox-right { display: none; }

To trigger Fancybox actions, go here: http://fancybox.net/api

Look under “Public Methods” and do something like this

$('#my-previous-button').click(function(){
  $.fancybox.prev();
});