Power Transporter Tour

I wrote a page and the code inside as a starting point for understanding features of the Frame plugin. It is already more powerful than the Transport plugin that it mimics. And Eric is adding new ways for the javascript in a Frame plugin to interact with the lineup. I will encourage you to put serious time into understanding this.


The Power Transporter is a self-sufficient page that approximates the behavior of the Transport plugin using a Frame plugin and the javascript transporter.html visible in the Assets plugin also on the page. A Code plugin contains the address of the remote service that will handle the transport. It is worthwhile reminding your self how each of these plugins work. lineup Try dragging an image to the Frame where it says “drop here”. You should get a ghost page with that image in several sizes. Does this work for you?


Did the drop work for you? Did you try it?

If you fork the page to a site you own it you should find your copy works too. The drop combines information from two sources, the page that you forked and the asset that you didn’t. The transporter.html will be retrieved from my site but the address through which it transports comes from the surrounding page items.

Try substituting an image transporter of your own design. Edit the url in the Code plugin. Does this work? Try reverting to an unedited version and drop on the ghost page. Does it work?


Did your image transporter work? What went wrong?

The Assets plugin on your forked page should show both my and your assets folders as configured with markup. You can fork my html script with the buttons provided. Or you can download my script to your own computer and then upload the same or modified file to your assets. I keep copies of html scripts on my laptop and in GitHub too. With three copies I have to be careful to not misplace changes.

Try downloading my script and modifying it to show the drop zone in pink. This will be a css change in the style section.


Have you tried to update your copy of transporter.html? Can you send me a link?

The transporter.html should open in its own tab if you click on the link in the Assets item. I’ve written it so that it will mostly work outside of wiki so you should try this by dropping an image. It is easier to inspect and debug when it is in its own tab. Open the browser’s javascript inspector for this tab.

Try setting a break point in the drop handler and single step what it does.


drop api & variations

eval the code

add a form

open multiple windows