A jQuery Slideshow for Tumblr Photo Blogs
Buy Avapro Online
Coumadin Without Prescription
Zyban No Prescription
Nizoral For Sale
Prozac Generic
Buy Aldactone Online
Seroquel Without Prescription
Prednisone No Prescription
VPXL For Sale
Stromectol Generic
I wanted a slideshow of tumblr photo blogs but I couldn't find anything that did it. The script below uses the Tumblr JSON API and jquery to produce a randomized slideshow of the all the posts on a blog. You can add an optional side control to control the delay between fades:
(function($){
$.fn.j1fader = function(vars) {
var startPost;
var postCount;
var randomNum;
var url = vars.url + "api/read/json";
var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var timeOutFn = null;
var startedTime = (new Date()).getTime();
var id = 0;
var fader = $('#j1fader');
var initialize = function(){
var delayControl = $('#j1delayControl');
var delay = $('#j1delay');
if (fader) {
fader.append('<div class="j1faderContent">');
}
if (delay) {
delay.text((timeOut/1000) + 's');
}
if (delayControl) {
delayControl.slider({
min:2,
max:60,
step:1,
value:(timeOut/1000),
slide: function(event,ui) {
if (delay) {
delay.text(ui.value + 's');
}
},
stop: function(event,ui) {
timeOut = ui.value * 1000;
var now = (new Date()).getTime();
var remaining = timeOut-(now-startedTime);
clearTimeout(timeOutFn);
if (remaining > 0) {
startedTime = now;
timeOutFn = setTimeout(getit, remaining);
} else {
getit();
}
}
});
}
$.getJSON(url+'?num=1&callback=?', function(data) {
startPost = data['posts-start'];
postCount = parseInt(data['posts-total']);
getit();
});
};
var getit = function() {
$(function() {
randomNum = startPost + Math.ceil(Math.random()*postCount);
$.getJSON(url+'?start='+randomNum+'&callback=?', function(data) {
if (data.posts[0]) {
var oldId = id;
id++;
$('.j1faderContent').append(
'<a href="'+data.posts[0]['url']+'" target="_blank">'
+'<img class="j1faderImage" id="j1fader'+id+'" src="'+data.posts[0]['photo-url-500']+'"/>'
+'</a>'
);
$('#j1fader' + oldId).fadeOut('slow', function() {
$('#' + oldId).remove();
});
}
$('#j1fader' + id).fadeIn('slow', function() {
startedTime = (new Date()).getTime();
timeOutFn = setTimeout(getit, timeOut);
});
});
});
};
initialize();
};
})(jQuery);
Put it in the header of a page (e.g. a page you added via the 'customize appearance' option in the dashboard) using the usual javascript include tags. You will also need some jquery libraries.
The script looks for elements tagged with three different IDs. Those ids are j1fader, j1delay and j1delayControl. It will display the retrieved images in the first one and if the second two are present, it will use them to draw delay controls.
This is an example, the various elements can be placed wherever you like in your layout and styled anyway you want:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Slideshow Tumblr</title>
<!--
<script type="text/javascript" src="http://static.tumblr.com/xdltzk3/nWRlqtndj/jquery-1.6.2.js"></script>
-->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css" media="screen">
#j1fader {
width: 500px; /* important to be same as image width */
height: 800px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}
#j1faderContent {
width: 500px; /* important to be same as image width or wider */
position: absolute; /* important */
top: 0; /* important */
margin-left: 0; /* important */
}
.j1faderImage {
position: absolute; /* important */
top: 0;
left: 0;
display: none; /* important */
}
</style>
<script type="text/javascript">
(the script from above)
$(document).ready(function() {
$('#j1fader').j1fader({url: "http://franciscomarin.tumblr.com/", timeOut: 10000});
});
</script>
</head>
<body>
<ul>
<li>Delay <span id="j1delay"></span>
<li id="j1delayControl">
</ul>
<div id="j1fader" class="media">
</div>
</body>
</html>
Obviously, change the URL to the one you want. Like your own maybe, as a separate Tumblr page.
Bookmark It:
