Du er her: Hjem > Sharepoint > Javascript til Content Editor Webparts > Slideshow med et billedbibliotek

Slideshow med et billedbibliotek

Få vist alle billederne i et billedbibliotek som et slideshow. Webdelen viser alle billderne den kan finde. Man kan natruligvis konfigurere hvor længe hvert billede skal vises, og hvor længe webdelen skal være om at fade ind og ud.

Der vises en underteksttil hvert billede, som kan hentes fra en kolonne man selv bestemmer. Som standard bruges bibliotekets 'Titel' kolonne.

ImageSlideshow

Man kan konfigurere webdelen yil at opføre sig som et link, med valgfri destination. Hvis denne funktionalitet er valgt, vises destinationen som tooltip, når musen er over det viste billedet.

ImageSlideshow2

 Man har følgende konfigurationsmuligheder:

Konfigurationsparametrene findes i koden, på linjerne 13 til 30

Variabel Linjenjummer Bemærkning
VJBSCode.ImageRotator.TargetListName 17 Navn til det billedbibliotek der skal benyttes som kilde for billedshowet
VJBSCode.ImageRotator.ImageHeighth 20 Højden til det viste billede, angiv 0 for at anvende billedets størrelse
VJBSCode.ImageRotator.ImageWidth 21 Bredden til det viste billedet, angiv 0 for at anvende billedets størrelse
VJBSCode.ImageRotator.PictureInterval 24 Angiv hvor længe det enkelte billede skal vises, i millisekunder (1000 = 1 sek)
VJBSCode.ImageRotator.PictureFade 25 Angiv hvor lang tid det skal tage at fade billder ind og ud, i millisekunder (1000 = 1 sek)
VJBSCode.ImageRotator.PictureDelay 26 Angiv paude mellem billderne, i millisekunder (1000 = 1 sek)
VJBSCode.ImageRotator.PictureHide 27 Skal der være et "tomrum" mellem hvert billede, i millisekunder (1000 = 1 sek)
VJBSCode.ImageRotator.Linktarget 30 Billedshownet kan linke til en anden webside. Hvis tom, intet link.

ImageSlideshow3

 Selve koden kan downloades her.

Kode:

<!--
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 2 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program; if not, write to the Free Software
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
* MA 02110-1301, USA.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
* "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
* LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
* A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
* OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
* SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
* LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
* DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
* THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*
* Vidar Jon Bauge <vidarjb@gresshoppen.dk>
-->
 
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
 
<div>
<div id="imageDiv" style="display:inline-block">
</div>
</div>
 
<script
type = "text/javascript" >Type.registerNamespace('VJBSCode');
VJBSCode.ImageRotator = VJBSCode.ImageRotator || {};
 
// -------------------------------------------------------------
// Configure this webpart
// -------------------------------------------------------------
// Name of the target list
VJBSCode.ImageRotator.TargetListName = 'Images';
 
// Image size in pixels, set to 0 for no resize
VJBSCode.ImageRotator.ImageHeighth = 480;
VJBSCode.ImageRotator.ImageWidth = 640;
 
// Image Interval and fade-in in milliseconds
VJBSCode.ImageRotator.PictureInterval = 5000;
VJBSCode.ImageRotator.PictureFade = 2000;
VJBSCode.ImageRotator.PictureDelay = 20;
VJBSCode.ImageRotator.PictureHide = 0;
 
// Url to navigate to, on click. Leave empty if not needed
VJBSCode.ImageRotator.Linktarget = 'http://www.gresshoppen.dk';
 
// -------------------------------------------------------------
// Do not edit below
// -------------------------------------------------------------
VJBSCode.ImageRotator.QueryResults = '';
VJBSCode.ImageRotator.ImageItems = '';
VJBSCode.ImageRotator.Images = [];
VJBSCode.ImageRotator.ImagesCount;
VJBSCode.ImageRotator.Counter = 0;
 
VJBSCode.ImageRotator.ImageTitles = new Array();
VJBSCode.ImageRotator.ImageUrls = new Array();
 
VJBSCode.ImageRotator.LoadImages = function() {
if(VJBSCode.ImageRotator.Linktarget != ""&&VJBSCode.ImageRotator.Linktarget != null){
 $("#imageDiv").click(VJBSCode.ImageRotator.ImageClicked);
$("#imageDiv").css('cursor','pointer');
$("#imageDiv").prop('title', VJBSCode.ImageRotator.Linktarget);
}
 
var clientContext = new SP.ClientContext.get_current();
var web = clientContext.get_web();
 
clientContext.load(web);
 
var list = web.get_lists().getByTitle(VJBSCode.ImageRotator.TargetListName);
clientContext.load(list);
 
var camlQuery = SP.CamlQuery.createAllItemsQuery();
VJBSCode.ImageRotator.ImageItems = list.getItems(camlQuery);
clientContext.load(VJBSCode.ImageRotator.ImageItems, "Include(Id, Title, Author, EncodedAbsUrl, FileDirRef, FileRef)");
 
clientContext.executeQueryAsync(Function.createDelegate(this, this.VJBSCode.ImageRotator.OnQuerySucceeded), Function.createDelegate(this, this.VJBSCode.ImageRotator.OnQueryFailed));
};
 
VJBSCode.ImageRotator.OnQuerySucceeded = function() {
 console.log('Request succeeded');
var listItemEnumerator = VJBSCode.ImageRotator.ImageItems.getEnumerator();
 
var itemCount = 0;
var oListItem = listItemEnumerator.get_current();
 
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
 
VJBSCode.ImageRotator.ImageTitles[itemCount] = oListItem.get_item('Title');
VJBSCode.ImageRotator.ImageUrls[itemCount] = oListItem.get_item('EncodedAbsUrl');
 
console.log('Image '+ itemCount + ' Title: '+ VJBSCode.ImageRotator.ImageTitles[itemCount]);
console.log('EncodedAbsUrl '+ VJBSCode.ImageRotator.ImageUrls[itemCount]);
 
//$("#imageDiv").append("<img id='image" + itemCount + "' src='" + VJBSCode.ImageRotator.ImageUrls[itemCount] + "'/><br/>" + VJBSCode.ImageRotator.ImageTitles[itemCount] + "<br/>");
VJBSCode.ImageRotator.Images.push([VJBSCode.ImageRotator.ImageTitles[itemCount], VJBSCode.ImageRotator.ImageUrls[itemCount]]);
itemCount++;
}
 VJBSCode.ImageRotator.ImagesCount = itemCount;
VJBSCode.ImageRotator.SlideShow();
};
 
VJBSCode.ImageRotator.OnQueryFailed = function(sender, args) {
 console.log('Request failed.'+ args.get_message());
};
 
VJBSCode.ImageRotator.SlideShow = function() {
 console.log('Image '+ VJBSCode.ImageRotator.Counter + ' of '+ VJBSCode.ImageRotator.Images.length);
var title = VJBSCode.ImageRotator.Images[VJBSCode.ImageRotator.Counter][0];
var url = VJBSCode.ImageRotator.Images[VJBSCode.ImageRotator.Counter][1];
 
if (VJBSCode.ImageRotator.ImageHeighth < 1 || VJBSCode.ImageRotator.ImageWidth < 1) {
var html = "<img id=imageHolder'"+ 
" src='"+ url + "'/><br/>"+ title + "<br/>";
}
else {
var html = "<img id=imageHolder' "+
"heigth='"+ VJBSCode.ImageRotator.ImageHeighth + "'"+ 
" width='"+ VJBSCode.ImageRotator.ImageWidth + "'"+
" src='"+ url + "'/><br/>"+ title + "<br/>";
}
 console.log('Showing '+ title + ' - '+ url);
console.log(html);
 
$('#imageDiv').fadeToggle(VJBSCode.ImageRotator.PictureFade, //.delay(VJBSCode.ImageRotator.PictureDelay);
function() {
 $('#imageDiv').html(html);
$('#imageDiv').fadeToggle(VJBSCode.ImageRotator.PictureFade).delay(VJBSCode.ImageRotator.PictureDelay);
});
if (VJBSCode.ImageRotator.Counter < VJBSCode.ImageRotator.Images.length - 1) {
 VJBSCode.ImageRotator.Counter++;
} else {
 VJBSCode.ImageRotator.Counter = 0;
}
 
 setTimeout("VJBSCode.ImageRotator.SlideShow()", VJBSCode.ImageRotator.PictureInterval);
};
 
VJBSCode.ImageRotator.ImageClicked = function() {
 window.location = VJBSCode.ImageRotator.Linktarget;
};
 
SP.SOD.executeOrDelayUntilScriptLoaded(VJBSCode.ImageRotator.LoadImages, "sp.js");
</script>