Return to Revisions

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