Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
[archived] jbe_dsimage: CSS Drop Shadow Image Plugin
Notice: This thread is archived, this plugin is no longer available.
**********************************************************
<p>The plugin inserts images with CSS drop shadows into articles. <br />
By default it will also generate popup code to open a scaled new window with the bigger image after clicking on the thumbnail:</p> <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> (bugfixed version)</p>
<p><strong>Bugfix:</strong> <br/>Fixed the Javascript popup code which sometimes has resulted in a 404 error because of an invalid formed URL to the <code>popup.php</code></p>
<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 ;-)</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>
Last edited by jot.be (2004-05-16 20:19:42)
Offline
Re: [archived] jbe_dsimage: CSS Drop Shadow Image Plugin
really nice site design..
nice work so far…
regards
“The insistent messiahs-Type of Guy”
“Max wrote the code and uploaded it over a satellite connection from his top secret island hideway somewhere in the Mediterranean.”
Offline
Re: [archived] jbe_dsimage: CSS Drop Shadow Image Plugin
The plugin has been updated – please have a look at the first post …
Offline
Re: [archived] jbe_dsimage: CSS Drop Shadow Image Plugin
Holy cow, that’s cool. Can’t wait to try it out.
-Alan
Offline
Re: [archived] jbe_dsimage: CSS Drop Shadow Image Plugin
Due to a recent redesign of my weblog the CSS Drop Shadow Plugin was deactivated. Nobody could see the plugin in action.
Now the graphics have been modified to fit into the new design and the plugin has been enabled!
Have fun :-)
Last edited by jot.be (2004-08-30 19:41:54)
Offline
Re: [archived] jbe_dsimage: CSS Drop Shadow Image Plugin
To center images using my TXP plugin you only need to wrap the <code><txp:jb_dsimage … /></code> Tag with another div:
<code><div style=“width: 270px;margin: 0 auto;”><txp:jb_dsimage src=”/path/to/file” /></div></code>
The wrapping DIV needs to be set to the width of the thumbnail image. This solution should work in MOS-Browsers and in IE 6 – other browsers have not been tested yet.
Last edited by jot.be (2004-09-26 11:05:01)
Offline
Re: [archived] jbe_dsimage: CSS Drop Shadow Image Plugin
Thankyou.
Stuart
In a Time of Universal Deceit
Telling the Truth is Revolutionary.
Offline
Re: [archived] jbe_dsimage: CSS Drop Shadow Image Plugin
Will this work in conjuntion with any of the galley plugins? I am using Max’s GREAT plugin 1.21. Any body combined the two?
Offline
Re: [archived] jbe_dsimage: CSS Drop Shadow Image Plugin
I did not checked my plugin if it is compatible to other gallery plugins yet.
If anybody runs into trouble with any other plugin, please post it here and I will try to fix it.
Offline
Re: [archived] jbe_dsimage: CSS Drop Shadow Image Plugin
Will check this feature for the next version. Simple alignment will not work because of “clearing” problems. But I’ll try to work around :)
Offline