Cannot get fancybox to work properly


#1

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="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.css" 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>

</div>

<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.js"></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 http://fancyapps.com/fancybox/#useful
            beforeShow: function() {
                var alt = this.element.find('img').attr('alt');
                this.inner.find('img').attr('alt', alt);
                this.title = alt;
            }
        });
        $(".fancybox").fancybox();
       
    }
		
		
	});
	

</script>

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 Object.open (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


#2

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


#3

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


#4

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: