sitemap
contact

Daniel Skinner :: Reference and personal information

latest news

Cloning Zend_Config without side-effects

Cloning in PHP5 PHP5 with its much improved object-oriented style passes objects by reference by default. To create a copy of an object, a new construct 'clone' is introduced. Cloning an object in PHP5 creates a shallow copy - any…

Install phpUnderControl on CentOS 5

If you follow this guide you should start with a basic CentOS 5 installation with Subversion setup correctly and end up with a working installation of phpUnderControl.

MooTools and Swiff: Slideshow / Thumbnail Gallery

I have recently launched a website for the Bramham Lodge Residential Development in Bramham Village. The site features a neat Slideshow / Thumbnail Gallery implementation using MooTools and Flash (utilising the Swiff utility of MooTools 1.2). A demo can be…

Hair by Caroline

Hair by Caroline first launched back in 2005...three years down the line and we decided it was in great need of a re-design. It was also important to update the content, adding more material and creating a new gallery was…

External CSS won’t load in IE7

I just spent a while wondering why IE7 wouldn't make use of an external stylesheet when it worked in Firefox no problems. The page is in UTF-8 and the .css file was also encoded in UTF-8 but IE7 simply refused…

quick links

  • view my blog for news
  • download my cv
  • more on ajax
  • department of physics at york

Demos and Examples

Examples of some of the web development work I have done

This page features some of the cool web development stuff I have done using JavaScript and PHP. Please feel free to use this code, as it is distributed under the GPL (general public license).

All javascript libaries I create are based on the prototype framework and the scriptaculous effects library. You will need to download the latest versions of these libraries to use the JavaScript described here.

I try to build my libraries to support as many of the browsers that prototype officially supports. If you find a bug in my code or a browser in which the code does not work as expected please contact me so that I can improve the code for everyone. Alternatively, improve it yourself and show me the new improvement in action!

Quick Jump

Image Rollover (ImgRoll)

Description

A very basic JavaScript rollover. The big improvement over other JavaScript rollovers is that it aims to be as search engine friendly as possible. The code logic is completely separated from the page design.

Features

  • Define the rollover image in the code. There is no need for image_on.jpg etc...
  • Links to both images are in the code and hence accessible by search engines
  • No messy code on page

Demo

Javascript Rollover demo

Usage

A single instance of the ImgRoll class can be used with as many images as you like. A rollover is defined by the class name given to the image element. See the code for more details.

When creating a new instance of ImgRoll, the first argument is the class name of the rollover and the second argument is a hash of options.

The currently supported options are:

  • duration - the duration in seconds of the fade and appear effects. (default:0.1)
  • onComplete - a function to call once all the image rollovers have been created and initialised. (default:function(){})

Code

Libaries

<script src="/script/lib/prototype.js" type="text/javascript"></script>
<script src="/script/lib/effects.js" type="text/javascript"></script>
<script src="/script/imgRoll/roller.js" type="text/javascript"></script>

Initialisation

<script type="text/javascript">
Event.observe(window,"load",init);
function init() {
  new ImageRoller("roller1",{duration:0.5});
}
</script>

In page markup

<span style="background-image:url(/images/demos/roll-demo-2.jpg)">
  <img src="/images/demos/roll-demo-1.jpg" width="192px" height="219px" alt="Javascript Rollover demo" />
</span>

Image Viewer (ImgView)

Description

A search engine friendly javascript image popup viewer which supports several different effects.

Features

  • Completely search engine friendly. All resources are easily locatable by search engines
  • Graceful fallback. Users without javascript will still be able to view the images
  • Supports multiple opening and closing effects
  • No messy code on page

Demo

Image Viewer Demo

Usage

A single instance of the ImgView class can be used with as many images as you like. A viewer is defined by the class name given to the image element. See the code for more details.

When creating a new instance of ImgView, the first argument is the class name of the viewer and the second argument is a hash of options.

The currently supported options are:

  • openEffect - the effect used when opening the viewer. Supported values are "appear", "slide", "blind". (default:"appear")
  • closeEffect - the effedct used when closing the viewer. Supported values are "fade", "slide", "blind", "fold", "shrink". (default:"fade")
  • caption - the default caption to use for images if one is not specificed in either the alt or title attributes of the image.
  • CSSPath - the path to the file required by the ImgView library. If you do not supply a path you will need to include the by other means (e.g. <link> or <style>). This is useful if you are using XHTML strict and cannot include the CSS file inside the <head>

Code

Libaries

<script src="/script/lib/prototype.js" type="text/javascript"></script>
<script src="/script/lib/effects.js" type="text/javascript"></script>
<script src="/script/lib/builder.js" type="text/javascript"></script>
<script src="/script/imgView/viewer.js" type="text/javascript"></script>

Initialisation

<script type="text/javascript">
Event.observe(window,"load",init);
function init() {
  new ImageViewer("viewer1",{closeEffect:"blind",CSSPath:"/script/imgView/viewer.css"});
}
</script>

In page markup

<a href="/images/demos/view-demo-2.jpg">
  <img src="/images/demos/view-demo-1.jpg" alt="Image Viewer Demo" class="viewer1" width="250px" height="167px" />
</a>

Image Rollover/Viewer Combination

The two scripts describe above can be easily combined to make very interesting effects. This combination has been used in my image gallery and is a good example of how to use it.

The code is very simple and they way I prefer to do it is use the onComplete callback of the ImgRoll script to initate the loading of the ImgView images.

Demo

Image Viewer Demo

Code

Libaries

<script src="/script/lib/prototype.js" type="text/javascript"></script>
<script src="/script/lib/effects.js" type="text/javascript"></script>
<script src="/script/lib/builder.js" type="text/javascript"></script>
<script src="/script/imgView/viewer.js" type="text/javascript"></script>
<script src="/script/imgRoll/roller.js" type="text/javascript"></script>

Initialisation

<script type="text/javascript">
Event.observe(window,"load",init);
function init() {
  new ImageRoller("roller1",{duration:0.5,onComplete:function() {new ImageViewer("viewer1",{closeEffect:"blind",CSSPath:"/script/imgView/viewer.css"});}});
}
</script>

In page markup

<a href="/images/demos/comb-demo-1.jpg" style="background-image:url(/images/demos/roll-demo-2.jpg);">
  <img src="/images/demos/roll-demo-1.jpg" alt="Image Viewer Demo" class="roller1 viewer1" width="192px" height="219px" />
</a>

Image Cropper

Description

This library is part of a larger application for cropping, resizing, saving and previewing images in a content management system (CMS).

Features

  • This library allows you to apply a crop box interface to an image. Users can draw, redraw and resize the crop box over the image.
  • Several callback functions allow you to retrieve information about the crop box whilst dragging and after the user has finished drawing.
  • Highly customisable with many options available. Easy integration into a larger application to perform the actual image functions. See the next demo for more on this.

Demo

Code

Libaries

<script src="/script/lib/prototype.js" type="text/javascript"></script>
<script src="/script/lib/builder.js" type="text/javascript"></script>
<script src="/script/imgCrop/cropper.js" type="text/javascript"></script>

Initialisation

<script type="text/javascript">
Event.observe(window,"load",init);
function init() {
  MyCrop = new Croppable("cropbox","/images/demos/comb-demo-1.jpg",
    {CSSPath:"/script/imgCrop/cropper.css", maxSize:{,width:700,height:800},initialConditions:{x1:50,y1:50,height:500,width:300}});
}
</script>

In page markup

<div id="cropbox"></div>

Notes

As well as considering improving upon this library greatly, it is in need of some good documentation. There are pleanty of options and a few useful public methods.

Hopefully I will be able to provide more documentation shortly.

Improvements planned include better right click handling and possibly a context menu with options to clear crop.

Image Cropping with AJAX control interface

Description

Coming soon! This demo will exhibit some of the features of the cropping application I have developed for Web Certain. The application involves the live previewing of how a cropped image would look using AJAX requests and PHP to manage the image handling.

Features

  • Complete image cropping, resizing and saving application for use over the web browser. Perfect for use in a CMS
  • Uses AJAX based requests to give live previews and provide interactivity to the application
  • Interface based. Allows for easy implementation into other applications such as a CMS

Demo

Coming soon!

Image Hot Box Zoom

Description

Coming soon! Define specific areas of an image as hot boxes. As a user passes their mouse over a hot box another image fades in. This can be a zoomed in version of the hotbox.

Image Zoom and Drag

Description

Coming soon! Mouse wheel based zooming of a large image in smaller container. Dragging of the zoomed image to view different parts. Possible AJAX loading of higher quality images (much like the Google Maps interface).

Questions/Comments

If you have any questions or comments regarding the code presented above or need some help using the code on your site, please do not hesitate to contact me.