受験がテーマのWEB漫画をおいてます〜。共有テンプレート・共有プラグインも製作しています。共有テンプレート・共有プラグインのページにて作者名「rainbow」と検索してください。

共有プラグインに登録しました。

テンプレートに付属していた画像ポップアップ機能を、プラグインに切り離すことにしました。これでプラグインをつけておけば、他のテンプレートでも機能が使えるようになります。

今までの画像ポップアップ機能つきテンプレートをお使いの方はこのプラグインを新たにつける必要はありません。また、画像ポップアップ機能つきテンプレートにこのプラグインをつけるとうまく作動しなくなるのでご注意ください。

【2007/04/02 00:31】 | 共有テンプレート
トラックバック(0) |


くまっ子
すごい素敵です♪
でも、画像ポップアップのサイズはどうやったらかわるのですか?
使用してみたら、元の画像と同じサイズでしかでてこなかったので・・・><
詳しく教えてくださ〜い><


斎七
>>くまっ子さん
使っていただき、ありがとうございます。

画像アップロードで大きな画像をサムネイルサイズにしている場合には、大きな画像がでてくるようになります。(元の画像が小さいときは小さい画像がでてきます)

管理者ページより、環境設定の変更→ブログの設定→ブログ管理の設定のところに「サムネイル設定(デフォルト値) 」とあるので、こちらもチェックしてみてくださいませ。

また何かありましたらよろしくお願いします。

はじめまして
kei
プラグインで素敵なものを作ってくださって嬉しいです(*^_^*)

早速使わせていただいておりますが、1つのエントリーの中で画像を数枚使っているとマウスを動かすたびに画像が開いてしまうので出来たらクリックで開くようにしたいのですが出来ますでしょうか?


斎七
>>keiさん
コメントありがとうございます。

申し訳ありませんが、僕の技量不足でできません。研究してみたいと思います。

また、スクリプトの参考元のサイト(http://web.paulownia.jp/script/sample/popup.html)ではkeiさんの要望に近い形がありますのでそちらも合わせてご覧くださいませ。


kei
お忙しいのにお返事ありがとうございました♪
リンクしてくださったサイトで検討してみたいと思います。
ありがとうございました〜m(__)m


Macco
初めまして!
すばらしいプラグインありがとうございます。

私も早速ダウンロードさせて戴いたのですが、ポップアップ画像がサイトの上部に表示されてしまってスクロールしないと見れない状態で困っています。

これをサムネイル画像付近やスクロールしないで済む範囲に表示させることは可能でしょうか。
ちなみにプラグインはダウンロードしてからいじっていません。

追記折りたたみしてるからでしょうか・・・
追記部分でない画像もTOP画像に重なって見えるようです。
解決策があればご教授願います(*ノノ)


つなさらだ
お世話になっていまぁーす。
明日の夜試験が終わるので、そうしたら、うちのブログの再設定をする予定です。
そのときから、うちもこの青空のお世話になる予定です。
よろしくぅ。


斎七
>>Maccoさん
コメントありがとうございます。

問題点はDOCTYPE宣言での標準モードと互換モードでした。修正して再アップしたいと思います。重要なご指摘ありがとうございました。

もしすぐに使用したい場合は下記を、プラグインのHTML編集画面にてお入れ替えください。お手数おかけして申し訳ありません。また何かありましたらお知らせくださいませ。



<script type="text/javascript" language="javascript">
<!--
document.open();
document.write("マウスを画像に合わせるとポップアップし、マウスを外すかクリックすると画像が消えます。");
document.close();
// -->
</script>

<br><small>
<a href="http://rainbowmaterial.blog59.fc2.com/">斎七@虹のもとブログ</a>
</small>

<script language="javascript" type="text/javascript">
//画像ポップアップスクリプト(斎七@虹のもとブログ)
//http://rainbowmaterial.blog59.fc2.com/
//
//ポップアップイメージは下記を参考にしました。
//http://web.paulownia.jp/script/sample/popup.html
//オブジェクト指向JavaScript - 大きな画像をポップアップ
//(Paulownia's Web Studio)
//
//ポップアップイメージのサポートスクリプトは下記を参考にしました。
//http://pc8.2ch.net/test/read.cgi/hp/1141800978/483
//Web制作 / 手とり足とり教えるJavaScriptスレpart2
<!--
function popupImage(filepath){
var y = 0;
if (document.all && !window.opera) {
y = document.documentElement.scrollTop + document.body.scrollTop + 30;

if(!popupImage.imgNode){
popupImage.imgNode = document.createElement('img');
popupImage.imgNode.setAttribute( 'src' , filepath );
popupImage.imgNode.onmouseout = closeImage;
popupImage.imgNode.onclick = closeImage;

}
} else if( window.opera ) {
y = document.body.scrollTop + 30;

if(!popupImage.imgNode){
popupImage.imgNode = document.createElement('img');
popupImage.imgNode.setAttribute( 'src' , filepath );
popupImage.imgNode.onmouseout = closeImage;
popupImage.imgNode.onclick = closeImage;

}

} else if( document.implementation) {
y = window.pageYOffset + 50;


if(!popupImage.imgNode){
popupImage.imgNode = document.createElement('img');
popupImage.imgNode.setAttribute( 'src' , filepath );
popupImage.imgNode.addEventListener('mouseout' ,closeImage , true);
popupImage.imgNode.addEventListener('click' ,closeImage , true);
}
} else {
return false;
}

with(popupImage){
imgNode.style.position = 'absolute';
imgNode.style.zIndex = '9';
imgNode.style.left = '100px';
imgNode.style.top = y + 'px';
imgNode.style.borderColor = 'black';
imgNode.style.borderWidth = '1px';
imgNode.style.borderStyle = 'solid';
imgNode.style.margin = '0';
document.body.appendChild(imgNode);
}

function closeImage(){
if (popupImage.imgNode) {
document.body.removeChild(popupImage.imgNode);
popupImage.imgNode = null;
}
}
}

function myfunc(){
var a=document.links,L=a.length;
for(var i=0;i<L;i++){
if(a[i].href.match(/(jpg|png|gif)$/i)){

a[i].onmouseover=function(){
popupImage(this.href);
}
}
}
}

window.onload = function()
{
myfunc();
}
//-->
</script>


斎七
>>つなさらださん
ついにきましたね!ベストを尽くせるようお祈りしてます!
テンプレで気分もリフレッシュできたら僕も嬉しいです〜。今後ともよろしくです!


Macco
お返事ありがとうございます。
早速入れ替えさせていただきました。
そしたらスクロールせずに元画像が表示されました!
改めて、素晴らしいプラグインをありがとうございます!!
テンション上がりまくりでどうしましょ(ノ∀`*)
本当にありがとうございました!!!


斎七
>>Maccoさん
ちゃんと動いてくれたようで嬉しいです。今回僕も勉強になりました。ありがとうございます。

Maccoさんのブログライフが素敵なものになりますように!

コメントを閉じる▲