8 Replies Latest reply on Jul 21, 2011 8:29 AM by mjoyce

    Photo Slideshow/Picture Gallery

    leightgordon

      Hi there,

      Has anyone enabled an HTML photo slideshow on their site?  If so, could you share the code or link to where you found it?  I'm using 4.5...

       

      Thanks!

      Leigh

        • Re: Photo Slideshow/Picture Gallery
          sholmk12

          I just tried to embed a Flickr slideshow and it didn't work. Disappointed that we don't have a great way to display photos within our community, this is such basic functionality that should be built into the core product.

          • Re: Photo Slideshow/Picture Gallery
            tmaurer

            You can do Flickr, Picasa or Cooliris at least. But there's more to it than just placing the embed code and walking away. In the Admin Console, you need to set globalRenderManager.HTMLFilter.allowedDomains to allow content from whatever site you are trying to embed content from.

            • Re: Photo Slideshow/Picture Gallery

              We are testing Jive 5 and have been underwhelmed by how Jive handles images. This may or may not work for you in Jive 4.5

               

              There are some simple changes that can be made to improve the appearance of image attachments to a document. It isn't quite an image gallery, but closer than the default.

               

              SNAG-7-21-2011-0001.png

               

              In the Admin | System | Settings | Attachments, increase the number of attachments and set the image preview dimensions to the size you want. I set it to 100 pixels. Add the CSS below to your theme or to the /template/global/custom-css.ftl.

               

              /* modify the appearance of the image thumbnails for document attachments */
              
              .jive-body-content .jive-attachments {
              width:auto;
              }
              
              div.jive-attachments li {
                clear:none;
                float:left;
                max-width:240px;
                overflow:hidden;
                margin-right:10px;
              }
              
              div.jive-attachments img {
                height:100px;
              }
              
              .jive-attachments .j-attachment-info {
              float:none;
              width:auto;
              }
              
              .jive-body-content .jive-attachments footer {
                background-image:none;
              }
              
              .jive-content footer {
               clear:both;
              }
              
              • Re: Photo Slideshow/Picture Gallery

                We have also been looking for a way to create a gallery of all projects, groups, or spaces. I've found that it can be done through the REST API. This sample code will create a gallery of projects. When you hover on an image, the project name pops up in a blue overlay. Clicking on an image takes you to the project.

                 

                SNAG-7-21-2011-0002.png

                 

                I'm sharing this code for Jive 5 in hopes that the community can help improve it and help me turn it into a widget.

                 

                On an overview page, add an HTML widget and paste the code below into it.

                 

                 

                <style type="text/css">
                ul.image-thumbs{
                margin:5px;
                list-style:none;
                }
                li.thumb {
                list-style:none;
                margin:0 10px 10px 0;
                float:left;
                height:120px;
                width:120px;
                overflow:hidden;
                position:relative;
                }
                li.thumb img {
                position:absolute;
                top:0;
                left:0;
                height:120px;
                min-width:120px;
                }
                li.thumb p.caption {
                     min-height:30px;
                     width:110px;
                     padding:5px;
                     color:#FFF;
                     background-color:#3C5A8E;
                     display:none;
                     position:absolute;
                     bottom:0;
                         opacity:0.8;
                         font-size:0.9em;
                         filter:alpha(opacity=80);
                }

                li.thumb:hover p.caption {
                     display:block;
                     }
                </style>
                <div id="thumb-container"><ul class="image-thumbs"></ul></div><div id="err-log"></div>
                <script type="text/javascript">
                $j('#err-log').ajaxError(function(request, settings){
                $j(this).append("Error requesting page " + settings.url + "");
                });
                var myXHR;
                $j.ajax({
                url: 'http://5-hdrinc.jivesbs.com/rpc/rest/projectService/projects',
                type: "GET",                                          
                dataType: "xml",                                       
                contentType: "text/xml;charset='utf-8'",            
                complete: function(data, status) {
                     myXHR = data.responseXML;
                     $j(myXHR).find('return').each(function(item) {
                         var prjID =$j(this).find('ID');
                         prjID = ($j.browser.msie) ?  prjID[0].text : prjID[0].textContent;
                         var prjName = $j(this).find('name');
                         prjName = ($j.browser.msie) ? prjName[0].text : prjName[0].textContent;

                         var imgPath = 'http://5-hdrinc.jivesbs.com/projects/image/' + prjID +'/2.png';
                         var prjPath = 'http://5-hdrinc.jivesbs.com/projects/'+prjID;
                         var strHTML = '<li class="thumb"><a href="' + prjPath + '"><img src="' + imgPath + '" /></a><p class="caption">'+prjName+'</li>';

                         $j('ul.image-thumbs').append(strHTML);
                     });
                     }
                });
                </script>