Flicking a Five Card Story

Five Card Story: leaving

a Five Card Flickr story created by johnjohnston

Thro the fence,

A mossy climb,

Deeper.

Leaving the city:

Into a cleaner space.

This week it is suggested that we try a Five Card Flickr story, I took a run at it yesterday.

As I clicked trough the activity, I kept getting ideas that would turn away as I loaded another set of cards, instead of going with the flow I restarted a few times. Better perhaps to just pick up the cards as they are dealt? I didn’t end up with much of a story.

Today I though I’d post it and my mind turned to styling the code provided a little, it then wandered onto maybe making a slideshow, the result is above.
I started off by adding a wee bit of css to add a frame/border round the photo.
You need to use the text/html editor in WordPress (similar in other systems too) to paste in the code from Five Card Flickr, I edited a bit in a text editor first as this is easier than using the blog editor.

First I wrapped the paragraphs containing the images in a div, putting:
<div id=”5cards”>
Before the first p tag and:
</div> after the last.

I then added a style block:
<style type=”text/css” media=”screen”>
#fivecards{height:320px;width:500px;} #fivecards p{text-align:center;; }
#fivecards img{max-width:500px;max-height:300px;border:solid 1px;padding:10px;box-shadow: 5px 5px 2px #888888;margin:5px} #fivecards a{color:#000}
</style>
This gave the images a border and a shadow.

U
I then needed some JavaScript to sort out the slideshow.

First I need to hide all but one of the images:
div4search=document.getElementById('5cards');
var someas = div4search.getElementsByTagName('p');
for (var i=1; i < someas.length; i++) {
someas[i].style.display ="none";
};

Next I need a timer to hide the current image and show the next one.

I found a nice timer class: Object Oriented Programming with JavaScript : Timer Class – Daily Coding which looked as if it would do the trick.
So added the code for the class to the post inside the script tag.
I then added a timer_tick function which will be fired every time the timer ticked:

function timer_tick(){
	document.getElementById("div1").innerHTML =index;
	var someas = div4search.getElementsByTagName('p');
	for (var i=0; i < someas.length; i++) {
		if (someas[i].offsetWidth>0){
			someas[i].style.display ="none";
			if (i==someas.length-1){j=0;}else{j=i+1;}
			someas[j].style.display ="block"
			break;
		};
 	};
}

This is not very elegant, instead of remembering which photo is showing I just run through them all and the one that is visible is the current one. If it is the last I show the first, else I show the next.
I added this to the script block.
The other thing I did was to take the javascript and run it through Minify Javascript Online this put it all one one line. I think you need to do this in wordpress or the editor messes up by adding p tags in the middle of the script.

Not a particularly good way to approach this in a general way, but a nice wee problem for pushing my babysteps javascript a bit. I often wonder if there show be a wee bit of htlm/css/javascript in ds106 and I frequently use messing about in this way to avoid the main question;-)