Cannot get fancybox to work properly


Hi, I don’t get fancybox and surreal cms to work together. Perhaps someone know what i am doing wrong.
Here is my code:

<!-- Optionally add helpers - button, thumbnail and/or media 
<link rel="stylesheet" href="./fancybox/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
<script type="text/javascript" src="./fancybox/source/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="./fancybox/source/helpers/jquery.fancybox-media.js"></script>-->

<link rel="stylesheet" href="" type="text/css" media="screen" />

<h2>fancyBox v3.2 - Basics</h2>

<h4>Group #2; default options</h4>

<div id="my-gallery" class="editable-gallery">
<a href="0258252870001.jpg"><img src="0258252870001.jpg" alt="dfhdfg"></a>


<!-- Add jQuery library -->
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>

<script type="text/javascript">
	$(document).ready(function() {
		 // Don't execute if we're in the Live Editor
    if( !window.isCMS ) {
        // Group images by gallery using `data-fancybox-group` attributes
        var galleryId = 1;
        $('.editable-gallery').each( function() {
            $(this).find('a').attr('data-fancybox-group', 'gallery-' + galleryId++);
        // Initialize Fancybox
         $('.editable-gallery a').fancybox({
            // Use the `alt` attribute for captions per
            beforeShow: function() {
                var alt = this.element.find('img').attr('alt');
                this.inner.find('img').attr('alt', alt);
                this.title = alt;


And this is the error i get:
foto.php:48 Uncaught TypeError: Cannot read property ‘find’ of undefined
at Object.beforeShow (foto.php:48)
at FancyBox.trigger (jquery.fancybox.js:2607)
at FancyBox.jumpTo (jquery.fancybox.js:1066)
at FancyBox.init (jquery.fancybox.js:603)
at new FancyBox (jquery.fancybox.js:508)
at (jquery.fancybox.js:2758)
at HTMLAnchorElement._run (jquery.fancybox.js:3027)
at HTMLAnchorElement.dispatch (jquery-latest.min.js:3)
at HTMLAnchorElement.r.handle (jquery-latest.min.js:3)Preformatted text


Changed the shim code a little bit, now it seems to work:


Is your Tutorial perhaps for fancybox v2. I am using fancybox v3?


The tutorial was written when FancyBox 2 came out. It looks like they released 3.0 at some point with a bunch of changes.

Sorry about that! I didn’t notice the new version. Glad you got it working though :slight_smile:


Not sure if I can revive this thread… but I’ve also been having trouble getting Fancybox and Surreal to work together. I copied the Fancybox shim code directly from I should add that my JS understanding is limited, which could be part of my problem… My test site is at

Any ideas? Thanks.