该实例演示如何获取l列表或者图片库的数据并实现图片自动播放效果，显示所有的在指定视图中的记录。
你可以自定义自动播放图片webpart的大小，显示方向，边框样式，背景色，背景图片，播放间隔，和图片显示时间。最下方已列出所有可配置项。
你能在一个页面上加入多个自动播放图片的webpart，他们之间不会相互影响。
已成功在IE8, Firefox 3.6.13, Safari 5.0.3 and Chrome 9.0.597.98测试，并兼容SharePoint 2007 and 2010.
示例截图
当鼠标移动到webpart上暂停自动播放
工具栏：
左侧的按钮提供指定list的功能
中间有前一张图片，恢复播放，后一张图片的按钮。
配置项:
- listGuid: The GUID of the list you will pull information from – see below for instructions getting this GUID
- listBaseUrl: The base URL (site URL, not list URL) of the site containing the list to pull from
- listViewGuid: The GUID of the view you will pull information from – see below for instructions getting this GUID
- viewFields: An array of all the fields you want to include – using FieldInternalName
- viewFieldsStyle: An array that corresponds with the above array. Used to set an individual CSS style of the value
- imageMax: Object literal with the parameters “height” and “width”. This represents the max-height OR the max-width of images that are either pulled from a picture library, or from a hyperlink field configured as “Image”. This does NOT apply to images embedded in a rich text field. Use only one parameter at the time to keep the image aspect ratio. The one not specified should have the value null
- containerID: A unique ID (unique in the current page) for the slideshow container.
- containerHeight: Height in pixles
- containerWidth: Width in pixles
- containerBorderStyle: CSS style for the border of the container
- containerBgColor: Background color of the container
- containerBgImg: Background image to use for the container
- inDir: The direction to scroll in the content (n,nv,ne,s,sv,se,v,e)
- outDir: The direction to scroll out the content (n,nv,ne,s,sv,se,v,e or fade)
- displayTime: How long to display each slide – in milliseconds
- slideTime: The slide time – in milliseconds
- readMoreLink: true or false
- readMoreText: If the above parameter is true – the text or image to click to go to DispForm for the specific item
- addNewLink: true or false
- addNewText: If the above parameter is true – the text or image to click to add a new item to the list
- emptyCaution: If the list view contains no items – this is the text displayed in the first (and only) slide
如何找到listGuid, viewGuid 和 FieldInternalName:
Go to the list view that will provide the input for your scrolling web part. Right click somewhere in the list view webpart and select “view source”. Search for“ctx.listname”, and you will find something like this:
ctx.listName = “{A4B4E15A-C5B0-47BC-A08B-739CD48FE58A}”;
ctx.view = “{B83E87C1-D25A-47DE-8196-A0A12DB89106}”;
The value for “ctx.listName” is used as “listGuid”, and the value for “ctx.view” is used as “listViewGuid” in the configuration.
To find the FieldInternalName of your field, go to DispForm on any element in the list, right click and select “view source”. You find the FieldInternalNames by searching for the “FieldName” (the display name) of your field. The FieldInternalName is found like this:
1 |
<!-- FieldName="My new field" |
2 |
FieldInternalName="My_x0020_new_x0020_field" |
3 |
FieldType="SPFieldText" |
The code
Download the code for the file “SlideshowForSharePoint.js” here
确保将代码保存在文档库中或者专门用于储存脚本的列表中。并确认所有用户都有权限浏览。
将如下脚本放入你需要显示的幻灯片的地方。
02 |
<script type="text/javascript" src="/test/English/Javascript/SlideshowForSharePoint/SlideshowForSharePoint.js"></script> |
03 |
<script type="text/javascript"> |
05 |
var myScrSettings = {'listGuid':'A4B4E15A-C5B0-47BC-A08B-739CD48FE58A', |
06 |
'listBaseUrl':'/test/English', |
07 |
'listViewGuid':'5BD378F4-25D5-4880-9C5B-1667FE43978D', |
08 |
'viewFields':['Title','MultiLine','Image'], |
09 |
'viewFieldsStyle':['padding:5px;font-size:16px','padding:5px;font-style:italic','text-align:center'], |
10 |
'imageMax':{height:150,width:null}, |
11 |
'containerID':'myScrollableDiv', |
12 |
'containerHeight':270, |
14 |
'containerBorderStyle':'border:6px silver double', |
15 |
'containerBgColor':'#CAE1FF', |
16 |
'containerBgImg':'/test/English/Javascript/SlideshowForSharePoint/bgImg6.png', |
22 |
'readMoreText':"<img title='Go to item' src='/_layouts/images/magnify.gif' border='0'>", |
24 |
'addNewText':"<img title='Add new item' src='/_layouts/images/newitem.gif' border='0'>", |
25 |
'emptyCaution':"<div style='height:100%;width:100%;padding-top:140px;text-align:center'>There are no items to show here..."}; |
27 |
init_fillScrollableDiv(myScrSettings); |
需要自定义改变 listGuid, listViewGuid, viewFields 和script src到你SlideshowForSharePoint.js的存放路径。