NP_photolog

This plugin constructs an image slideshow, with start/stop/next/previous buttons and numbered image buttons. I wanted to use nucleus blogs to display photos, to use the flexibility and structure of nucleus, rather than an extra-nucleus script. Now each item in our images blog is a separate 'slideshow'. To add a mnew set of images, I just add an image directory and a quick blog item to reference the directory's name.

Its installation isn't completely straightforward but don't panic, it's easy. Here's the drill:

1. download the plugin and the javascript NP_photolog.zip
2. Unpack the zip, put the plugin in the plugins directory and the javascript in the nucleus javascript directory
3. Within Nucleus Install the plugin
4. Edit the options. There are many, see below for an explanation
5. On the skin-itempage where you will include the image slideshow, make the following additions:

include this in your header (change the directory to suit your installation):

<script type="text/javascript" src="/nucleus/javascript/photolog.js"></script>

include a reference to the slide item (in its special template), wherever on the skin you want the slide:

<%item(slideshow)%>

and include this javascript in the body, somewhere AFTER the call to the item call <%item(mytemplate)%>:

<SCRIPT type="text/javascript">
<!--
if (document.images) {
  // Tell the slideshow which image to update
  SLIDES.set_image(document.images.SLIDESIMG);
  // Uncomment the following line if you want the slideshow to start automatically
  // SLIDES.play();
}
//-->
</SCRIPT>

1. Put the plugin call in the “Item Body” section of a dedicated template file: <%photolog%>
2. Edit a css file to include the four DIVs used by the photolog. I've included a sample css file, with this explanation:

      NOTE: the plugin outputs DIVs for only four parts of the show:
      .slide (the actual image)
      .controltext (the box where the controls go)
      .controlleft (the start stop prev next controls)
      .controlright (the 1.2.3... numbers (or images) to select individual images
 
      these two are optional, can be included in your skin
      .phototitle (a title of the photo: actually, the 'body' text of your blog
      .pleasewait (a little note to appear underneath the photos until the first loads)

1. Create a directory dedicated to your photologs. each 'blog' will be a separate subdirectory. Photos should be numbered 1.xxx, 2.xxx etc.
2. Create your new blog. It should use the skin you've edited above. Each blog TITLE should be the name of a subdirectory in the photolog directory. You can do what you want with the 'body' and 'extended body' sections.

Called from the template, the plugin decends into /photologdir/itemtitle/ (photolog is set in the plugin settings). It counts the number of files (all must be images, at this point), and outputs two things:

1. The actual image, within <div class=“slide”>, showing, first, image 1.xxx (where xxx is your chosen image extension).
2. A control box. The box is formatted like this. Variables correspond to the plugin option settings.

<!-- ====  the slideshow control box ==== -->

<div class="controltext">
<span class="controlleft">
<A HREF="javascript:SLIDES.next();SLIDES.play()"
TITLE="$startphrase">$startword</A>$betweencontrol

<A HREF="javascript:SLIDES.pause()"
TITLE="$stopphrase">
$stopword</A>$betweencontrol

<A HREF="javascript:SLIDES.previous()"
TITLE="$prevphrase">
$prevword</A>$betweencontrol

<A HREF="javascript:SLIDES.next()"
TITLE="$nextphrase">
$nextword</A></span>

<span class="controlright">
<a href=\"javascript:SLIDES.goto_slide(1)"  $prenum1$postnum  </a>$betweennum  </a>
<a href=\"javascript:SLIDES.goto_slide(2)"  $prenum2$postnum  </a>$betweennum  </a>
<a href=\"javascript:SLIDES.goto_slide(3)"  $prenum3$postnum  </a>$betweennum  </a>
     [...and so on with the numbers]
</span>
</div>

To see an example (dated and now without a good CSS file, but you see the numbers and colons), go to Unglued-photolog. NOTE THAT on my current web page's new skin. I've altered the script and taken out the individual slide links.

let me know at unglued if you have any problems!

What you're doing with the options is “skinning” the plugin. (I bet there's an easier way. Please tell me.)

With the code example above, you can see where the options appear in the final HTML. The default options work fine, start from there.

On the example site, I use text exclusively, but you could just as easily use images in place of “start” “stop”, etc., and in place of the numbers. Just include '<img src=“controls/img' for the prenumber setting, '.jpg”>' for the postnumber string, and the plugin will insert a number between them.

This is my first php, first plugin, all that. It's clearly hacked, and there are certainly improvements to be made. Thanks to Barelyfitz for the javascript. It's GNU licensed, so I guess my plugin is too :)

TrenT placed a detailed description in the support forum detailing his installation, step by step.

:: Plugins ::