Skrollr – image not in sync

When using Skrollr I recently noticed that if you’re using ”$(document).ready(function(){ skrollr.init(); }) ” when calling the script, all the images might not have been loaded. This can lead to images beeing unsynced when scrolling. By changing to ”$(window).load(function() {skrollr.init();})” the problem is solved. This is beacuse window.load is not true until all images and content is loaded =)


Stream Airvision (aircam) on webpage

Well, the correct term is not streaming it´s featching a new image every 0,5 second. The problem is that you need to be logged into the cam, so first, login to your webcam and activate the public user. Then lets do some bad hacking:

Add this to your page and change the following things:

Should link to a 1px X 1px empty gif

The link to your webcam (IP or DynDNS)

Address to a nice ajax-loader gif-animation

To a image with the same size as your video output. I have a youtube kind of image with a play button on.


$('#videoframe').click(function() {

$("#loginform").submit( function () {
$("#webcamlogin").one('load', function() {
var currentDate = new Date().getTime();

.videoframecontainer { position: relative; height: 263px; width: 470px; background: url(http://ADDRESS-TO-YOUR-AJAX-LOADER-IMAGE/ajax-loader.gif) no-repeat center center;}
#submit{border:0;background: #fff;color: #fff;}
.pointer {cursor: hand; cursor: pointer;}

<div class="videoframecontainer">
<img id="videoframe" class="pointer" width="470" height="263" border="0" src="YOUR-DUMMY-IMAGE.jpg" alt="">

<form enctype="multipart/form-data" id="loginform" method="post" action="http://ADDRESS-TO-YOUR-WEBCAM/login.cgi" target="webcamlogin">
<input type="hidden" name="uri" id="uri" value="" />
<input type="hidden" name="username" id="username" value="public" />
<input type="hidden" name="password" id="password" maxlength="8" value="" />
<input name="Submit" type="submit" id="submit" value="Show" />

<script type="text/javascript" src=""></script>
<script type="text/javascript">// <![CDATA[
var currentDate = new Date().getTime();
// ]]></script>
<img id="videoframe" alt="Video preview" src="http://YOUR-URL-TO-THE-SERVER/snapshot.cgi?_=136421898asd7583" width="640" height="360" border="1" />

The thing here is to use javascript to reload the image, and then use current timestamp to make sure the browsern doesn´t cache the image. Just click your ”YOUR-DUMMY-IMAGE.jpg” image to start the stream.



Comment if you need any help =)