jot.be CSS Drop Shadow Image Plugin v0.1.1
The plugin inserts images with CSS drop shadows into articles.
By default it will also generate popup code to open a scaled new window with the bigger image after clicking on the thumbnail:
<p><strong>Download:</strong> <a href=“http://jotbe-fx.de/daily/download/txp/jbe_dsimage_0.1.1.zip”>jbe_dsimage_0.1.1.zip</a></p>
Changelog
- Fixed a double-slash in an URL
- Fixed the Javascript code generation which now points to an absolute URL ala
http://www.yourdomain.com/blog/popup.php
<p><strong>Example:</strong> <a href=“http://jotbe-fx.de/daily/photos”>jot.be :: Photos.</a> </p>
<p>Note that this plugin is under heavy development and some functions may not work properly or are not integrated in this version.<br />
If you find any bugs or have any problems with this plugin please <a href=“mailto:dsimage@jotbe-fx.de”>get in contact</a>. </p>
<p><strong>Usage</strong></p>
<p>In general, upload the images via the image-upload function of TXP.<br />
For each image / popup you want to show two images are required - The original image and the corresponding thumbnail. </p>
<p>Simple usage of the <code><txp:jb_dsimage /></code> tag: </p>
<p><code><txp:jb_dsimage src=“/daily/images/27.jpg” width=“480” height=“640” /></code></p>
<p><em>Advanced options/attributes</em></p>
<dl>
<dt><code>src="/path/to/image.jpg"</code> - <strong>required</strong></dt>
<dd>Absolute path to image source </dd>
<dt><code>width="320"</code> - default: "640" - <strong>required</strong></dt>
<dd>The width of the target <strong>big</strong> image, not the thumbnail </dd>
<dt><code>height="200"</code> - default: "480" - <strong>required</strong></dt>
<dd>The height of the target <strong>big</strong> image, not the thumbnail</dd>
<dt><code>alt="Alt text"</code> - default: empty </dt>
<dd>Alternative image text </dd>
<dt><code>title="Short description "</code> - default: "Zoom" </dt>
<dd>Short description of the image</dd>
<dt><code>page="no"</code> - default: "yes" </dt>
<dd>The target image will be linked directly without the wrapper page </dd>
<dt><code>popup="no"</code> - default: yes</dt>
<dd>Simply inserts a link pointing to the image</dd>
<dt><code>target="_blank"</code> - default: empty </dt>
<dd>The same as the HTML link attribute "target"</dd>
</dl>
<p><strong>Installation</strong></p>
<p>At first please have a look at the new A List Apart <a href=“http://www.alistapart.com/articles/cssdrop2/” target=“_blank”>CSS Drop Shadows II technique</a> because you have to create the necessary drop shadow images by yourself. <br />
The images enclosed with this plugin are modfied to fit the background of my website and may be used as samples for your own.</p>
<ol>
<li>Upload the <code>popup.php</code> to your blog folder/the path you have specified in the admin section as a subfolder. <br />
You might modify the CSS in the popup page to your needs.</li>
<li>Upload the shadow images to the image folder specified in TXP (!) Do not use the image upload function of TXP.</li>
<li>Modify your output HTML templates and insert the following tag into the <code><head></code> - it will include the styles and javascript <br />
<br />
<code><txp:jb_dsimage_init /></code></li>
</ol>
<p>That’s it! </p>
<p><strong>Developing notes</strong></p>
<p>Many ideas to improve and extend the plugin. But a first launch had to be made <img src=“/templates/jotbe_grunge/img/emoticons/wink.png” alt=“;-)” style=“display: inline; vertical-align: bottom;” class=“emoticon” /></p>
<p><strong> ToDo</strong></p>
<ul>
<li>Integrating external stylesheets so that one could modify them.</li>
<li>Combining the popup page with back and forward links allowing to step through the gallery without closing the window.</li>
<li>Two-column layout feature like <a href=“http://jotbe-fx.de/daily/photos”>on my site</a> - without complicated div-tags and float-problems</li>
<li>Enabled links to non-image URL like <code>href="http://jotbe-fx.de/daily/"</code> </li>
<li>Images with drop shadow only. Without a link.</li>
<li>... </li>
</ul>
