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

    Upgrading the Lightbox


      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.



        • Re: Upgrading the Lightbox

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


          • Re: Upgrading the Lightbox

            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:


              // 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


                   //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) {


                            padding: 0,

                            prevEffect : 'none',   

              nextEffect : 'none',

              helpers : {

              title : {

              type: 'outside'


              thumbs : {

              width : 50,

              height : 50






                     // $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




                     }, 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;