School of Rock Advent Calendar
Having failed, as usual, to find an advent calendar that meets my daughter’s exact specifications – not tacky, no low-grade chocolate – this is my (slightly late) offering to her. Fun moments from her favourite film, and no cloying, oily aftertaste.
Technically an online advent calendar could hardly be easier; in fact it took her brother and I as long to pick stills from the film as it did for me to code up, which I did using a small amount of css; an even smaller amount of HTML – a single image tag for the resizeable background, and an empty div to hold the images – plus a modicum of jQuery (with some popup assistance from Thickbox).
The jQuery code was mostly familiar territory for me: the images are scripted onto the page in a single loop, and - after the appropriate date - clickable to reveal the image (with attached thickbox link).
The only really interesting parts were the ‘random’ mapping so that images didn’t all appear in numerical order – achieved via a hard-coded mapping object, as there is apparently no way in javascript to fix a seed for the random number generator – and the use of cookies to remember which windows my daughter (or anyone else who cares to enjoy it) has opened, which pushed my envelope slightly. It seems incredible to me that all cookies get returned in one horrible, semicolon-delimited string (what would have been so bad about a string array?), but there you go.
Amazingly the two cookie handlers worked perfectly, although a bug in my mapping between jQ objects and DOM objects hid this for a while. This is always a tricky issue in OOP whenever you have two representations of the same thing, and the standard solution (attach a custom property - in this case .ref - to the DOM object holding the array index of the item which describes it) always feels a bit like a hack.
Anyway, for what it’s worth, here’s the code:
var windows = new Array;
var today = new Date;
var mapping = {
1:17,
2:22,
…
23:20,
24:4
};
var folder = "school_of_rock";
$("body").ready(function() {
for (var j=1; j<=24; j++) {
var thing = document.createElement("div");
thing.ref=mapping[j];
windows[mapping[j]]=$(thing)
.addClass("window")
.appendTo("#picContainer")
.html("<p>"+mapping[j]+"<\/p><img src='"+folder+"/"
+mapping[j]+".jpeg' \/>")
.bind("click", function() {
$("body").focus();
if (today.getDate()>=this.ref) {
$(this)
.find("img")
.css("visibility", "visible")
.wrap("<a href='"+folder+"/"+this.ref+".jpeg'
class='thickbox'></a>");
TB_init();
setCookie(this.ref);
} else {
alert("Not yet!");
}
return;
});
//windows[j].get().ref=j;
if(!readCookie(mapping[j])) {
windows[mapping[j]].find("img").css("visibility", "hidden");
} else {
windows[mapping[j]].find("img").wrap("<a href='"+folder+"/"
+mapping[j]+".jpeg' class='thickbox'></a>");
}
}
});
function setCookie(n) {
document.cookie = "opened"+n+"=true; expires=Mon, 1 Jan
2007 00:00:00 UTC; path=/";
}
function readCookie(n) {
var where = document.cookie.indexOf("opened"+n);
return (where!=-1);
}
It’s quite re-usable (I’m already thinking about the countdown for Christmas 2007). Ideally I would have scripted the background image into the page, so that only a single change in the folder variable would be neded to repurpose the entire thing. Oh, and if it hadn’t been so late at night, I would have added some animation to the window opening.
I should mention that since it has a target audience of (I)one, and I know which browser she uses (Flock), I have happily not had to think about how it looks in Internet Explorer, a situation of which I have taken full advantage. Since it uses percentage sizes and relative positioning, it’s fair bet IE6’s faulty positioning model will screw it up royally. If anyone else can be bothered to make it work I would be interested in seeing it.
Next year, she wants sound, too ;-)
These comments have been invaluable to me as is this whole site. I thank you for your comment.
Comment by Rosie — April 28, 2007 @ 7:10 pm
I’ve noticed soheimtng with this plugin it uses get_the_content’ to get the post content, which at least on my wordpress, dumps the wordpress auto formatting stuff, meaning that you can lose line / paragraph breaks that are usually automatically inserted by wordpress. I think it is to do with the priority order of filters you could potentially achieve the same thing by doing add_filter( the_content’,'functioname’,-99999) or similar, to force it to run first, but really, to be a proper filter, it should filter what it is given, not just grab the post content again, otherwise it won’t play nicely with other plugins.So, I changed the line in function add_image_content($content) to filter the current content, rather than to get the post data again, like this:$rif_text = preg_replace( #[(.*?)]#’, , $content);Is there any reason that change shouldn’t go into the main plugin code?cheers,Joe
Comment by Diana — May 22, 2013 @ 5:57 pm
(1) in /home/user123/public_html/wp-content/plugins/wordpress-flickr-manager/lib/inc.flickr.php on line 82Warning: mysql_select_db(): supplied argument is not a valid MySQL-Link resource in /home/user123/public_html/wp-content/plugins/wordpress-flickr-manager/lib/inc.flickr.php on line 83Warning: mysql_query(): supplied argument is not a valid MySQL-Link resource in /home/user123/public_html/wp-content/plugins/wordpress-flickr-manager/lib/inc.flickr.php on line 96Warning: mysql_query(): supplied argument is not a valid MySQL-Link resource in /home/user123/public_html/wp-content/plugins/wordpress-flickr-manager/lib/inc.flickr.php on line 98Warning: mysql_fetch_row(): supplied argument is not a valid MySQL result resource in /home/user123/public_html/wp-content/plugins/wordpress-flickr-manager/lib/inc.flickr.php on line 99
Comment by car insurance quotes — May 28, 2013 @ 5:48 am
Great plugin! I have one problem thought right now. When I add a gallery and I have:div class=”post_image” as my before, it adds it before the gallery and before each image (which is fine), however, when it adds it before each image it is adding it as div class=””post_img””How can I avoid or fix this? Also, just as a future suggestion. If it’s possible to add custom image sizes and/or custom classes for square, thumbnail, medium, large. The classes would be great because if I could automatically add the class “post_img_med” for example around my medium images, I could resize them using css. The only problem there is with the horizontal vs. vertical images. But that would be nice because the flickr small images are too small and the medium are too big for my div.Thanks again though for the great plugin!
Comment by online auto insurance quotes — May 30, 2013 @ 6:11 am
Great plugin! I have one problem thought right now. When I add a gallery and I have:div class=”post_image” as my before, it adds it before the gallery and before each image (which is fine), however, when it adds it before each image it is adding it as div class=””post_img””How can I avoid or fix this? Also, just as a future suggestion. If it’s possible to add custom image sizes and/or custom classes for square, thumbnail, medium, large. The classes would be great because if I could automatically add the class “post_img_med” for example around my medium images, I could resize them using css. The only problem there is with the horizontal vs. vertical images. But that would be nice because the flickr small images are too small and the medium are too big for my div.Thanks again though for the great plugin!
Comment by cheap california auto insurance — May 30, 2013 @ 6:11 am
Great plugin! I have one problem thought right now. When I add a gallery and I have:div class=”post_image” as my before, it adds it before the gallery and before each image (which is fine), however, when it adds it before each image it is adding it as div class=””post_img””How can I avoid or fix this? Also, just as a future suggestion. If it’s possible to add custom image sizes and/or custom classes for square, thumbnail, medium, large. The classes would be great because if I could automatically add the class “post_img_med” for example around my medium images, I could resize them using css. The only problem there is with the horizontal vs. vertical images. But that would be nice because the flickr small images are too small and the medium are too big for my div.Thanks again though for the great plugin!
Comment by car insurance quotes — May 30, 2013 @ 6:12 am