Posts tagged php

Simple Image Slideshow with jQuery and PHP

Sep 1st

Posted by matthew in Photography

2 comments

I really liked Jon Raasch’s jquery-powered slideshow, but integrating it into a page requires a bunch of steps:

  1. Add the jQuery library
  2. Add the slideshow javascript function
  3. Add the CSS with opacity and z-layer set properly
  4. Upload the images for the slideshow someplace
  5. Enumerate the images’ URLs that you want to cycle through

Adding images is tedious (you have to upload AND update the image list), and there’s no clean support for multiple slideshows per page. I wanted a process that made integration into other pages trivial.

I decided that an IFRAME to host the slideshow would keep jQuery and the slideshow CSS partitioned away from the rest of the embedding page, and would let adding slideshows to new pages have an easy-to-follow recipe, no matter what was already going on in the existing page. The IFRAME needed the template HTML, and if I used PHP, I could generate the image list for the slideshow automatically from the images that live in the same directory as the PHP script.

More >

, ,

Apache2, PHP, and MySQL on Mac OS X using MacPorts

Aug 24th

Posted by matthew in Technical HOWTOs

No comments

1. Install MacPorts

Follow the instructions here: http://www.macports.org/install.php.

2. Install apache2

sudo port install apache2

Note that the macports instructions suggest installing the launchctl script now, but we’ll do that after mysql and php are installed.

3. Install and configure MySQL

If you want 5.0.x, use mysql5-server. If you need 5.1.x, install mysql5-server-devel (at least as of August 2009).

sudo port install mysql5-server

As the macports instructions state,

In order to setup the database, you might want to run sudo -u mysql mysql_install_db5 if this is a new install.

It’s never a bad idea to set the root password, and as the document suggests, run:

/opt/local/lib/mysql5/bin/mysqladmin -u root password 'new-password'

You also want to install a database configuration file — there are a bunch of templates in /opt/local/share/mysql5/mysql/, but for development, my-small.cnf should suffice:

sudo cp /opt/local/share/mysql5/mysql/my-small.cnf /opt/local/etc/mysql5/my.cnf

Once the config is in place, spin up mysql:

sudo launchctl load -w /Library/LaunchDaemons/org.macports.mysql5.plist

Check that mysql is up and running by connecting with the mysql client:

mysql -h localhost -u root -p

4. Fix your PATH

Note that the mysql binaries in /opt/local/bin all have a “5″ suffix, but /opt/local/lib/mysql5/bin has “normal” named binaries, so you probably want that in your PATH too. The apachectl in /usr/bin will spin up the mac os x version of apache (that we’re avoiding), and that lives in /opt/local/apache2/bin. So in your .bashrc (or .profile or whatever):

export PATH=/opt/local/bin:/opt/local/sbin:/opt/local/lib/mysql5/bin:/opt/local/apache2/bin:$PATH

5. Install PHP5

sudo port install php5 +pear +apache2 +fastcgi +mysql5

Note that php5 has a lot of variants. If you think you want other goodness, run port variants php5 and cook up your own set of options.

Again, as the macports instructions state,

copy /opt/local/etc/php5/php.ini-development (if this is a development server) or /opt/local/etc/php5/php.ini-production (if this is a production server) to /opt/local/etc/php5/php.ini and then make changes.

6. Install the PHP-MySQL driver:

sudo port install php5-mysql +mysql5

7. Configure apache2

The mod_php.conf from the php5 package is put into a directory that the apache2 configuration doesn’t read by default — so you need to add this line to the end of /opt/local/apache2/conf/httpd.conf:

Include conf/extras-conf/*

Hopefully this will be considered a packaging bug, and will be fixed at some point.

8. Run apache2

sudo launchctl load -w /Library/LaunchDaemons/org.macports.apache2.plist

Note that the logs, by default, are in /opt/local/apache2/logs.

If you change the PHP or Apache configuration files, run 

sudo /opt/local/apache2/bin/apachectl restart

and watch the logs for errors.

, , , , ,

Simple PHP image rotation script

Jul 24th

Posted by matthew in Technical HOWTOs

No comments

This blog has a rotating header — if you visit /header/ and bounce on reload, you’ll see a series of random images. Here’s how it works:

The header is added to a div with the following CSS:

#headerimage{
  background: url("/header/") center center no-repeat;
}

/header/ is a directory in ~/public_html/. It contains a bunch of similar-sized images, along with the following index.php file:

<?php
$pattern = '/\.(png|gif|jpg|jpeg|svg)$/i';
$dh  = opendir('.');
while (false !== ($filename = readdir($dh))) {
  if (!is_dir($filename) && $filename[0] != '.' && preg_match($pattern, $filename)) {
    $files[] = $filename;
  }
}
closedir($dh);
$file = $files[rand(0, count($files) - 1)];
header('content-type: '. mime_content_type($file));
readfile($file);
?>

It’s pretty simple. It

  1. looks for image files in the same directory (lines 2-9)
  2. chooses one at random (line 10)
  3. sets the mimetype of the response based on the image’s filename suffix (line 11)
  4. sends out the file’s contents (line 12)

What’s nifty is you can turn this into an ultra-lightweight slideshow by adding one line:

header('refresh: 5');

after line 11 (the mime_content_type header). There isn’t any transition between the image changes, but we’ll leave that for next time.