クリックポップアップ画像
『クリックポップアップ見本』
（画像をクリックすると大きな画像がポップアップされて開きます。ポップアップされた画像を閉じるには今度は大きな画像をクリックして下さい。）
1.管理画面の環境設定からテンプレートの設定→[編集]→HTMLの編集を開きます。
2.開いたら上の方にある</head><body>を探します。見つからない時は「Ctrl+F」を使って検索すると探しやすいと思います。
見つかったら</head>のすぐ上に以下のソースをコピーして張り付けます。
張り付けたら「更新」をクリックします。<script language="JavaScript">
<!--
function popupImage(filepath, width, height){
var y = 0;
var x = 0;
if (!popupImage.imgNode) {
if (document.all) {
y = document.body.scrollTop + 32;
x = document.body.scrollLeft + 32;
popupImage.imgNode = document.createElement('img');
popupImage.imgNode.attachEvent('onclick', closeImage);
} else if (document.implementation) {
y = window.pageYOffset + 32;
x = window.pageXOffset + 32;
popupImage.imgNode = document.createElement('img');
popupImage.imgNode.addEventListener('click' ,closeImage , true);
} else {
return;
}
}
with(popupImage){
imgNode.setAttribute('src', filepath );
if (width && height) {
imgNode.setAttribute('width', width );
imgNode.setAttribute('height', height );
}
imgNode.style.position = 'absolute';
imgNode.style.left = '32px';
imgNode.style.top = y + 'px';
imgNode.style.borderColor = '#0099FF';
imgNode.style.borderWidth = '2px';
imgNode.style.borderStyle = 'solid';
imgNode.style.margin = '0';
document.body.appendChild(imgNode);
}
function closeImage(){
if (popupImage.imgNode) {
document.body.removeChild(popupImage.imgNode);
delete popupImage.imgNode;
}
}
}
// -->
</script>
3.次に記事を作る画面で画像を作る時に、
横幅・縦幅は小さい時（最初の状態）に表示したいサイズです。
4.これでいつもの様に記事を作って保存すればクリックポップアップ画像の出来上がりです。
- 参考サイト ； web.paulownia.jp
- 関連記事 ； 面白い画像の見せ方をするには？
- 関連記事 ； Lightbox JS v2.0
- 関連記事 ； 画像カタログ
- 関連記事 ； CSSポップアップ画像
|
｜
｜- 大きな疑問コーナー |
- Comment (0) |
- Trackback (0) |
- ▲
http://rgrg.blog61.fc2.com/tb.php/593-49efd8e5
』をクリックするとメニューが開きます。
