Image Slideshow (Post 2 of 2)

SharePoint Versions: All
SharePoint Tools: SharePoint Designer / Data View Web Part

In the prior post, we walked through the steps to construct the slideshow using basic HTML and JavaScript. We also included a Query String which will prove helpful in this post solution.

In this post, we use a few more tricks to present the Slideshow and an Event List on the same page. With each click, we can traverse thru the Event List and view the related slideshow of pictures.

EventWebPartPic

Page Setup

  • The Data View Web Part from the prior post should already reside on a web part page
  • We will utilize the same page for this Data View

List Setup

  • create column Event Name (aka; Title)
    * single line of text
  • create column Event Description
    * single line of text
  • create column Event Date
    * date only

 Create/Configure .ASPX Page Within SharePoint Designer

  • create a new .aspx page
  • insert the SharePoint Control of Web Part Zone
  • insert the SharePoint Control of Data View
  • locate the list created above in the Data Source window
  • select Event Date and Event Name and add to the Data View
  • select to show multiple entries

 Configure Data View

Configure the date to show the Date Only

<xsl:value-of select="ddwrt:FormatDate(string(@EventDate), 1033, 1)"/>

Configure the Event Name (aka; Title) column

<a href="http://page_name_from_post1?vEventTitle={@Title}">
     <xsl:value-of select="@Title"/>
</a>

Export Data View as Web Part File

  • select File > Export > Save Web Part To > File

Configure Original Page from Post #1

  • edit the page
  • add this new web part file to the right of the Slideshow Web Part
  • save the page

Summary

  • we now have two (2) web parts on the same page
    • the Slideshow web part
    • the List of Events web part
  • the user clicks on an Event to display the related images
    • the link includes the Event Name parameter
    • the link directs the user to the same page
    • the Slideshow shows those images related to the Event
  • the user may traverse thru the slides with the click of a button

As always … Enjoy every sandwich!

Advertisements
This entry was posted in Data View Web Part, Lists, SharePoint Designer, Web Parts, XSL. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s