Monday, April 16, 2012

SharePoint (Slide Library): Let's make this picture big!

Well, a couple of months back, I had a little run-in with Slide Libraries. A customer asked me if it's possible to resize the thumbnails or make them pop out a bit. Yes, it's possible with a little Javascript.

Here's the script and sorry for the formatting:
<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(getImages, "sp.js");
function getImages()
{
   $("body").append("<div style='display:none; position:absolute;' id='boxdiv'><img src=''
      id='boximg' onMouseOut='hideImageBox()' /></div>");
    var thumbimg = document.getElementsByTagName('img');
    var i = 0;
    for(i=0; i < thumbimg.length; i++)
   {
      if(thumbimg[i].alt == 'Thumbnail')
      {
   thumbimg[i].setAttribute('onMouseOver', 'showImageBox(this.src)');
  }
 }
}
function showImageBox(imgurl)
{
   var IE = document.all?true:false
   var tempX = 0;
   var tempY = 0;

   if (IE)
   { // grab the x-y pos.s if browser is IE
      tempX = event.clientX + document.getElementById("s4-workspace").scrollLeft;
      tempY = event.clientY + document.getElementById("s4-workspace").scrollTop;
   }
   else
   {  // grab the x-y pos.s if browser is NS
      tempX = e.pageX;
      tempY = e.pageY;
   } 
  
   var boxd = document.getElementById('boxdiv');
   var boxi = document.getElementById('boximg');
   boxi.src = imgurl;
   boxd.style.display = "block";
   boxd.style.top = tempY;
   boxd.style.left = tempX;
  }
function hideImageBox()
{
   var boxd = document.getElementById('boxdiv');
   boxd.style.display = "none";
}
</script>
(Don't forget to add the locations of your JQuery-Sources.)
What does it do? It grabs for the tag "Thumbnail", because that's the "alt"-text of those images. Than we set a new attribute, in this case it's a "MouseOver"-effect. And this will create us the PopUp.

But how do you place this script in your library?
First edit the Page.
That add a new "Content Editor"-Webpart.
That's it. Now you should see little images of your thumbnails flying at you.

5 comments:

  1. Exactly what I was looking for. Thanks! I added boxi.style.width = "300" to stretch the image a little bit.

    Another suitable approach for mostly read-only-libraries (such as user manuals, etc.):
    1) Export Slides from PPT as *.jpg
    2) Resize slides to a size that fits your needs with any tool
    3) Upload / overwrite thumbnail files in your slide library in the "_t" folder. (You can open the library via "Open with Windows Explorer". Make sure you have "Show system files and folders" enabled in the folder setting in windows explorer. Alternativly you could access this directory via SharePoint Designer.
    4) Thumbnails will appear in generated size.

    Note: This will only last, until a user with appropriate rights edits a slide and saves it back to SharePoint.

    Kind regards,
    Jay

    ReplyDelete
  2. Addition:

    You have to select the second "Thumbnail" in the list view (there are two!). Internally the second one is called "LargeThumbnail". This will display the slides-thumbs 1:1 as they have been saved in the "_t" directory.

    Note 2: Make sure to keep the filesnames, when overwriting files in the "_t" directory.

    -Jay

    ReplyDelete
  3. Does anyone have a screen shot of the result? The main interest is to know if the image are readable so you can determine if the slide is desirable to add to a presentation or not.

    ReplyDelete
    Replies
    1. I don't have any pictures of that project anymore, but I think you would be able to recognize the content of that slide. You can also use a different thumbnail if change some parts of the code. I can't remember if I was able to read everything, sorry!

      Delete
  4. I have added the script to a content editor I copied into the a Library view using Designer on SharePoint 2013. Not getting anything, is this compatible with 2013?

    ReplyDelete