縦書きCSS

mootools で縦横スライド( core のみ google.load ) を使って
縦書きを横スライドさせています。
( 何故か、縦のスライドは動きませんでした )
IE に関しては、標準モードでないと、「ー」が回転しなかったりしていますので注意です。

まず、縦書き用スタイルシート : 縦書きWebページプロジェクト - freefielder.jp
から css を取得して WEB 上に設置します。

ブログで設置できる事を確認しているものに関してはこちらを参照して下さい。

次に、縦書き変換スクリプト : 縦書きWebページプロジェクト - freefielder.jp
で通常のテキストを変換して DIV に縦と横幅を与えて、その中に変換した 
HTML をセットします。

この内容が縦に消えたり出現したりします。

ｈｔｔｐ：／／ｍｏｏｔｏｏｌｓ．ｎｅｔ／ｍｏｒｅ／　で、Ｆｘ．Ｓｌｉｄｅ　をチェックしてラ

イブラリ

をビルドして追加実装して使用します

ｌｉｎｅａｒ

Ｑｕａｄ．ｅａｓｅＩｎ／Ｑｕａｄ．ｅａｓｅＯｕｔ／Ｑｕａｄ．ｅａｓｅＩｎＯｕｔ

Ｃｕｂｉｃ．ｅａｓｅＩｎ

Ｃｕｂｉｃ．ｅａｓｅＯｕｔ

Ｃｕｂｉｃ．ｅａｓｅＩｎＯｕｔ

Ｑｕａｒｔ．ｅａｓｅＩｎ

Ｑｕａｒｔ．ｅａｓｅＯｕｔ

Ｑｕａｒｔ．ｅａｓｅＩｎＯｕｔ

Ｑｕｉｎｔ．ｅａｓｅＩｎ

Ｑｕｉｎｔ．ｅａｓｅＯｕｔ

Ｑｕｉｎｔ．ｅａｓｅＩｎＯｕｔ

Ｐｏｗ

「縦と横は必ず非表示したなら表示してから切り替え無いと。」

「動かなくなるようです。」

「以下の効果は、不規則な動きをするのでテストしてからで無いと。」

「エラーになる可能性もあります。」

ページ全体を使ったサンプル

<link type="text/css" rel="stylesheet" href="http://lightbox.on.coocan.jp/tate-style.css"/>

mootools で縦横スライド( core のみ google.load )

horizontal :

この内容が縦に消えたり出現したりします。
http://mootools.net/more/ で、Fx.Slide をチェックしてライブラリ
をビルドして追加実装して使用します

linear
Quad.easeIn or Quad.easeOut or Quad.easeInOut.
Cubic.easeIn or Cubic.easeOut or Cubic.easeInOut.
Quart.easeIn or Quart.easeOut or Quart.easeInOut.
Quint.easeIn or Quint.easeOut or Quint.easeInOut
Pow

縦と横は必ず非表示したなら表示してから切り替え無いと
動かなくなるようです。

以下の効果は、不規則な動きをするのでテストしてからで無いと
エラーになる可能性もあります

Expo.easeIn or Expo.easeOut or Expo.easeInOut.
Circ.easeIn or Circ.easeOut or Circ.easeInOut.
Sine.easeIn or Sine.easeOut or Sine.easeInOut.
Back.easeIn or Back.easeOut or Back.easeInOut.
Bounce.easeIn or Bounce.easeOut or Bounce.easeInOut.
Elastic.easeIn or Elastic.easeOut or Elastic.easeInOut

<script src="http://www.google.com/jsapi" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
google.load("mootools", "1.3.0");
</script>
<script src="http://lightbox.on.coocan.jp/js/mootools-fxSlide.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
window.addEvent('domready', function() {

	var myVerticalSlide1 = new Fx.Slide('vertical_slide', {
		duration: 500,
		transition: Fx.Transitions.linear
	});
	$('v_toggle1').addEvent('click', function(e){
		e.stop();
		if ( $('horizontal').checked ) {
			myVerticalSlide1.toggle('horizontal');
		}
		else {
			myVerticalSlide1.toggle();
		}
	});

	var myVerticalSlide2 = new Fx.Slide('vertical_slide', {
		duration: 500,
		transition: Fx.Transitions.Quad.easeIn
	});
	$('v_toggle2').addEvent('click', function(e){
		e.stop();
		if ( $('horizontal').checked ) {
			myVerticalSlide2.toggle('horizontal');
		}
		else {
			myVerticalSlide2.toggle();
		}
	});

	var myVerticalSlide3 = new Fx.Slide('vertical_slide', {
		duration: 500,
		transition: Fx.Transitions.Quad.easeOut
	});
	$('v_toggle3').addEvent('click', function(e){
		e.stop();
		if ( $('horizontal').checked ) {
			myVerticalSlide3.toggle('horizontal');
		}
		else {
			myVerticalSlide3.toggle();
		}
	});

	var myVerticalSlide4 = new Fx.Slide('vertical_slide', {
		duration: 500,
		transition: Fx.Transitions.Quad.easeInOut
	});
	$('v_toggle4').addEvent('click', function(e){
		e.stop();
		if ( $('horizontal').checked ) {
			myVerticalSlide4.toggle('horizontal');
		}
		else {
			myVerticalSlide4.toggle();
		}
	});

	var myVerticalSlide5 = new Fx.Slide('vertical_slide', {
		duration: 500,
		transition: Fx.Transitions.Pow
	});
	$('v_toggle5').addEvent('click', function(e){
		e.stop();
		if ( $('horizontal').checked ) {
			myVerticalSlide5.toggle('horizontal');
		}
		else {
			myVerticalSlide5.toggle();
		}
	});

});
</script>

<input id="v_toggle1" type="button" value="linear">
<input id="v_toggle2" type="button" value="Quad.easeIn">
<input id="v_toggle3" type="button" value="Quad.easeOut">
<input id="v_toggle4" type="button" value="Quad.easeInOut">
<input id="v_toggle5" type="button" value="Pow">
<br>
horizontal : <input id="horizontal" type="checkbox">

<pre id="vertical_slide">
この内容が縦に消えたり出現したりします。
http://mootools.net/more/ で、Fx.Slide をチェックしてライブラリ
をビルドして追加実装して使用します
</pre>

jsapi?key=APIキーを書けと Google では書かれていますが、他のサイトのキーを書いても
動いてしまうので( というか書かなくても動きます )。本来この処理でキーを書く事のメ
リットは、「問題が生じた時に Google からの連絡が可能ですよ」という内容です。他の
API では、以前「任意です」と書かれていたものもあったのですが、今は消えています

onmouseover で、画像を透過して隠していたメッセージを表示する

画像の後ろに画像でもいいと思います。

こんにちは

<div style='position:relative;height:320px;'>

<div style='position:absolute;padding:20px;font-size:20px;font-weight:bold;'>
こんにちは<br>
</div>

<img
	src="http://lh3.ggpht.com/_IzfbcNjqGuE/TPzJxQkpL5I/AAAAAAAABFQ/A4uYtKe14-0/b15architecture_exteriors014.jpg"
	style='border:solid 1px #000000;position:absolute;'
	onmouseover='
	if ( navigator.userAgent.toLowerCase().indexOf("msie") > -1 ) {
		this.style.filter="alpha(opacity=30)";
	}
	else {
		this.style.opacity=.3;
	}
	'
	onmouseout='
	if ( navigator.userAgent.toLowerCase().indexOf("msie") > -1 ) {
		this.style.filter="alpha(opacity=100)";
	}
	else {
		this.style.opacity=1;
	}
	'
>

</div>

lightbox.js の正しい設置方法

こんな感じですが、オリジナルサイトからダウンロードしたままでは
こうはならないので注意して下さい。

※ lightbox.on.coocan.jp では、rel="ligthbox_1" に変更しています

※ ダウンロードは個別に右クリックで一つづつダウンロードします


以下は、設置用のコードサンプルです。

<link rel="stylesheet" href="http://lightbox.on.coocan.jp/js/lightbox_1/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://lightbox.on.coocan.jp/js/lightbox_1/lightbox.js"></script>

<a 
	href="http://lh6.ggpht.com/_IzfbcNjqGuE/S1jkKM952HI/AAAAAAAAAPU/CheJ6YkRGPM/s720/b15architecture_exteriors014.jpg"
	rel="lightbox_1"
	title="my caption"
><img
	src="http://lh3.ggpht.com/_IzfbcNjqGuE/TPzJxQkpL5I/AAAAAAAABFQ/A4uYtKe14-0/b15architecture_exteriors014.jpg"
	style='border:solid 1px #000000;' 
></a>

まず CSS を変更します。( 追加です )
そうしないと、オリジナルページのように右下の閉じるリンクが美しくなりません

#lightbox{
	background-color:#eee;
	padding: 10px;
	border-bottom: 2px solid #666;
	border-right: 2px solid #666;
	}
#lightboxDetails{
	font-size: 0.8em;
	padding-top: 0.4em;
	}	
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both;} 
#overlay img{ border: none; }

#overlay{ background-image: url(overlay.png); }

* html #overlay{
	background-color: #333;
	back\ground-color: transparent;
	background-image: url(blank.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
}

kbd{
	color: #555;
	background-color: #ddd;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	font-size: inherit;
	font-family: inherit;
	padding: 0 3px 2px 4px;
}

#keyboardMsg a {
	font-weight: bold;
	color: #303030;
	text-decoration: none;
}

あと、当然ですが、.js 内の画像の URL はホスティングしている場所を
http から記述する必要があります。

var loadingImage = 'http://lightbox.on.coocan.jp/js/lightbox_1/loading.gif';
var closeButton = 'http://lightbox.on.coocan.jp/js/lightbox_1/close.gif';

lightbox.js には、バージョン2 があって、そちらはアニメーションする上に
複数の画像をギャラリーとして表示できます。

関連する記事

Facebox v1.3 の正しい設置方法と使用方法

クリックした部分の HTML をウインドウを開いてテキストエリアで表示する

一番のボイントは、window.open したものをそのまま使って document.write 
するところです。

<pre
	onclick='window.open("about:blank","","width=600,height=450")
		.document.write("<textarea cols=70 rows=20>"
		+(this.innerHTML)
		+"</textarea>");'
	style='cursor:pointer'
>
<img
	src="http://lh3.ggpht.com/_IzfbcNjqGuE/S7p-TD-MTcI/AAAAAAAAASc/S9yjZQj2u1s/s720/b17geoff_vane028.jpg"
	width="20%"
>

この <b>PRE</b> の内容がテキストエリアに
HTML として転送されます
</pre>

この PRE の内容がテキストエリアに
HTML として転送されます