Scrollable Media Sets For Your Play Pages
From KickApps API Reference
This seems to be long overdue, right? Well wait no longer, the Previous and Next buttons can finally be put to use on our play pages!
Below you will find the JS code required to make a functioning carousel type photo gallery, powered by a search query. With this "plugin" you will allow a user to scroll through an RSS feed populated with media from a standard search. We will be placing hyperlinks right below the media, as shown in the screen shot below:
Pretty cool, huh? Now you can either copy and paste this code into your community or you can read through the code paying close attention to comments that explain whats going on. Enjoy!
// step 1 - clear all cookies if you are not on a play page
function addPrevNextButtons(){
// remove cookie if the ignoreAlbum param is set
//Get the value associated to the URL parameter "ignore"
var ignore = Ka.Util.getLocationParam("ignoreAlbum");
//If the value associated to "ignore" is set to true, erase the cookie
if (ignore == "true")
Ka.Cookie.erase('kaCarousel');
//Check to see if you are currently on the play page
if (Ka.Info.PAGE == 'pages/mediaPlayPage.jsp') {
// get the rss url from the feed
var rssUrl = Ka.Cookie.read('kaCarousel');
// if the rssUrl does not exist, end function here
if (rssUrl == null || rssUrl == "")
return;
rssUrl = rssUrl.replace(/quantity=\d*/gi, "quantity=250");
// Define a function to attach URL parameter to the related, most
// viewed, and latest media links
var handlePlayPageRelated = function(){
var updateLinks = function(){
$j('#ka_relatedWrap a').each(function(i, a){
if (a.href.match(/#$/gi) == null) {
if (a.href.match(/&ignoreAlbum=true/gi) == null) {
a.href += "&ignoreAlbum=true";
}
else {
}
}
});
}
$j('#ka_relatedWrap').click(function(e){
updateLinks();
});
updateLinks();
}
// execute above function
handlePlayPageRelated();
var findNextPrevious = function(items){
var currentIndex, prevLink, nextLink;
// iterate the list and find the current item
for (var i = 0, len = items.length; i < len; i++) {
if (items[i].toLowerCase() == window.location.pathname.toLowerCase())
currentIndex = i;
}
// find the previous item
if (currentIndex - 1 < 0) {
prevLink = "<div style="float:left; width:49%;"><a href="http://www.kickdeveloper.com/%22%20+%20items[items.length%20-%201]%20+%20%22">Last</a></div>";
}
else {
prevLink = "<div style="float:left; width:49%;"><a href="http://www.kickdeveloper.com/%22%20+%20items[currentIndex%20-%201]%20+%20%22">Previous</a></div>";
}
// find the next item
if (currentIndex + 1 >= items.length) {
nextLink = "<div style="float:right; width:49%; text-align:right;"><a href="http://www.kickdeveloper.com/%22%20+%20items[0]%20+%20%22">First</a></div>";
}
else {
nextLink = "<div style="float:right; width:49%; text-align:right;"><a href="http://www.kickdeveloper.com/%22%20+%20items[currentIndex%20+%201]%20+%20%22">Next</a></div>";
}
// create the prev\next div
var div = "<div style="margin-bottom:10px;" class="clearfix">" + prevLink + nextLink + "</div>";
// use jQuery to insert these items
$j(div).insertBefore('#ka_playPageStats')
}
// get the rss feed from the server via ajax
var items = [];
$j.get(rssUrl, function(xml){
$j(xml).find('channel').find('item link').each(function(i, e){
var link = ($j(this).text());
var ii = link.indexOf("/", 7);
items.push(link.substr(ii))
});
// pass control to the function
findNextPrevious(items)
});
}
else {
// clear cookie beacuse we are on some other page
Ka.Cookie.erase('kaCarousel');
}
if (Ka.Info.PAGE == 'search/searchPage.jsp') {
var rssUrl = $j('#ka_rss_footer a:first')[0].href;
Ka.Cookie.create('kaCarousel', rssUrl);
}
}
$j(function(){
addPrevNextButtons();
});
So there you have it, scrollable media sets! Just add some CSS and make your site one of a kind!