Featured Post

JQuery and SPServices

JQuery and SPServices      ‘Sup All…I’m going to be covering the use of JQuery and SPServices in this article.   JQuery is a librar...

Thursday, June 16, 2011

Create a Diagram/Picture Viewer Page in SharePoint

Setup Data Source

1.       Select the Picture library you’d like to reference
2.       Insert the selected library as a Data Source Control

3.       Setup two (2) Data Views
a.       Setup the first Data View using the ‘Title’ field (or whichever field you’d like to use)

b.      Setup the second Data View using the ‘Preview’ field
4.       You’ll have to do very minor coding here (if you can even call it that). Find the following line:
<td class="ms-vb">
                <xsl:value-of select="@Preview"/>

5.       Add the following image tag (in red):
<td class="ms-vb">
                <xsl:value-of select="@Preview"/><img alt="thumbnail" src="{@FileRef}" />

6.       At this point you may feel free to delete the <xsl:value-of select="@Preview"/>

7.       This is how your page should look (with a little added formatting to left justify the headings):

When you click the name hyperlink, the diagram will change:

No comments: