Joomla 1.5の管理画面で、画像を挿入する時や、記事をプレビューする時に開くポップアップがありますが、SqueezeBoxというみたいです。これがSqueezeBoxのデモです。

この機能をJoomlaサイトのフロントエンドで使う方法がJoomlaフォーラムに紹介されていました。

SqueezeBoxはjavascriptsを使って表示しているので、テンプレートのheadタグ内に以下のように記述し、javascriptsを読み込みます。

　<script type="text/javascript" src="/../includes/js/joomla.javascript.js"></script>
<script type="text/javascript" src="/media/system/js/mootools.js"></script>
<script type="text/javascript" src="/media/system/js/modal.js"></script>
<script type="text/javascript">
// <!--
window.addEvent('domready', function(){ var Jtooltips = new Tips($$('.hasTip'), { maxTitleChars: 50, fixed: 'false'}); });
// -->
</script>
<script type="text/javascript">
// <!--

window.addEvent('domready', function() {

SqueezeBox.initialize({});

$$('a.modal').each(function(el) {
el.addEvent('click', function(e) {
new Event(e).stop();
SqueezeBox.fromElement(el);
});
});
});
// -->
</script>
<link rel="stylesheet" href="/media/system/css/modal.css" type="text/css" />

そして、SqueezeBoxを表示させたいリンク・画像等に、以下のように記述します。

<a class="modal" href="/images/stories/画像ファイル" rel="SqueezeBox">

これで見た目もクールなポップアップ・ウィンドウが出来上がります。コードを記述するのがちょっと面倒くさいですけどね

< 前		次 >