Fotorama not working. Showing Type Error in console

I followed this link (Magento 2 + need to use fotorama in cms page) to use fotorama but instead it prints all the images in a line. Using fotorama on my custom product page. When i check the console the following error is printed
[![Error Message][1]][1]

***Uncaught TypeError: fotorama is not a function
at 1solus-11-watt-bc-candle-cfl-1pk.html:169:9
at Object.execCb (require.js:1650:33)
at Module.check (require.js:866:51)
at Module. (require.js:1113:34)
at require.js:132:23
at require.js:1156:21
at each (require.js:57:31)
at Module.emit (require.js:1155:17)
at Module.check (require.js:917:30)
at Module.enable (require.js:1143:22) ***

        $objectManager = MagentoFrameworkAppObjectManager::getInstance();
        $product = $objectManager->create('MagentoCatalogModelProduct')->load($product->getId());
        $images = $product->getMediaGalleryImages();
        foreach($images as $child){
            ?>
            <div class="gallery-placeholder">
            <center>
                <div class="fotorama"  data-transition="slide" data-nav="thumbs" data-arrows="true" data-click="true" data-swipe="false" >
                    <a href="<?php $child->getUrl();  ?>"><img src="<?php echo $child->getUrl(); ?>" ></a>
                </div>
            </center>
            </div>

        <?php } ?>```


  [1]: https://i.stack.imgur.com/zZilZ.png