Start off, My understanding of JS is very basic. I have a slideshow working in SP 2013 (also needs to be IE8 compatible) that works on the script editor page but not on the actual live site. I've read about using things like
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', sharePointReady);
on here and a few variants but I can't seem to find where to put them to get them to work. Any help is appreciated. thanks!
Here's the code:
<head>
<script src="http://ift.tt/1m2mkUB"></script>
<style>
.slideshow {
position:relative; /*Make the slideshow container position:relative and make the sub elements absolute to position the sub element absolute to the container*/
height:191px; /*The slide show height*/
overflow:hidden;
}
.slideshow div {
position:absolute;
top:0px;
left:0;
z-index:8;
}
.slideshow div img
{
width:790px; /*The image slide show width*/
height:191px; /*The image slide show height*/
display: block;
padding: 0;
margin: 0;
border: none;
}
.slideshow div.active {
z-index:10;
}
.slideshow div.lastactive {
z-index:9;
}
</style>
<script language="javascript">
/***************************************************************************************
* Run when page load
***************************************************************************************/
$(document).ready(function()
{
initSlideShow();
});
/***************************************************************************************
****************************************************************************************/
function initSlideShow()
{
if($(".slideshow div").length > 1) //Only run slideshow if have the slideshow element and have more than one image.
{
var transationTime = 4000;//5000 mili seconds i.e 5 second
$(".slideshow div:first").addClass('active'); //Make the first image become active i.e on the top of other images
setInterval(slideChangeImage, transationTime); //set timer to run the slide show.
}
}
/***************************************************************************************
****************************************************************************************/
function slideChangeImage()
{
var active = $(".slideshow div.active"); //Get the current active element.
if(active.length == 0)
{
active = $(".slideshow div:last"); //If do not see the active element is the last image.
}
var next = active.next().length ? active.next() : $(".slideshow div:first"); //get the next element to do the transition
active.addClass('lastactive');
next.css({opacity:0.0}) //do the fade in fade out transition
.addClass('active')
.animate({opacity:1.0}, 1500, function()
{
active.removeClass("active lastactive");
});
}
</script>
</head>
<div class="slideshow">
<div><a href="#"><img src="http://ift.tt/1IkM5tp" alt="" border="0" /></a></div>
<div><a href="#"><img src="http://ift.tt/1CRh4yi" alt="" border="0" /></a></div>
<div><a href="#"><img src="http://ift.tt/1IkM7Bi" alt="" border="0" /></a></div>
</div>
Aucun commentaire:
Enregistrer un commentaire