Using Different Versions of Fancybox on the Same Page
I ran into the issue where some users had an older version of Fancybox on their sites and needed to provide my own version to work with Crayon. So I put together a modification of the original script which allows you to initialise Fancybox when you need it and with different objects to what it’s usually provided.
By default, Fancybox will apply these once the script is loaded:
(window, document, jQuery)
And it will initialise jQuery.fancybox. If I want to have my own version running independently, I’d need to provide it with a jQuery instance and a custom attribute name, say “crayonFancybox” so I can use my version without accidentally using the old Fancybox on some users’ Wordpress installs.
window.fancyboxInit = function (window, document, $, fancybox, undefined) {
// Original Fancybox script content goes here
};
Now if you include jQuery and two different Fancybox scripts in the same page, they won’t clash:
<script type='text/javascript' src='http://code.jquery.com/jquery.min.js'></script>
<script type='text/javascript' src='http://yandex.st/jquery/fancybox/1.3.4/jquery.fancybox.min.js'></script>
<script src="https://raw.github.com/aramkocharyan/fancyBox/master/source/jquery.fancybox.init.pack.js" type="text/javascript"></script>
<script type="text/javascript">
var jQueryCrayon = jQuery;
fancyboxInit(window, document, jQueryCrayon, 'crayonFancybox');
(function($) {
$(document).ready(function() {
console.log("old", $.fancybox); // Old version
console.log("new", $.crayonFancybox); // My new version
});
})(jQueryCrayon);
</script>
<body>
See the JS console!
</body>
The only downside is that you must use $(elem).crayonFancybox instead of $(elem).fancybox in your scripts.
See a demo, and download the script.