Posts Tagged Javascript

Simple Prototype.js slideshow

Posted by Adam in Javascript on June 8, 2009

Over the last few weeks I have been looking for a simple javascript based slideshow script based upon the prototype.js library. I found a few scripts that looked rather shiny but they were difficult to integrate with a php backend (I wanted something that could use simple xhtml).

The code to create a slide show is rather simple. Simple create an element and everything that you place inside of that element will be presented in the slide show.

the XHTML:
(it is very important that the style of the parent element is set to “display:none” inline and not in the stylesheet or elsewhere in the document. The prototype library is unable to change the opacity/display of an element whose style is define in an external stylesheet).

1
2
3
4
5

<div id="slides" style="display:none" >
	<img src="http://www.sxc.hu/pic/m/l/lu/lusi/1189704_ripe_strawberries_3.jpg" />
	<img src="http://www.sxc.hu/pic/m/s/sj/sjur/1186634_kiwi.jpg" />
	<img src="http://www.sxc.hu/pic/m/l/lu/lusi/1186300_banana_diet_4.jpg" />
</div>

The Javascript:
To create a slideshow simple include prototype (either on your site or using google’s service) and call the StartSlideShow function. The first argument of the function is the id of parent element in this case slides. The second argument is the length of time (in milliseconds) that a particular slide stays visible.

1
2
3
4
5

<script type="text/javascript">
window.onload=function(){
	StartSlideShow('slides', 2000);
}
</script>

If you don’t already have Prototype.js included as a javascript library on the site you are working on it can quickly and easily be added via google’s javascript api service:

1
2
3
4
5
6
7
8
9
10
11

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("prototype", "1.6");
  google.load("scriptaculous", "1.8.2");	
</script>
<script type="text/javascript" src="slideshow.js"></script>
<script type="text/javascript">
window.onload=function(){
	StartSlideShow('slides', 2000);
}
</script>

The entire slideshow.js file is less than 30 lines of code (not counting the comments). The script should be easy to understand and modify.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

function DoSlide(slide, index, slideLength){
	setTimeout(function(index){
		$(slide).appear();
	}, index * slideLength, index);
 
	setTimeout(function(index){
		$(slide).fade();
	}, (index * slideLength) + (slideLength / 2), index);
}
 
function DoSlideShow(slideshowDiv, slideLength){
	var slides = $(slideshowDiv).childElements();
 
	//fades each slide in and out
	slides.each(function(s, index){
		DoSlide(s, index, slideLength);
	});
 
	var intervalLength = slideLength * slides.size();
	var slideShow = setInterval(
	function(slideshowDiv, slideLength){
		DoSlideShow(slideshowDiv, slideLength)
		}, intervalLength, slideshowDiv, slideLength);
}
 
function StartSlideShow(slideshowDiv, slideLength)
{
	var slides = $(slideshowDiv).childElements();
	//hides all slides inside div
	slides.each(function(s, index){
		s.toggle();
	});
	//makes parent slide div visible
	$(slideshowDiv).toggle();
	DoSlideShow(slideshowDiv, slideLength);
}

If you are interested in a working copy of the slideshow I have a demo set up: http://scratch.casanovawebdesign.com/slideshow. If anyone has any questions or suggestions for this script feel free to discuss in the comment section.

Regards,
Adam Haney
Chief Developer Casa Nova Designs

Post to Twitter Post to Delicious Post to Delicious Post to Digg Digg This Post Post to StumbleUpon Stumble This Post

,

No Comments

The Affects of O3D On GP-GPU Computing

Posted by Adam in Javascript on April 26, 2009

Recently Google released an exciting new browser extension for Internet Explorer, Firefox and Safari. The Extension, O3D allows javascript developers to tap into the computing power of a modern user’s graphics card. This is exciting for many reasons.

First, this extension opens new doors to web application developers who want to add a new level to their current user interfaces (although I fear that some might over do it). It should be interesting to see how this extension is used to make GUIs more intuitive and easier to use.

Secondly, and most obviously this extension will allow for game development for the browser. Web 2.0 games have been on the rise for a few years now and there are already a few javascript libraries that allow for rapid javascript game development. It will be exciting to see how developers incorporate this new library into their games. I expect that in the next year or too we will so many new games that incorporate this library into their software stack.

Lastly, the affect that I’m most excited about is this libraries affects on GPGPU computing. GPGPU computing a branch of computer science that focuses on creating massively parallel programs that run on a user’s graphics card has already grealy reduced the cost of computation for many small scientific research projects. Nvidia’s nonschalant motto “Moore’s Law is for wimps” has proven true and we have seen a growth in GPU computing power that greatly exceeds Moore’s law for the last few years.

What I’m proposing is this, a distributed GPGPU computing API based upon O3D. This library would allow for GPGPU clusters to be created (not unlike ROCKS clusters that currently exist). Except this system would make adding a new node to the cluster as simple as navigating to a URL in the browser. Ideas like this have already been proposed for distributed javascript computation and now with this library allowing for javascript calls to the GPU I believe a small group could build a distributed system much faster than any centralized super computer (possibly larger than the current FOLDing at home cluster that does use GPU computing but requires the installation of a hard client on the user’s computer).

Update: I have begun work on a project that I am deeming “casanova cluster” which uses python for program development. The python library then makes SOAP calls to a PHP server that is controlling the number of nodes and their latency. Finally the PHP server uses JSON/Comet to talk to the browswer nodes running javascript and O3d. This Project is in infant stages but it should be interesting to see the ways it develops.

Regards,

Adam Haney

Chief Developer

Casa Nova Designs

Post to Twitter Post to Delicious Post to Delicious Post to Digg Digg This Post Post to StumbleUpon Stumble This Post

, ,

3 Comments