Home > FC2ブログ > プラグイン > Gallery 共有プラグイン 画像やテキストをランダムで表示

Gallery 共有プラグイン 画像やテキストをランダムで表示

 画像やテキストをランダムで表示するプラグインです。表示件数の変更、追加などの設定ができます。

 リンク先を指定すればサムネイルや商品画像のクリックでジャンプすることも可能です。

配布スクリプトコード

 設置したい場所に次のコードを貼り付けてください。FC2ブログのプラグインに追加するときは公式プラグインのフリーエリアをダウンロードしてHTMLに貼り付けてください。※既に共有プラグインからダウンロードしている場合は必要ありません。

 最初にある以下のimg要素は動作しなかった時のデフォルトの画像です。
 差し替えても構いませんし、削除しても問題はありません。

<img id="kizImg" src="http://blog-imgs-62.fc2.com/f/c/2/fc2blogtemplates/imggn1.jpg" alt="" width="160" height="230" />

 FC2ブログ以外のサイトに設置する時は画像をすべて別のものに差し替えてください

表示件数の変更

 一度に表示させる件数は次の所で指定できます。

2 ],// 表示件数(半角数字)

 「2」を「1」に変更すれば1件だけ表示されます。

1 ],// 表示件数(半角数字)

画像を変更・追加する

 アドレスを入れ替えるとその画像が表示されます。

 img : [
['http://blog-imgs-62.fc2.com/f/c/2/fc2blogtemplates/imggn1.jpg', ""],
['入れ替え', ""],
['http://blog-imgs-62.fc2.com/f/c/2/fc2blogtemplates/imggn3.jpg', ""],
['http://blog-imgs-62.fc2.com/f/c/2/fc2blogtemplates/imggn4.jpg', ""],
['http://blog-imgs-62.fc2.com/f/c/2/fc2blogtemplates/imggn5.jpg', ""],
['http://blog-imgs-62.fc2.com/f/c/2/fc2blogtemplates/imggn6.jpg', ""],

 必要のない画像は削除することで表示されなくなります。

 img : [
['http://blog-imgs-62.fc2.com/f/c/2/fc2blogtemplates/imggn1.jpg', ""],
['http://blog-imgs-62.fc2.com/f/c/2/fc2blogtemplates/imggn3.jpg', ""],
['http://blog-imgs-62.fc2.com/f/c/2/fc2blogtemplates/imggn6.jpg', ""],

 画像を追加する時は「['画像アドレス', ""],」を加えます。末尾の「,」を忘れないようにしてください。

['http://blog-imgs-62.fc2.com/f/c/2/fc2blogtemplates/imggn5.jpg', ""],
['http://blog-imgs-62.fc2.com/f/c/2/fc2blogtemplates/imggn6.jpg', ""],
['新しい画像アドレス', ""],

テキストのみを表示

 最初の画像アドレスを空っぽにして「""」の間に表示したいテキストを入れます。次のようにするとテキストを使ったおみくじになります。名言やことわざを入れてもいいでしょう。

 img : [
['', "大吉"],
['', "中吉"],
['', "小吉"],
['', "末吉"],
['', "凶"],
['', "大凶"],

画像にテキストを添えて表示

 その画像の後にある「""」の間に表示したいテキストを入れると画像の下にテキストが表示されます。

 img : [
['http://blog-imgs-62.fc2.com/f/c/2/fc2blogtemplates/imggn1.jpg', "空きれい"],
['http://blog-imgs-62.fc2.com/f/c/2/fc2blogtemplates/imggn2.jpg', "一日一善"],
['http://blog-imgs-62.fc2.com/f/c/2/fc2blogtemplates/imggn3.jpg', "ここはどこでしょう?"],

 見難い時はカンマの後に改行を入れても構いません。

 img : [
['http://blog-imgs-62.fc2.com/f/c/2/fc2blogtemplates/imggn1.jpg',
 "空きれい"],
['http://blog-imgs-62.fc2.com/f/c/2/fc2blogtemplates/imggn2.jpg',
 "一日一善"],
['http://blog-imgs-62.fc2.com/f/c/2/fc2blogtemplates/imggn3.jpg',
 "ここはどこでしょう?"],

リンクをつける

 「]」の前に「,'リンク先URL'」を追加するとリンクが付きます。テキストのみの場合も同様です。

['http://blog-imgs-62.fc2.com/f/c/2/fc2blogtemplates/imggn1.jpg', "", 'URL'],

●画像をクリックするとYahoo!トップページにジャンプ
['画像アドレス', "", 'http://www.yahoo.co.jp/'],

●テキストをクリックするとYahoo!トップページにジャンプ
['', "Yahoo! JAPAN", 'http://www.yahoo.co.jp/'],

 URLが見難いときはカンマの後で改行しても構いません。

['画像アドレス', "",
 'http://www.yahoo.co.jp/'],

 リンク先を別ウインドウで開く時はURLの後に「 (半角スペース)_blank」を追加します。

['画像アドレス', "", 'http://www.yahoo.co.jp/ _blank'],

レイアウト・デザインについて

画像が大きすぎる時は

 styleの「#kizGallery .kizImg img」に「max-width: 数値px !important;」を追加して調整してください。数値には設置する場所の横幅より小さい値を入れます。

#kizGallery .kizImg img {
 margin: 3px 0 8px; padding: 5px;
 border: 1px #ddd solid; background: #fff;
 box-shadow: 1px 2px 3px 1px rgba(120,120,120,0.1);
 max-width: 140px !important;
}

画像の枠線のスタイル

 「#ddd」が線の色、「#fff」が線の内側の背景色です。

#kizGallery .kizImg img {
 margin: 3px 0 8px; padding: 5px;
 border: 1px #ddd solid; background: #fff;
 box-shadow: 1px 2px 3px 1px rgba(120,120,120,0.1);
}

画像のみの並び

 画像の横幅と高さをすべて同じにしてテキストを挿入せず、以下のstyleを追加すれば画像がキレイに並びます。

#kizGallery .kizImg {display: inline; margin: 0 5px 0 0;}

テキストのスタイル

 テキストを左寄せにするにはstyleの「#kizGallery .kizImg p」の「center」を「left」に変更します。

#kizGallery .kizImg p {text-align: left; margin: 1px 0 1em;}

 テキストの文字サイズや色を変更する時は「font-size: 11px;」「color: #088;」を追加してください。

#kizGallery .kizImg p {
 text-align: center; margin: 1px 0 1em;
 font-size: 11px; /* 文字サイズ */
 color: #088; /* 文字色 */

}

スタイルが反映されない時は

 スタイルを丸ごと以下に変更してください。「!important」を付けます。

<style type="text/css"><!--
.kizGallery {text-align: center !important;}
.kizImg p {text-align: center !important; margin: 1px 0 1em !important;}
.kizImg img {
 margin: 3px 0 8px !important; padding: 5px !important;
 border: 1px #ddd solid !important; background: #fff !important;
 box-shadow: 1px 2px 3px 1px rgba(120,120,120,0.1) !important;
}
.kizImg a:hover img{opacity: 0.6 !important;filter: alpha(opacity=60) !important;}

--></style>

複数設置する

 設置する場所の中で最初に読み込まれる所に配布スクリプトコードを設置。次のコードを2つ目の設置場所に貼り付けます。

<div id="kizGallery2" class="kizGallery">
<script type="text/javascript">
kizGallery.rnd(kizGallery.img,'kizGallery2');
</script>
</div>

 3つ目、4つ目と増やす時は合わせてkizGalleryの番号も増やしていってください。

●3カ所目
<div id="kizGallery3" class="kizGallery">
<script type="text/javascript">
kizGallery.rnd(kizGallery.img,'kizGallery3');
</script>
</div>

●4カ所目
<div id="kizGallery4">
<script type="text/javascript">
kizGallery.rnd(kizGallery.img,'kizGallery4');
</script>
</div>

 画像・テキストのリストは重複しないように表示されるため、リストの件数より設置数が多くなってしまうと表示されなくなるのでご注意ください。

設置する場所によってリストを変更したい時

 複数設置した各script要素を以下のように変更してください。

<div id="kizGallery2" class="kizGallery">
<script type="text/javascript">
kizGallery.img2 = [
['2つ目で表示する画像', ""],
['2つ目で表示する画像', ""],
['2つ目で表示する画像', ""],

2];//2つ目の表示件数

kizGallery.rnd(kizGallery.img2,'kizGallery2');
</script>
</div>

 3つ目、4つ目も個別に設定する時は合わせて番号を増やしていってください。

<div id="kizGallery3" class="kizGallery">
<script type="text/javascript">
kizGallery.img3 = [
['3つ目で表示する画像', ""],
['3つ目で表示する画像', ""],
['3つ目で表示する画像', ""],

2];//3つ目の表示件数
kizGallery.rnd(kizGallery.img3,'kizGallery3');
</script>
</div>

scriptを外部jsに

 画像を頻繁に指定し直す時は一部だけをjsファイルに移します。

 設置場所のscript要素内を以下に変更。

<script type="text/javascript"><!--
kizGallery.img = [
['http://blog-imgs-62.fc2.com/f/c/2/fc2blogtemplates/imggn1.jpg', ""],
['http://blog-imgs-62.fc2.com/f/c/2/fc2blogtemplates/imggn2.jpg', ""],
['http://blog-imgs-62.fc2.com/f/c/2/fc2blogtemplates/imggn3.jpg', ""],
['http://blog-imgs-62.fc2.com/f/c/2/fc2blogtemplates/imggn4.jpg', ""],
['http://blog-imgs-62.fc2.com/f/c/2/fc2blogtemplates/imggn5.jpg', ""],
['http://blog-imgs-62.fc2.com/f/c/2/fc2blogtemplates/imggn6.jpg', ""],

2 ];// 表示件数(半角数字)

kizGallery.rnd(kizGallery.img,'kizGallery');
--></script>

 headに置くjsファイル内に以下を記述。

var kizGallery = {
 rnd : function(list,g){
  var d=document,kg=d.getElementById(g),kw=kg.clientWidth||kg.offsetWidth,i,len=list.length-1,flg=list[len]-1,k=d.getElementById('kizImg');if(k){k.parentNode.removeChild(k);}
  for(i=0;i!==len;i++){
   var div=d.createElement('div'),no=Math.floor(Math.random()*(list.length-1)),elm=list[no],p=0,as,ac=0,img=0,nt;div.className='kizImg';
   if(elm[0]){img=d.createElement('img');img.src=elm[0];if(kw){img.style.cssText='max-width:'+(kw-14)+'px;height:auto;';}nt=img;}
   if(elm[2]){ac=d.createElement('a');as=elm[2].split(' ');ac.href=as[0];if(as.length!==1){ac.target=as[1];}}
   if(img){if(ac){ac.appendChild(img);nt=ac;}div.appendChild(nt);}
   if(elm[1]){p=d.createElement('p');if(ac&&!img){ac.innerHTML=elm[1];p.appendChild(ac);}else{p.innerHTML=elm[1];}div.appendChild(p);}
   kg.appendChild(div);list.splice(no,1);if(i==flg){break;}
  }
 }
};

配布スクリプトコード2

 起点のみランダムで、画像などを順番に表示していきます。設置したい場所に次のコードを貼り付けてください。『Gallery』プラグインを既に利用している場合は入れ替えてください。設置サンプルはこのブログのサイドバーにある「Gallery」の2つ目の画像です。

 切り替わるタイミングは「3000」の数値を増減させて指定します。「tim: 5000,」にすると5秒後に切り替わります。

 表示件数は1件固定です。複数設置する時は「複数設置する:設置する場所によってリストを変更したい時」のように設置します。

 FC2ブログ以外のサイトに設置する時は画像をすべて別のものに差し替えてください


ログ

  • 13-10-21
    コード2追加
  • 13-08-21
    記事公開

 不具合等があればコメントにてご連絡ください。プロフィールに書かれている通り、コードの転載・再配布はご遠慮ください。カスタマイズ後も同様です。noscript要素については削除しても構いませんが、当サイトへのリンクをどこかに入れてもらえれば嬉しいです(強制ではありません)。

関連記事
スポンサー リンク
コメント
#11 : No title
画像を説明の通りに差し替えたんですが、ランダムに動きません。
一枚目の画像のまま止まったままなんですが、何かやり方がまずかったんでしょうか?
かなり初心者なんで不安な状況です・・・・(・・;)

一枚で4枚ランダムに変わるようにしたいんですが・・・・やり方間違ってますか?
数字は一応1に変更してやりました。

<script type="text/javascript"><!--
var kizGallery = {
img : [
['http://blog-imgs-50.fc2.com/k/i/c/kichan1130/shinee5.jpg', "★Temin★"],
['http://blog-imgs-50.fc2.com/k/i/c/kichan1130/temin9.jpg', "★Temin2★"],
['http://blog-imgs-50.fc2.com/k/i/c/kichan1130/temin7.jpg', "★Temin3★"],
['http://blog-imgs-50.fc2.com/k/i/c/kichan1130/temin9.jpg', "★Temin4★"],
['', ""],
['', ""],

解答お願いできれば嬉しいですm(__)m
#18 : ランダムに動かす
コンバンハ。
スライドのように順々に表示させていくということでしょうか?
このプラグインはページを表示(更新)する度にランダムで画像などが入れ替わるものなのでそういった機能は付けておりません。
その場でランダムに変更すると、連続あるいは短い間隔で同じ画像が表示される可能性があり、それを回避しよとすると結局は順番が固定化されてしまうということもありますが…。

やっつけですがその場で画像を連続して表示するスクリプトに改良してみました。
このページの配布スクリプトコード2にあるコードをコピーしてプラグインの中身と入れ替えてください。今使っているものはコピーしてメモ帳などにバックアップして、入れ替えたコードにファイル記述部分を上書き貼り付けすればOKです。
サンプルはサイドバーのGalleryサンプルの2つ目の画像です。
もし意図が異なる場合や不具合がある時はお知らせ下さいませ。
#82 : 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
#85 : サンプル画像の削除
コンニチハ。
img : [ ],の中にあるサンプル画像ファイルのアドレス
['http://blog-imgs-62.fc2.com/f/c/2/fc2blogtemplates/imggn1.jpg'"",],
…などをすべて削除すればサンプル画像が表示されることはございません。
複数設置している場合はそちらにもアドレスが残っていないかをご確認ください。

画像指定部分を下記1行だけにすればFollow Me!の画像のみが表示されます。
img : [
['http://static.fc2.com/image/sh_design/duck_followme02.png', ""],

/* 画像・テキストを追加する時は次の形式で↑に追加
['画像アドレス', "テキスト(空欄可)"],
*/

サンプル画像のアドレスを指定した[ ],の部分が一切ないのにまだ表示されている場合は、ブラウザ側のキャッシュかサーバー側のキャッシュが原因で正常に更新が反映されていないものと思われます。
その場合はブログページを開いた状態で「Ctrl+F5キー」を押して更新(あるいいはブラウザのキャッシュを削除)し、時間を置くことで正常に表示されるようになるかと思います。

このブログのサイドバーにあるサンプルの一つ目の画像を以下のように指定してみました。 デフォルトのサンプル画像は一つ目に一切表示されていないかと思います。
img : [
['http://static.fc2.com/image/sh_design/duck_followme02.png', ""],
['http://blog-imgs-1.fc2.com/image/icon_main/blog_service_icon.png', ""],
['http://blog-imgs-1.fc2.com/share/fc2parts/image/fc2logo.png', ""],
※FC2ブログの仕様上、プレビューの状態では正常に表示されない場合もあります。
#95 : No title
初めまして。

「こう云うことがやりたかった」まさにそう云うプラグインでした。
使わせていただきたいと思います。有難うございます。

今のところ、未だ、見つけたばかり…で、内容変更していない
状態です。

もし、できれば将来的にこうして欲しいなぁ~なんて希望ですが

①画像変更が、もう少し、ジンワリ、ゆっくりとした動作にして
いただくことは無理でしょうか?

②「Mosaic」→http://buildinternet.com/project/mosaic/1.0/
のような効果を入れていただくのは、難しいでしょうか?

以上、勝手なことを書き連らねました。失礼しました。

JUGEMから引っ越してきて、まだFC2のテンプレには
慣れていないのですが、今お借りしているテンプレが
偶然、こちらの作者さん制作だったようです。
高機能すぎて、まだカスタマイズできず・・・
こちらの方も、もし相談にのっていただけると嬉しいです。

#98 : Gallery-Slideプラグイン作成
ハジメマシテ。
画像変更というと配布スクリプトコード2のことでしょうか?
その場で画像が入れ替わるGallery-Slideプラグインを新たに作成致しましたのでURL先をお試しください。
共有申請には時間を要するので先に記事を公開致しました。
Gallery-Slideプラグインの中身をGalleryプラグインに上書きしてください。

「basic_white」はFC2さん制作の公式テンプレートとなります。
このブログはFC2公式テンプレートのカスタマイズをご紹介するブログですので、カスタマイズにあたってどうしてもわからない点がございましたら
●basic_white テンプレート 基本的なデザインのカスタマイズ・変更
http://fc2blogtemplate.com/blog-entry-2.html
などにお気軽にコメントくださいませ。
ただ時間に余裕がない場合は返信に時間を頂く場合がございますのでご了承ください。
#181 : 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
#186 : Re: プラグインの使い方
コンバンハ。
返信が遅くなり申し訳ございません。
既に必要ないかもしれませんが、一応、確認した時の状態での回答を掲載しておきます。

['画像アドレス', ""'リンク'],
というように設定されており、2つ目の「,」が抜けていたため、正常に動作しなかったものと思われます。
正しい形式は以下の通りです。
['画像アドレス', "",'リンク'],

また画像やリンクがない場合は行ごと削除してください。
削除['', ""],
表示件数は表示する画像よりも少ない数を指定します。
少なくとも画像は2件以上設定する必要がございます。
#197 : お願い
はじめまして。

探していたプラグインに非常に近いものだったので、早速ダウンロードさせていただきました。
ありがとうございました。

ひとつ質問なのですが、ページの更新ごと、時間の経過ごとではなく、ボタンやリンクをクリックすると画像をランダムに表示する変更も可能なのでしょうか?

もし可能であれば、お手数ですが、お教えいただけないでしょうか。
図々しいとは承知していますが、是非お願いします。
#222 : No title
はじめまして

『Gallery 共有プラグイン 画像やテキストをランダムで表示』

使わさせていいただきました。

お陰様で ブログのトップ画像が ランダムで表示することができました。

有難うございます。
#230 : No title
はじめまして。
プラグインを有り難く使わせてもらっています。

質問なんですが、
複数設置した場合、2つ目が横並びではなく縦並びになるのですが、
横並びにするにはどうすればいいですか?
#309 : 画像をLightBoxに渡すには
はじめまして、私も質問がありますがよろしいでしょうか。
画像を表示してリンクもしているんですが、リンクのタグに特定の文字列を追加するにはどうすればいいでしょうか? 具体的にはブログにLightBoxを導入しているのですが、画像をLightBoxに渡して表示したいです。リンクにrel="lightbox[グループ名] を付け足すことでLightBoxで表示することができるのですがどうしたらよいのでしょう?

よろしくお願いします。
#313 : 質問です
【Gallery 共有プラグイン 画像やテキストをランダムで表示】まさに、今必要としているプラグインであり、有り難く使用させて頂こうと思い、ダウンロード致しました。

説明文にもあるように、HTMLを弄ってみたのですが…。

まず、元からあるサンプル画像の画像URLを変更したい画像のURLに変えてもサンプル画像のまま変更されません。

また、表示件数を変更しても増減しませんでした(2件を4件に変えましたが2件のままでした。)

説明文を読んでも、正直もうどう使用していいかわかりかねています。

以上のような問題点の原因など考えられる部分を教えて頂けますでしょうか?

また、別の質問になりますが

画像にリンクとテキストを入れた上で、横並びに画像を並ばせる事は可能でしょうか?

よろしくお願い致します。
#349 : Gallery 共有プラグインを複数設置する件
Squirtやidを何度も差し替えたりしましたが、上手く画像が反映されず、元の最初のプラグイン画像が混じったり、二番目のプラグインに画像が載らなかったりします。初心者なので差し替え位置や、違う要素内部に入れたりして、バグの様に表示されていると自分で思っています。お手数ですが複数設置(2つ目)の場合の配布scriptコードを作って頂けませんか?

コメントの投稿

  

※コメントは記事と直接関連のある事柄のみ受け付けています。

カテゴリ
月別アーカイブ
最新記事
Comments
<>+-
プロフィール

Author:may
 不具合のないように心掛けておりますが、カスタマイズの方法などは自己責任でご利用ください。テンプレートを大きく変更する際は複製してバックアップを用意することを推奨します。

 ご自身のブログをカスタマイズする分には問題ありませんが、記事内容や配布コードの転載・再配布はご遠慮ください。

 過度のご質問・要望については返信や対応が遅れることがございます。返信のない場合は保留・棚上げとなりますが、記事の題材がなくなり、時間にそれなりのゆとりが生じた時に対応する予定です。

Galleryサンプル
ヨッシー New アイランド
The Last of Us Remastered