I heard from a friend that there is a slider or gallery, with the possibility of commenting on images, provided that the commentator has a registration on Facebook. Gallery, as I understand it based on fancybox. Never seen anything like this, it would be interesting to see a similar implementation. Who knows, skip the link please look at this.

    1 answer 1

    In the gallery lightgallery.js is possible to connect comments just linked to your facebook account. It is implemented using a script from Facebook. The most simple execution code is below + GitHub and the page itself.

     <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link href="https://cdn.jsdelivr.net/npm/lightgallery.js@1.0.1/dist/css/lg-fb-comment-box.min.css" rel="stylesheet" /> <link href="https://cdn.jsdelivr.net/npm/lightgallery.js@1.0.1/dist/css/lightgallery.min.css" rel="stylesheet" /> </head> <body> <!--Facebook script--> <div id="fb-root"></div> <script> (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> <!-- Gallery --> <div id="lightgallery"> <a href="https://s8.hostingkartinok.com/uploads/images/2017/09/23a6461b9b8a8cb0a25e046c26053cf6.jpg" data-sub-html='<div class="fb-comments" data-href="https://saszami.imtqy.com/stackOverflow/#lg=1&slide=0" data-width="400" data-numposts="5"></div>'> <img src="https://s8.hostingkartinok.com/uploads/thumbs/2017/09/23a6461b9b8a8cb0a25e046c26053cf6.png" /> </a> <a href="https://s8.hostingkartinok.com/uploads/images/2017/09/6345b81bd20f2f9993fbe64a5a461dd5.jpg" data-sub-html='<div class="fb-comments" data-href="https://saszami.imtqy.com/stackOverflow/#lg=1&slide=1" data-width="400" data-numposts="5"></div>'> <img src="https://s8.hostingkartinok.com/uploads/thumbs/2017/09/6345b81bd20f2f9993fbe64a5a461dd5.png" /> </a> </div> <!--jQuery--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!--lightgallery js--> <script src="https://cdn.jsdelivr.net/npm/lightgallery.js@1.0.1/dist/js/lightgallery.min.js"></script> <!--lightgallery hash plugin--> <script src="js/lg-hash.min.js"></script> <script> // lightgallery commentbox var commentBox = document.getElementById('lightgallery'); lightGallery(commentBox, { appendSubHtmlTo: '.lg-item', addClass: 'fb-comments', download: false, enableDrag: false, enableSwipe: false }); commentBox.addEventListener('onAfterSlide', function(event) { var items = document.querySelectorAll('.lg-outer .lg-item'); if (!items[event.detail.index].getAttribute('data-fb')) { try { items[event.detail.index].setAttribute('data-fb', 'loaded'); FB.XFBML.parse(); } catch (err) { window.addEventListener('fbAsyncInit', function() { items[event.detail.index].setAttribute('data-fb', 'loaded'); FB.XFBML.parse(); }); } } }); </script> </body> </html>
    • @Cheg, the error came out :) I apologize. There and the slider is: 0 - user242433
    • one
      The answer in the form of the link is unacceptable. If the page is deleted by reference, this answer will be useless to other visitors. Try to give an example of the work of the plugin that you offer - Cheg
    • @Cheg how is it correct for a given resource to give an example of the work of a plugin, if the implementation and the example thereof within the framework of the named gallery are given in the documentation, and is this example quite extensive? - micemice
    • This can easily be done by using the "snippet code" button and adding all the necessary files + code to it - Cheg