減量中・・・・

私もメタボ・・・・減量しなくてはいけないのですが

減量しているのはJavaScriptです・・・

外部リンクアイコンが邪魔・・・・

っていうひどいプチメをいただきまして(笑) ←すっげ～、(笑)こんなの使ったの初めてですね

あと、文字数制限に引っかかった方もおられるようで・・・

Thickboxだけのために減量作業をしています

すっぴんバージョンが出来るまで

いま少しおまちください

別サーバーを用意できてLightbox関係のファイルを置ける方は
Lightboxも使うことが出来ます
お試しください　　・・・・って、すっぴんバージョンが出来てからのがいいと思いますが

↓ここで写真をクリックしてみてください
http://ameblo.jp/exlink001/entry-10085199689.html

写真の右半分でクリックすると次の写真へ
左半分でクリックすると前の写真へ
Thickboxよりかっこいいエフェクトがうらやましいです・・・
アメブロさ～ん・・・こっちがいいです！！

Thickbox グループ化

Thickboxで写真をグループ化して表示するには<a>タグのrel属性にグループ名を指定します

１つの記事に何枚もの画像を貼り付けていてもグループ化しない場合はなにもする必要はありません

ただし、その場合もタイトルを変更する場合は↓青字部分を変更下さい

<a href="http://stat.ameba.jp/user_images/10/1a/10037807760.jpg " target="_blank" rel="gn0403"><img height="165" alt="image1" src="http://stat.ameba.jp/user_images/10/1a/10037807760_s.jpg " width="220" border="0" /></a>

<a href="http://stat.ameba.jp/user_images/36/57/10037807761.jpg " target="_blank" rel="gn0403"><img height="165" alt="image2" src="http://stat.ameba.jp/user_images/36/57/10037807761_s.jpg " width="220" border="0" /></a>

<a href="http://stat.ameba.jp/user_images/e7/71/10037807762.jpg " target="_blank" rel="gn0403"><img height="165" alt="image3" src="http://stat.ameba.jp/user_images/e7/71/10037807762_s.jpg " width="220" border="0" /></a>

グループ化はHTMLタグを表示にして　<a>タグ内にrel="gn0403" rel="グループ名"を加えてください

タイトルを変更する場合は（↓下の写真の「水元公園1」の部分）青字のait部分を変更下さい

※altで付くタイトルは画像フォルダーにアップしたときのタイトルになります

　アップしたときにタイトルをつけていない場合は「タイトル未設定」がタイトルに・・・・

　また携帯からアップしたときは「日付データ.jpg」がタイトルになりますのでPCから変更下さい

alt="●●"がない場合は書き加えてください

逆に付けたくない場合は削除すればタイトルは付きません

1つのページ内に複数のグループ名を指定することもできますので

記事ごとに違うグループ名を付けてください

あるいは１つの記事内でいくつかのグループに分けることも可能です

※グループにしてもグループにしていない場合のように普通に１枚、１枚見ることは可能です

　グループにしておくと いちいち、画像を閉じなくても次の画像あるいは前の画像を見ることが出来ます

グループ名の数には制限がないのでいくつでもどうぞ

（グループ名はグループでそろっていれば適当でかまいません

・・・gn0403　は、グループネーム４月３日 って勝手につけたんです、自分でわかればＯＫです

適当につけて自分でわからなくても、表示されるページ内で他のグループとダブっていなければＯＫ）

Thickbox 旧バージョンになりました

現在、余計な部分を外し、エラー回避して小さくなったすっぴんバージョンを配布しています

そちらをご利用下さい　　　　すっぴんバージョン

すっぴんバージョン＋コメント部分を管理人とゲストに分けるのを付け加えた

自分のコメントを ”もっと” わかりやすく

Thickboxとコメント背景の両方を使用する場合は↑コチラを使用下さい

※必ず現在のフリープラグインをコピー保存した上で試してください

※アメブロにすでに導入されているthickboxおよびcssを利用していますので仕様が違っている可能性があります

※呼び出される画像は画面にあわせて縮小される場合があります

注意！フリープラグインには3800字の文字数制限があります

これがThickboxです↓クリックしてみてください

フリープラグインにそのままコピペしてください

<link href="http://stat.ameba.jp/blog/ucs/css/common/thickbox.css " rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="http://blog.ameba.jp/ucs/js/editor/selectimage.js"></script >
<script type="text/javascript" language="javascript" src="http://blog.ameba.jp/ucs/js/common/jquery.js"></script >
<script type="text/javascript" language="javascript" src="http://blog.ameba.jp/ucs/js/common/thickbox.js"></script >
<SCRIPT LANGUAGE="JavaScript">
<!--
/* http://ameblo.jp/exlink/ */
function exlink(){
var myHost = "ameb";
var myArea = "entry";
var exLink = "<img src='http://emoji.ameba.jp/img/user/ex/exlink/372598.gif' width='11' height='10' alt='外部リンク' title='新しいウインドウで開きます'>";
var yesNW = "ynw",myLimit = 300,myLink,myFlg=0,myNW,linkIcon,k=1,i,j;
var ourl = "http://ameblo.jp/public/image/displayimage.do?imagePath="
var nurl = "http://stat.ameba.jp"
var backTop = function(){backToTop(); return false;}
var myLinks = document.getElementsByTagName("a");
for(i = 0; i < myLinks.length; i++){
var myLink = myLinks[i];
if(myLink.href.indexOf("do?imagePath") > 0){
myLink.href = (myLink.href).replace(ourl,nurl);
myLink.className = "thickbox";
var myTitle = myLink.childNodes[0].getAttribute("alt"); myLink.setAttribute("title",myTitle);}
else if(!myLink.innerHTML.match(/<img/i) && myLink.href != ""&& myLink.href.indexOf("javascript") < 0){
if (myLink.className == yesNW){
myFlg = 1;
linkIcon = exLink;
} else if (myLink.href.indexOf(myHost) == -1 && myArea == "") {
myFlg = 1;
linkIcon = exLink;
}
if(myFlg == 1){
myNW = document.createElement("a");
myNW.innerHTML = linkIcon;
myNW.href = myLink.href;
myNW.target = "_blank";
myLink.parentNode.insertBefore(myNW,myLink.nextSibling);
myFlg = 0;
i++;
}}
k++;
if (k > myLimit) {break;}}}
window.onload = function(){exlink();initializeUpload(false, false);checkpw();}
// -->
</SCRIPT>

画像の追加で貼り付けるだけです

class="thickbox"は必要ありませんjavascriptが自動でつけます

画像フォルダでつけたタイトルが自動でつきます

※テキストからのリンクは動作しません

<a href="画像のURL" target="_blank">画像はココをクリック</a>

コレが１つでもあるとそのページ全部でthickboxが動作しません

表示を確認するでは動作しません

公開されてから動作します

・・・・質問いただいても

　　　　　　　答える自信ないっす・・・・

　　　　　　　　　　ご自分の責任において試してください　m(_ _)m

うまくいった・・・動かなかった・・・・　の、コメントだけでもカキコ頂けると助かります

　　　　　　　　　　　　　　　　　　　　　　　　　　　　画像のグループ化につづく・・・・・