Just to demonstrate how glamorous my social life is, I spent a few hours Saturday night redesigning how my pechaflickr site displays its images. As far as I am concerned, it was an ideal evening.
Okay, pechaflickr is a thing I made a number of years ago to provide a place to practice improvisation. It’s a mashup of pecha kucha slide show format (20 slides up for 20 seconds each), PowerPoint Karaoke (giving a talk from random weird slides you’ve never seen before) and using random images based on a tag from flickr.
It’s my all time favorite thing I’ve built.
The way it had been displaying the images, had some klunky things to size the images (and it used a fixed size for images, totally non-responsive. The display was powered by the jquery-cycle plugin (not even the newest one) which provided my some nifty things like being able to vary the delay time, and issuing a function call when it was done. I added a display on the left to give a count of slides, and a little reminder of the tag and the run time length based on the choices on setting it up for number of slides and interval of time between them.
The old way pechaflickr displayed images. Great dog photo!
The display mostly worked, but could get cut off with weird projector resolutions and was likely less than ideal on tables.
While looking at the code for a new HTML theme I bought for my own project (lighting up my cog.dog domain), I saw that it used a jQuery plugin called Vegas 2 for displaying a slideshow of images full screen in the background of a site.
So started fiddling, first generating nothing but Javascript errors, but eventually getting the images to work. The images are found via php code that pulls info from the flickr API, and stores things like the image link in an array. Then I have to use PHP to dynamically write out the javascript code that initializes the slideshow.
One trick was getting to go through just once; vegas 2 is meant to endlessly cycle. Then found there is an event triggered each time it changes a slide. So I could check this each time to see if we were on the last slide. And also update the slide counter. It has to load the random set up slide first. And I found out for the way it ends, I had to repeat the last slide, because the event is triggered at the start of an image.
Here comes some code just to dazzle you… $interval is my php variable for how much time a slide stays on screen; $photos is my multidimensional array of the photo info; and $slidecount is the total number of images to show.
$(document).ready(function() {
$("body").vegas({
delay: ,
slides: [
{src: "images/splash.jpg"},
],
walk: function (index, slideSettings) {
$('.caption').html(index + ' / ');
if (index == ( + 1)) {
$("body").vegas( 'pause' );
$('.caption').html('DONE!');
$("#marquee").css("visibility","visible");
$(".vegas-slide").css("opacity","0.2");
}
}
});
});
Here is the way it looks now, the images are full screen, and will resize to whatever the window size is.
The new look of a pechaflickr slide show
I moved all the display stuff to the bottom (my CSS may need more tweaks).
But I like it much more, especially they way it fills the screen.
When one round of passing through the images is done, I pause the slideshow, and make visible a div that shows the image credits for all the ones shown. I did a thing to drop the opacity of the vegas slides in the background; they are stacked, so it creates a bit of a composite image.
Closing display for a round of pechaflickr
Staging servers are for the weak 😉 I have this running now on the main site http://pechaflickr.net, so give it a try and let me know what you think, like, hate, breaks.
I have not yet updated the github repo but no matter, I doubt anyone has even looked at the code, much less installed it themselves.
And you know what? For a Saturday night activity, this as damn fine.
Top / Image credit: screen capture of pechaflickr.net, a site I built and host for free. Why the heck would I attribute myself? Why not? Why not share where every image you use comes from? Is it just the threat of copyright cops that motivates you? Sad.
lovely stuff,
A couple of things:
1. Folk look at your code, any thing I’ve ever done with php that connects to a database uses your utils.php from 5card flickr
2. The tweet button shows up on the slides sometimes for me (just tested in safari a couple of runs through).
Thanks John. Yeah, I noticed the tweet button on the iPad. It’s inside a div that is set as hidden on the page load, might have explicitly hide it too.
Probably because the button is written via JavaScript, and Safari must be doing something differently from All Real Browsers.