Image Slideshow Using HTML & JavaScript (Post 1 of 2)

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

The most concise feature for presenting multiple slideshow images at the click of a button outside of purchasing a 3rd party slideshow web part.

NOTE: “The Basics” section below works on any .htm/.html page
* SharePoint Designer is required for the remaining sections ONLY

The Basics

Add the following function within the Head section of the page …

 <head>
     <script type="text/javascript">
         function swap(image) {
             document.getElementById("mainImage").src = image.href;
         }
     </script>
 </head>

Add multiple links, buttons, images, etc. that the user will click on to advance thru the images.

  • Substitute your own image in place of “The Image To Swap.jpg”
  • Substitute your own image in place of “Click Me Image Button.jpg”
<a href="The Image To Swap.jpg" onClick="swap(this); return false;">
          <img src="Click Me Image Button.jpg">
</a>
<br/>
<a href="The Image To Swap.jpg" onClick="swap(this); return false;">
   <img src="Click Me Image Button.jpg">
</a>

Add the final IMG statement.

  • as the user clicks on any of the above links, the image within the ‘href’ will display within the below IMG with an ID of ‘mainImage’

NOTE: The ID is case sensitive.

<img id="mainImage" src="Show Default Image.jpg" width="400">

Data View – XSL Basics (Optional)

If reading in a list to build out the page using SharePoint Designer, the following snippets may be helpful.

  • The vImageWidth field is an optional parameter that defines the width of the table
    * this allows the value to be configured on the page as needed

Within the “dvt_1” section …

   <tr>
    <td class="ms-vb" width="{$vImageWidth}">
      1 of <xsl:value-of select="count($Rows)"/>    
     <xsl:call-template name="dvt_1.body">
      <xsl:with-param name="Rows" select="$Rows"/>
     </xsl:call-template>
    </td>
   </tr>

Within the “dvt_1.rowview” section …

  • the ‘FileRef’ is the actual image URL being read in from the SharePoint list
  <span class="ms-vb">
   <a href="{@FileRef}" onClick="swap(this); return false;">
    <img src="/_layouts/images/square.gif" width="9px" border="0"/>
   </a>
    
  </span>

Within the “dvt_1.rowview”

  • this section executes when we arrive at the last image entry
  <xsl:if test="position() = last()">
   <span class="ms-vb">
    <br/>
    <img name="mainImage" src="{@FileRef}" width="{$vImageWidth}" border="0" alt="" />
    <br/>
    <xsl:value-of select="@Description" disable-output-escaping="yes" />
   </span> 
  </xsl:if>

Data View – Query String (Optional)

The addition of a few query string parameters allows for some additional functionality.

For example; we may want to pass in a value that provides a means for displaying only those images that pertain to a specific event.

Steps

  • add a new parameter (ie; vEventName)
  • specify a type of ‘query string’
  • include a default value (ie; event)

Data View – Filter (Optional)

Now we can configure the Filter so that only those images related to a specific event will be displayed.

  • select the column in your list that relates to the Event Name
  • select ‘equals’
  • select the Query String name added above (ie; vEventName)

Summary (To This Point …)

  • We have constructed the slideshow web part
  • We will pass the Event Name into the Data View Web Part via the URL
  • The web part will filter the images by Event Name

For example:    http://site_name_here/page_name_here.aspx?vEventName=XXXXX

–> Continue with Post 2 of 2

 

Reference:  http://www.allwebdevhelp.com/javascript/js-help-tutorials.php?i=10647

As always … Enjoy every sandwich!

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

One Response to Image Slideshow Using HTML & JavaScript (Post 1 of 2)

  1. Pingback: Image Slideshow (Post 2 of 2) | The SharePoint Effect

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