Another Mozilla Webmaker make created with Thimble, actually this was just a test version I was trying out to see what kind of advanced interactions Thimble could do since they added Javascript functionality.
The idea is to have larger photo with complexity within, and use a virtual “camera” viewfinder to make a series of snapshots that might tell a story in their sequence. Try it out first at https://cogdog.makes.org/thimble/photos-within-photo-stories.
Here is an example, from a photo I took a few years ago in London from an art exhibit on Southbank, Project Morrinho at Night
A five photo story created in thimble (click image for full size)
The story I might write (which I was too lazy to build in the interface, but the snapshots cant be saved anyhow w/o doing a screenshot)
From my lonely view in the yellow house, I dream of places far away, an entire forest of my own that would make my neighbors in the brown house with a tree jealous. In my dream, I jump the freight train, and escape this place. In my waking, I am still here.
The idea for this came from one of the early ds106 Visual Assignments created by Tom Woodward called One Shot:
Take a single photograph. Chop it up comic book style to create tension and narrative. Check out this ffffound image for an example*.
*It may, or may not, be one image- the concept is still sound.
This is a fascinating challenge, the equivalent of taking a print photo, and cutting it up into pieces to re-arrange into a new narrative.
I wondered if this could be done in Thimble… What I got is similar, not quite the same, but still pretty cool (IMHO).
I was looking for some advanced jQuery techniques that might be worth a try in Thimble, and found this demo in tutorialzine, Making a Photoshoot Effect With jQuery & CSS:
We are creating a photo shoot effect with our just-released PhotoShoot jQuery plug-in. With it you can convert a regular div on the page into a photo shooting stage simulating a camera-like feel. Using this plug-in, we give visitors the ability to take shots of the background image.
Let me just say, on its own, this really opens my mind as to what is even possible in jQuery. I began by exploring the downloaded files:
While the main file is s single HTML, there are a number of separate ones that would need to be either linked in Thimble. I opted to build a standalone version that would wrap all of this into a single index.html. I posted this on my own server to make sure it would work:
lab.cogdogblog.com/moz/photoshoot
To make it work (just look at the source HTML, its all there), I had to roll the external javascript and CSS files into the HTML of my page, and also, I loaded the three images on my server, so I could reference them by full URL in the CSS.
The original demo displays three of the “snapshots” in the page, whereas I wanted to have 5; this was a matter fo some CSS fiddling to change
.album{
/* This div holds the shots */
bottom:50px;
height:110px;
overflow:hidden;
position:absolute;
right:20px;
width:490px;
}
.album .slide{
/* The slide div is contained in album */
width:700px;
height:110px;
position:relative;
left:-210px;
}
to
.album{
/* This div holds the shots */
bottom:20px;
height:110px;
overflow:hidden;
position:absolute;
right:20px;
width:900px;
}
.album .slide{
/* The slide div is contained in album */
width:940px;
height:110px;
position:relative;
left:-100px;
}
I figured this out using the Chrome developer tools to fiddle with the positioning.
Once it was working with the demo content, I then went to flickr and grabbed the URLs for 4 of my own images.
It worked.
I then made a Thimble project for it.
And it did not work. The image area was blank, and there were no errors generated. I was stumped as to how to debug this, but while mentioning it to Brett Gaylor, he told me that Thimble was tied to some browser limits on accessing remote scripts- any calls to load a remote Javascript must be done via a https url, not http
All I needed to do to get this to work was to change my call to the hosted jquery URL from
to
And SHAZAM! It works (this is, um, ahem, pretty critical information to know).
And now it unlocks some ideas on how to do a lot more in Thimble, especially in how I like to nab stuff from flickr, in this simple one (Brett fixed the https in showing me the issue) that mods some code by John Johnstone https://brett.makes.org/thimble/flick-some-json
Who knows, This might end up in some Five Card Thmbling
