jQuery Background Switcher: Navigation

Another update for our Unobtrusive Background Image Switcher jQuery plugin: new option to show the navigation links so that the user can switch between the images manually.

This option is disabled by default, to use it just enable the “links” option, the rest is up to CSS:

<div id="bg-body"></div>

<script type="text/javascript">
// array with image paths 
var srcBgArray = [
  "/path/to/image1.jpg",
  "/path/to/image2.jpg",
  "/path/to/image3.jpg"
];

$(document).ready(function() {
  $('#bg-body').bcatBGSwitcher({
    urls: srcBgArray,
    alt: 'Alt text',
    links: true
  });
});
</script>

Since the images are not loaded at the time of the page load, they might have to be fetched after user clicks the link, in this case the loader animation has to be shown.

Loader element is created automatically if the links are enabled, the animation itself can be styled just as anything else, we included the default implementation in the demo.

Since we put few extra bytes to implement the new features, we now distribute the minified (with UglifyJS) version that is as light as 2.8 kb. If you want the source code – feel free to check out the Git repository.

Demo and downloads:

Brain-to-brain Internet

The Internet was a way to connect computers, and now it can be a way to connect brains” said Research Assistant Professor Andrea Stocco, after receiving a signal that made him involuntarily hit fire in a computer game. The signal was transmitted via Internet.

I wonder if brain-to-brain-web development would be awesome, definitely sounds like it.

More details in this article and on the research website.

How To Fix a Broken NetBeans under Linux

Yesterday something awful happened to my NetBeans IDE (version 7.3 PHP Linux x64 under Ubuntu 12.4 LTS) – it started to do all kinds of weird stuff, along with few visual bugs it also froze on code completion and hanged while preparing an SVN commit. All of a sudden it wasn’t possible to work any more and of course there were quite a few urgent things that I had to do with it.

So I quickly tried to fix it:

  • Killed all processes, restarted NetBeans few times, logged out/in, restarted the system
  • Reinstalled NetBeans, reinstalled it without saving any settings, installed newer version (7.3.1), tried latest beta
  • Started it with all the smart parameters that I could google
  • Installed few alternatives, didn’t have much time to play with these though

None of the things above fixed the problem which is somewhat strange – it’s not every day that you find cross-version bugs that just come out of the blue and wouldn’t go away. So after installing PHPStorm and seeing its warning about Java I got another idea about the root of the problem – NetBeans as well as other IDEs uses Java, that under Linux comes in two flavors: OpenJDK and Oracle Java (well, there are other options but these are not that relevant).

At the moment I had OpenJDK and I think it was just updated (yeah I might have clicked “update” button) causing all the weird bugs. Since the problem had little to do with the software itself, it could not be fixed by fixing the software. Download and install of NetBeans with Oracle Java solved the problem for me so if you have similar problems you might want to give it a try.

Update: jQuery Background Image Switcher

Updated our Unobtrusive Background Image Switcher jQuery plugin: added support for multiple instances per page. This means it can be called from multiple elements on the same page like that:

<div id="bg-body"></div>

<script type="text/javascript">
var srcBgArray = [
  "/path/to/image1.jpg",
  "/path/to/image2.jpg",
  "/path/to/image3.jpg"
];

$(document).ready(function() {
  $('#bg-body').bcatBGSwitcher({
    urls: srcBgArray,
    alt: 'Alt text'
  });
});
</script>

/* some other stuff here */

<div id="content-slider"></div>

<script type="text/javascript">
var srcContentImgArray = [
  "/path/to/content-image1.jpg",
  "/path/to/content-image2.jpg",
  "/path/to/content-image3.jpg"
];

$(document).ready(function() {
  $('#content-slider').bcatBGSwitcher({
    urls: srcContentImgArray,
    alt: 'Alt text'
  });
});
</script>

Not really useful for background images, but if you have a background image switcher as well as a content image slider and wouldn’t want to load too much scripts this might just be your thing, was also our reason for this update.

Demo and download links remain the same: