Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

Inside a SharePoint Document List, I keep a few folders - Folder A, Folder B, Folder C.

Each folder have some pictures inside them.

May I know if there are any web part that can help me display at least 3 picture (probably based on the latest date) in a tool tip dialog box when I hover my mouse over the particular closed folder? If I find that the folder contain the pictures that I was looking for, I can open the folder else, I will hover my mouse to the next closed folder.

If there are no such web part for SharePoint Document List, are there any alternatives (probably using JQuery, HTML5, etc...) to do it?

Thanks.

Wilson

share|improve this question
add comment

1 Answer

I am using the SharePoint client API (javascript) and jquery to enhance the out of the box SharePoint list view functionality.

I've used qTip for enhanced mouse overs (it supports images too). I was able to meet my requirements with it.

The code snippet below should get you started. Check out these references for fetching files from within folders:

  • If you're using the javascript and the client API click here
  • If you're using Sharepoint 2007 click here

 function bindQTip()

        {

        $('.ms-vb-icon img[title*="Folder"]').each(function () {

                //bind the qtip event

                            $(this).qtip({
                        position: { corner: { tooltip: 'topLeft', target: 'topLeft'} },
                        content: {
                            text: 'Loading...',
                            title: {
                                text: 'Recent Images'
                            }
                        },
                        show: {
                            solo: false,
                            event: "mouseover",
                            delay: 250
                        },
                        hide: {
                            fixed: true,
                            event: "click",
                            delay: 250
                        },
                        style: {
                            width: 100,
                            padding: 3,
                            background: '#f0f0f0',
                            color: '#000000',                       
                            tip: 'topLeft'
                        },
                        api: {
                            beforeShow: function () {
                                setContent(this);
                            }
                        }
                    });

              });
        }


    function setContent(currentNode)
    {
        //Call SharePoint API to fetch folders / images and build new qTip content as HTML

        //Use qTip .updateContent() API method to set the item content as HTML 
        var itemContent = "<div id='imag'><img src='/_layouts/images/siteIcon.png' /></div>";
        currentNode.updateContent(itemContent);
    }
share|improve this answer
1  
thanks, qTip seems great! So, as I understand, you're placing your custom javascript code somewhere on the page, and then attaching qTip to folder elements, using code like $('...').qtip({content: '...'}). But what jquery selector do you use for fetching folders elements? And how do you determine ID of the folder under cursor? Can you provide us a bit more detailed information, and even better - a piece of sample code? :) –  Andrey Markeev Oct 25 '11 at 15:59
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.