10 Replies Latest reply on Aug 28, 2012 3:24 PM by phrough

    Upgrading the Lightbox

    NCam

      Has anyone upgraded their light box, an example of added functionality would be the ability to click arrows [previous / next] to review images in a blog. This FancyBox is pretty close to what we would like to do.

      thanks

      nick

        • Re: Upgrading the Lightbox
          NCam

          hey Ryan Rutan have you had any luck implementing a more custom lightbox?

          thanks

          • Re: Upgrading the Lightbox
            phrough

            It seems that Jive 5 has fancybox 1.3 included, though I couldn't figure out how to implement it. I've managed to get fancybox 2.1.0 (despite it saying it requires a jQuery version higher than available in Jive).

             

            Include this in your theme's template.ftl:

                <#-- fancybox 2.1.0 - theoretically not compatible with jive's jquery version -->

                <link rel="stylesheet" href="/themes/[theme name]/js/fancybox/source/jquery.fancybox.css?v=2.1.0" type="text/css" media="screen" />

                <script type="text/javascript" src="/themes/[theme name]/js/fancybox/source/jquery.fancybox.pack.js?v=2.1.0"></script>

                <link rel="stylesheet" href="/themes/[theme name]/js/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.6" type="text/css" media="screen" />

                <script type="text/javascript" src="/themes/[theme name]/js/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.6>"></script>

             

            In a javascript file included by your theme, overwrite the function Buck mentions above:

            jQuery(document).ready(function($){

              // this segement take from the bottom of jquery.lightbox_media.js and modified...

              // modification allows us to implement fancybox on images embedded in discussions

              // as mentioned here: https://community.jivesoftware.com/thread/191883

              (function(){

                   //setup fancybox for images

                   var thumbImgs = $('img.jive-image');

                   thumbLinks = thumbImgs.parent('a');

                   thumbLinks.addClass('fancybox').attr('rel', 'fancygroup');

             

                   var imageSuffix = /\.(?:jpg|jpeg|jpe|png|gif)$/i;

                   var isDownload = /\/JiveServlet\/downloadBody\//;

             

                  function bindLightboxImages($context) {

                       $(".fancybox").fancybox({

                            padding: 0,

                            prevEffect : 'none',   

              nextEffect : 'none',

              helpers : {

              title : {

              type: 'outside'

              },

              thumbs : {

              width : 50,

              height : 50

              }

                    }

              });

             

                    // ORIGINAL JIVE IMPLEMENTATION

                     // $j("a[href]", $context || document).filter(function(){

                     //     return imageSuffix.test(this.href) && !isDownload.test(this.href);

                     // }).lightbox_media();

                 }

             

             

                 function bindLightboxVideos($context) {

                     $("a.j-js-youtube, a[rel=fb]", $context || document).each(function(){$(this).lightbox_media({type:'video'}); });

                 }

             

                 // called from soy templates to lightbox images and video

                 jive.bindLightboxMedia = function(options, opt_sb){

                     var output = opt_sb || new soy.StringBuilder();

             

                     var $context = null;

                     if(options && options.context){

                         $context = options.context;

                     }

             

                     // need to call this async to avoid race conditions

                     window.setTimeout(function(){

                         bindLightboxImages($context);

                         bindLightboxVideos($context);

                     }, 1);

                  

                     if (!opt_sb) return output.toString();

                 };

              })();

            });

             

             

            I also found it necessary to hide the fancybox loading div via CSS, as it seemed to be visible on every page load:

            #fancybox-loading {

              display: none;

            }