Registered users can click here to access more content / Geregistreerde gebruikers kunnen hier klikken om in te loggen.

Wordpress Plugin: WP-PopIn

publish date : 12-10-2005; last modification : 18-03-2009, 22:50

Page Content

The contents of this page are:

Introduction

This plugin uses Javascript to give all links to images an additional onclick action. When a visitor clicks the link, he/she opens a so called “popin window”. A popin window is an alternative to the well known and often annoying popup window. It is not really a new window, but a layer that is placed over the content of your website. After clicking, the plugin will use A.J.A.X. to retrieve the necessary data and to place this data into the popin.

If the visitors browser does not support W3C’s DOM or if the visitor has disabled Javascript he or she is taken to the original link.

Also not all links are changed, but only those that were given a predefined class (multiple classes can be set in the plugin). If the images are not in the root directory. The plugin looks for all other images in that directory and it presents the user with the posibility to browse through all of them. In this case the plugin also makes it possible to download a zip-file that contains all the images of that directory. If you don’t like this you can prevent the browsing on a per link basis and zipping on a per directory basis.

P.S. Please keep in mind that this is my first Wordpress plugin and therefor it’s also a bit of an experiment.

What do I need?

You’ll need to have a working installation of Wordpress. If you have that you will also have PHP. To be honest I have no idea about compatibility requirements. I’ve developed and tested this plugin with Wordpress 1.5.2 on a Red Hat Linux server that runs Apache 2.0.40 together with PHP 4.3.10. Anything else will by trial and error. If you discover problems, please notify me!

License info

Unlike all other content on my site, my plugins and scripts are released under a GNU General Public License. A copy of the full license text is included with your Wordpress distribution and can also be found here. Please note the credits for additional info. I appreciate it when you let me know if and how you use my script…

Credits

To accomplish the zipping, I’ve included the exellent Zip Module (version 2.4) of the PhpConcept Library. It’s written by Vincent Blavet and released under a GNU Lesser General Public License. More information about this plugin can be found on www.phpconcept.net or in the txt files inside the “pclzip” directory of the plugin.

Installation?

Installation is pretty straightforward. Download the zipfile, unzip it and copy the complete wp-popin directory to your wordpress plugins directory. The result will be someting like: 

/wp-content/plugins/wp-popin/wp-popin.php
/wp-content/plugins/wp-popin/wp-popin-requests.php
/wp-content/plugins/wp-popin/wp-popin-javascript.js
/wp-content/plugins/wp-popin/wp-popin/pclzip/pclzip.lib.php
/wp-content/plugins/wp-popin/wp-popin/pclzip/readme.txt
/wp-content/plugins/wp-popin/wp-popin/pclzip/gnu-lgpl.txt

Login as administrator and activate the plugin inside the plugins menu. This should do the trick for a basic install.

The result of the popin has this basic code:
<div id="wpPopin">
<div id="wpPopinLinks">All the links and seperators</div>
<div id="wpPopinImage"><img /></div>
</div>

To make the popin look nice and to blend in with your site, you will have to add some styles to your stylesheet (usually: style.css). A basic solution can look like this: 

#wpPopin {
    padding: 5px;
    border: solid 5px #06c;
    background-color: #fff;
}

#wpPopinLinks {
    height: 12px;
    padding: 4px;
    padding-top: 0px;
    padding-bottom: 7px;
    text-align: center;
    font-size: 9px;
    color: #fff;
    background: #000;
}

The wpPopinImage does not really need styling. Please keep in mind that the width of the div is set by the plugin.

After you’ve added this to your stylesheet. The plugin should work. Congratulations! However in the wp-popin.php file you can find a set of variables which can be changed so you can tweak your installation a bit. The available variables are:

$piClasses
This is an array with all the classes which will be replaced by the plugin. e.g.: array("piClass","randomImage","galleryImage");. The first value of the array is used when you use the quicktag!
$piQuicktags
Put this value to true to enable a popin quicktag button, change it to false to disable it.
$piNoFollow
Names of directories for which no previous and next links are made. e.g.: array("uploads","private","etc");.
$piEnableZip
This setting enables the making of zipfiles of all images in a driectory. Change this setting to false to disable zip support.
$piNoZip
Like $piNoFollow, only this array disallows zipping.
$piTempDir
This is a temporary writable (chmod 777) directory which the plugin uses to temporary store images and zips. On *nix operating systems mostly /tmp will do. On windows it should be something like: C:\Windows\Temp\
$piWpDir
If your Wordpress installation is not in the root of your website you should change this variable. Dir must be taken from the root and start with a slash, e.g.: "/weblog"if your wordpress is accessed like http://www.yourdomain.com/weblog/.
$piCloseOnclick
Set to true if you want the image to be a popin closing link too. Set to false if you don’t want this.
$piLinkSeperator
Character(s) to put between the links in the linkbar of the popin

Download the script

The current version 0.1.2. You can download a zip that contains all you need by clicking this link. Like my work and leaving my page after downloading. Consider taking a detour via one of the commercial links on the right side. Who knows what you might find. Thanks and good luck!

Changelog and todo

0.1.2 Fixed a Quicktag bug in IE (noted by she)
0.1 It just started, nothing changed yet…

I still want or have to do the following:

  • Make the release!!!
  • Make the quicktag work!
  • Add support for relative linking of images.
  • By popular request: Add id’s to the links within the popin so they can be styled.
  • Solve “the onload problem”. The appendChild method only works if the body is fully loaded. The easy solution would be to add an onload attribute to the body tag, but I want to keep this plugin simple, so I don’t want people adding anything to whatever tag . I could use: window.onload, document.onload, window.onreadystatechange or something similar. There is however a chance that another script is trying to do the same. This would prevent on of them from executing.
    For now I’ve tried to solve it by adding a function that will check existing window.onload and adds a new one. However in some vague situations this function can cause IE to start protesting. I’m still looking for a better solution. If anyone has any ideas, please let me know…

Problems / Questions / Suggestions / Support?

Sorry, but I do longer give support for this plugin. Development has been dead for 2 years and this page is nothing more than an archive.

back to the index page / terug naar de inhoudsopgave