site_make

よくないギャラリー

2015-01-20

よくあるけど・・・よくないギャラリー

iframe

こういうページを見たことはありませんか?
左にリンクの■があり、右に画像が表示されるパターンですが画像は違うページを表示しているイラストギャラリーです。

イラストサイトでは未だに多いですがiframeを使って表示しているギャラリーを見かけるのですが、これはいいことは一つもありません。

違うページを読み込むことにより、たとえ「お気に入りに登録」をしてい頂いたときにどちらのページが登録されてしまうかわからない危険と、この読み込まれるページは何もリンクは貼られませんので出口のない価値を下げるページが増えるという危険です。

私達の見え方には問題がなくても実は検索ロボットからの評価はとても低いページになってしまうのです。

同じ見た目のもっと簡単なギャラリー

考え方を変えてイラストの写る窓をタグで作りましょう。そして、イラストを切り替えるサムネールをつくります。
左のサムネール画像を押して下さい。

  • sam03
  • sam01
  • sam02
sam02

これはサムネールをクリックした時にaタグの「href」を読みます。そしてそのURLを表示窓のイラストのsrcと書き変えているんですね。
他の方法としてはサムネールの画像の「src」を読んでから大きい画像のurlに置き換えてから表示窓の
srcに置き換える方法もあります。これはよくメニューボタンにマウスオーバーすると画像が変わる方法と同じです。

htmlの記述です。画面いっぱいに大きくして、サムネールも増やせば同じ形になりますよ。


<div>
	<ul id="thumbnail">
		<li><a href=" 見せたいイラストURL01 "><img src=" サムネールURL01 " alt="" ></a></li>
		<li><a href=" 見せたいイラストURL02 "><img src=" サムネールURL02 " alt="" ></a></li>
		<li><a href=" 見せたいイラストURL03 "><img src=" サムネールURL03 " alt="" ></a></li>
	</ul>
	<div id="window"><img src=" 初期表示イラストURL " alt="" ></div>
</div>

jQueryの記述ですね。命令文はたった4行です。
これだけでイラストが増えた時には上のhtmlのliの行を追加してサムネール画像と大きい画像のurlをaタグのhrefに書けばOKです。


$('#thumbnail').find('li').click(function(){
	var imageURL = $(this).find('a').attr('href');
	$('#window').find('img').attr('src',imageURL);
});

id=”thumbnail”の子要素liを押したら、これの子要素aのhrefimageURLとします。
id=”window”の子要素imgのsrcimageURLとします。という命令です。

copyright 2017 eo
  プロフィール  PR:無料HP  湯沢自動車学校  ゲーム 制作  IID  中古ホイール 三重  タイヤ 格安  Webディレクター 専門学校  BATTLEZ  秩父自動車学校  水晶  長崎 合宿免許  音楽 専門学校 福岡  ランドクルーザー トヨタ 中古  リノベーションセミナー