Variable speed slideshow using Magnific

Been messing about creating a website with a light box slideshow of some images, and wanted it to have the option to automatically change image. I’d already found Magnific Popup¬†which does an excellent job of the popup gallery bit, and a quick google got them automatically changing easily enough, but with my pretty much zero knowledge of javascript/jQuery etc I couldn’t for the life of me work out how to make it toggleable while the slideshow was going or change the speed.

A quick jQuery course later and I’ve got something that works, thought I’d chuck it up here so anyone else with a similar lack of knowledge can find something more useful when they google. People with more knowledge of this stuff may think its a terrible implementation, notes on improving it would be welcome ūüôā

The page shows the first image when you open it. click it and the gallery pops up with the automatic progression on by default. Hit space at any time and it should pause. You can change the speed of the auto change with , & . (< & > but cant be arsed with shift! )

Only tested in chrome, not sure if the keycodes need changing for other browsers.

Hope someone finds it useful.

var MPTimer = 2000

var timer

var stopped = false

$(document).ready(function() {

$('.popup-gallery').magnificPopup({ delegate: 'a',type: 'image',tLoading: 'Loading image #%curr%...',

mainClass: 'mfp-img-mobile',callbacks: {

change:function(){ timer = setTimeout(function() {$}, MPTimer)}


gallery: {enabled: true,

navigateByImgClick: true,

preload: [0,1] },

image: {tError: 'The image #%curr% could not be loaded.',titleSrc: function(item) {return item.el.attr('title') ;}}



if (e.keyCode === 32) {

console.log('Space pressed');

if (!stopped){



} else {

stopped = false;

timer = setTimeout(function() {$}, MPTimer)



else if (e.keyCode === 44) {

console.log('Comma pressed');



else if (e.keyCode === 46) {

console.log('Period pressed');








<br data-mce-bogus="1">


	<link rel='stylesheet prefetch' href=''>

<style>body {background-color: #000000;} h2{color: white;} p{color: rgb(255,255,255);}</style>

<div id="main-wrapper">

<script src=""></script>

<script src=""></script>
<div align="center">
<script type="text/javascript" src="script.js">


<div class="popup-gallery">

<a href="">
<div align="center"><IMG src="" ></div>

<a href=""></a>

<a href=""></a>

<a href=""></a>

<a href=""></a>

<a href=""></a>

<a href=""></a>

<a href=""></a>

<a href=""></a>

<a href=""></a>


How can someone get it so wrong???

Been playing NFS:The Run, and have found myself shouting at the tv in frustration, how did they take such a good concept and screw it up so badly? A coast to coast canonball style run in super cars. 3000 odd miles of non stop racing. Sounds great! Except its not. Its not non-stop and its not 3000 miles. It stops every 5 minutes or so as the race is broken up into a zillion stages. Just as you get in a groove and its stage over, heres a bunch of pointless achievements and now you can hit A twice to wait through a load screen to carry on. 

On the screens between levels its constantly telling you your stats, Run time, 15mins, avg speed 140mph, miles travelled 300 plus? what the hell? ok, you’ve cut the distance down. stop making it so frikken obvious. I can do speed x time, its pretty obvious that the sums dont add up.¬†

Then theres the stupid stage modes, “pass 8 people to progress” its not really a coast to coast race if you cant progress past any 5 minute stage without finishing in the position the game makers have decided is the place that you need to be in at that point.¬†

Dont even get me started on the out of car bits. Why do I have to randomly mash the A button to make him run from cops, then bash the Y to make him jump a fence? Seriously pointless, and really badly done. if you want to have these ‘story’ bits to make me change car, just put them in as cutscenes and be done with it.¬†

I know, its a NFS game, its not meant to be vaguely realistic, its an action game, etc etc. but its just dumb. 

This could have been a great game. Its barely good. such a shame.

HP ‘support’ (or lack of…)

still stinks of shorted wire, kinda reminds me of scaletrix as a kid...

Was sat using my laptop yesterday when I smelt an acrid burning smell, spotted my laptop wasn’t charging so looked at the transformer and the cable exiting it was busy trying to burn itself up. I yanked the power lead from it and removed it from the carpet, thankfully before anything other than the cable itself got hurt. Went to hp support as I was a little concerned that thier product just tried to combust, and the very nice lady on the support chat said she was sorry for the inconvenience but that as the laptop was out of warranty it’s my problem, but she can sell me a new one if I want. Not impressed. If it had simply broke I wouldn’t mind, but spontaneous combustion is something that I thought would be taken a little more seriously. When batteries go bad they recall entire batches and replace them out of warranty, why is a fire hazard from a power supply so different?

genuine HP part, for all the good that does...

Openscad export from inkscape, anyone interested?

I’ve been playing with OpenSCAD a bit ¬†after reading the tutorials MakerBlock has been doing over at the makerbot blog. (and the ones by Allan Ecker on the thingiverse blog)

While messing around with the polygon command I thought it would be a whole lot easier if I could draw the shape in inkscape, so I started knocking up an extension to let me do just that.

so far it exports paths as polygons and rects as openscad squares (dont get me started on the fact that they have non square squares!)

Have ¬†a few thoughts on other things I’d like to make it do, but would be good to know if anyone actually wants it before I spend too much time on it, ¬†especially since I dont actually have a bot to make anything on yet anyways.

Heavily based on the extension at by the way. (credit where its due!)

This build up scripts addictive…

Been playing with the build up script again. Ran my f16 piece through it, comes out quite nice.

Another one…

Just did another one, off my Susan ward image.

Vector Build ups….

So Ed Halley wrote this python script that creates an animation from an SVG file by building the image up shape by shape and doing nice tracking between them and so on. After he showed off his first anim in the jabber/irc room and posted the link to the script I couldnt resist having a play. Took a few tweaks to make the script play nice with win, but once thats done it was just a matter of setting it going and waiting while inkscape rendered a few thousand frames.

The first attempt i did shows that my style of drawing makes for a fairly random video. Since the animation is being done from the z-order info and my images are done in a pretty loose manner, the end result jumps about quite a lot rather than being a particularly ordered like eds, but its still kinda cool to watch them appear from the blank page. Decided I’d play with a drawing with slightly less objects while I improved the technique, so picked my Ford shelby GR-1 image. Got the same sort of slightly random video, so I tidied it up a bit before I ran it again by grouping objects from each area so the vid focuses on one region at a time. Seems to work fairly well, just need to find some music for it.


Eds vids:

Punk Angel build up:

Naginata Onna build up:

Lamborgini build up:

Stock Patterns

I havent had all that much time to code on inkscape this last release, but one of the things I did get in there is stock pattern support. To get your patterns to work as stock ones theres a little more to it than just c/p to the patterns.svg file. Rob A has done a nice little tutorial that explains it pretty well:

That time of year again…

not xmas, but the when we announce the About Screen contest for the upcoming release of Inkscape (0.46).

If you like the idea of having your art as the about screen of an app with a install base in the hundreds of thousands, then get to work! (the 0.45.1 packages had >1mil downloads from sourceforge!)

The contest deadline is January 6th, 2008. As with the past few contests we’ve had, it is being done on DeviantART ( ).

You can find out more about it at:

Additionally, if you have a DeviantART account, please show the news some “love” so we can hopefully get the story promoted to the front page.

Good Luck! Have fun! Draw Freely.

Mmmmmmm Shiny…

I really love to see the kinds of things people are creating with Inkscape, so good to be providing a good tool to people that their doing cool stuff with.

Perfect example of the kind of cool things people are doing  is mr.manders wip over at :