Prints by Ritator Title: Jack Kerouac
Inspired by Jack Kerouac by Ritator, it reminded me of the headers that I used to build for this site. I would take one of the local news’s webcam shots and slice a full height, single px wide segment and then let that repeat for the full width of the header. Simple and effective. The thing that I though was really neat about it was that I could start to tell what the weather was like just by the colors in the image. If it was mostly grey, it was likely raining.
That’s all well and good, but I hung that chunk of code out to dry so long ago, could I re-vive it? Was it even worth finding? No, why bother, start from scratch and make something else with the same idea. For example, this time around lets play with javascript.
Work has me playing with jQuery and I soon found pixastic, stitch them together and TADA you have a little image toy.
(if you want to play you’ll likely be happier playing with out the bounds of the iframe: go here instead).
It’s not a hard problem, I find a random 5px vertical slice and blur the image and then stretch it to the original dimensions. Some images result in more interesting results and the random factor has it’s ups-and-downs.
Just drop the URL of an image in the box, hit ‘GO’ and see what you get. It took me a while to get to a point where the ‘next’ call would clear out the created image. So far the hack I have in place has nasty side-effects. If you click ‘Go’ twice, it clears the image, like it should. But because the original img didn’t re-load the ‘load’ even is never fired thus the second image is not built. We’ll see if I fix that tomorrow or not.
UPDATE: the ‘Go-twice’ bug has been resolve, but it’s done in a rather crude way (I just do the work twice). Also I’ve added a marker on the original image that shows where the second image is built from.
Well hope you have as much fun playing with yet another toy I’ve built, as I had building it.
3 Comments
>If you click ‘Go’ twice, it clears the image…
If you’re using jQuery to handle the click event, you can just use .once and then reset the event handler at the end.
Thanks for the hint. Yes, jQuery is handling the events, though .once is likley not the answer. First it looks like it’s been moved to .one (http://api.jquery.com/one/) and the real problem is that the second image is created via .load of the first. Due to the browser being smart .load is never fired the second time.
I could just be blunt and force the second image to always be created but for larger images I don’t want to start the create process till the image is loaded. I guess what I need is a .is_loaded event.
I’ll have to play and see if I can get the flow all worked out, it was late and I was tired so I just got things to a point where they worked. Thanks again, for the tip. The more that I play with jQuery the more I find that they already solved for me.
If using perl 5.10.1 you don’t need to replace the Cwd package anymore. Anyway the version listed for Cwd doesn’t exist on CPAN anymore.
Post a Comment