|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script src="/sites/JQueryDemo/JS/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="/sites/JQueryDemo/JS/jquery.SPServices-0.7.2.js" type="text/javascript"></script>
<script src="/sites/JQueryDemo/JS/Slider/slides.jquery.js" type="text/javascript"></script>
<link rel="stylesheet" href="/sites/JQueryDemo/JS/Slider/global.css">
<script>
$(document).ready(function () {
$().SPServices({
operation: "GetListItems",
async: false,
listName: "Pictures",
CAMLRowLimit: 6,
completefunc: function (xData, Status) {
var hasRows = false;
$(xData.responseXML).find("z\\:row, row").each(function () {
hasRows = true;
var _url = '/' + $(this).attr("ows_RequiredField")
var _title = $(this).attr("ows_NameOrTitle");
_slideDiv = $("<div class='slide'/>");
_link = $("<a src='" + _url + "'/>");
_Image = $("<img id='slideShowImage' src='" + _url + "'/>");
$(_link).append(_Image);
_slideDiv.append(_link);
_Title = $("<div class='caption'><p>" + _title + "</p></div>");
_slideDiv.append(_Title);
$(".slides_container").append(_slideDiv);
});
}
});
});
$(function () {
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
play: 2000,
pause: 2500,
hoverPause: true,
animationStart: function (current) {
$('.caption').animate({
bottom: -35
}, 100);
if (window.console && console.log) {
// example return of current slide number
console.log('animationStart on slide: ', current);
};
},
animationComplete: function (current) {
$('.caption').animate({
bottom: 0
}, 200);
if (window.console && console.log) {
// example return of current slide number
console.log('animationComplete on slide: ', current);
};
},
slidesLoaded: function () {
$('.caption').animate({
bottom: 0
}, 200);
}
});
});
</script>
</head>
<body>
<div id="container">
<div id="example">
<div id="slides">
<div class="slides_container" id="slides_container_div">
</div>
<a href="#" class="prev"><img src="/sites/JQueryDemo/JS/img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
<a href="#" class="next"><img src="/sites/JQueryDemo/JS/img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
</div>
<img src="/sites/JQueryDemo/JS/img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
</div>
</div>
</body>
</html>
|
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please
let us know and we'll add colourisation support for it.
9+ plus years of experience in IT industry. This includes experience in architecting, designing and developing solutions on Web and desktop application platforms
Submit an article or tip