• Home
  • twitter
  • Facebook Page
  • google+
  • RSS
  • follow us in feedlyfeedly
  • Contact Form
OPEN

読み込み前に画像が縦に並んでしまうのを改善!ブログトップ、スライド部分の挙動を修正してみました

Skitched 20120711 003252

jQueryのおべんきょナー
どうも、おつぱ( @OZPA )です。

以前jQueryプラグイン「Awkward Showcase」を使用して導入した当ブログトップのカテゴリ表示スライドバー。
気に入ってはいたものの、挙動が気になっていた部分があったのですが、ようやく修正することに成功いたしました。


jQueryが動く前に立てに並んじゃう

Skitched 20120711 020132

ブログトップ(PCで見てね)に表示してあるこちらのスライドバー。
縦に並べたリンク付きの画像をjQueryプラグインを利用して「横並び→スライド」するような挙動にしてあります。

 

Skitched 20120711 002942

が、jQueryはその性質上、全ての要素を読み込んでから挙動を始めます(まぁそうで無い設定も出来ますけど)。
故にjQueryを読み込む前、一瞬ご覧のように縦に配置した画像が見えてしまっておりました。
格好悪いですね。アイコンは可愛いのに。

だので次のようにコードを改良いたしました。

 

コード

CSS

#showcase {
	display: none;
}

まずはCSSで、スライド部分のコンテンツ「#showcase」を見えないよう調整。

header.php

次に、header.phpに配置してあるスクリプト部分の頭に「$(‘#showcase’).fadeIn()」を追加。

Skitched 20120711 023159

こちらは、「id=”showcase”」を「フェードインさせますよ」という記述です。

<head>
(中略)
<script type="text/javascript">
$(function()
{
$('#showcase').fadeIn(1500);
	$('#showcase').awShowcase(
	{
		content_height:			180,
		fit_to_parent:			true,
		auto:					false,
		interval:				2500,
		continuous:				false,
		loading:				true,
		tooltip_width:			200,
		tooltip_icon_width:		32,
		tooltip_icon_height:	32,
		tooltip_offsetx:		18,
		tooltip_offsety:		0,
		arrows:					true,
		buttons:				true,
		btn_numbers:			false,
		keybord_keys:			true,
		mousetrace:				false, /* Trace x and y coordinates for the mouse */
		pauseonover:			true,
		stoponclick:			true,
		transition:				'hslide', /* hslide/vslide/fade */
		transition_speed:		500,
		transition_delay:		500,
		show_caption:			'show', /* onload/onhover/show */
		thumbnails:				false,
		thumbnails_position:	'outside-last', /* outside-last/outside-first/inside-last/inside-first */
		thumbnails_direction:	'horizontal', /* vertical/horizontal */
		thumbnails_slidex:		0, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
		dynamic_height:			true, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */
		speed_change:			true, /* Set to true to prevent users from swithing more then one slide at once. */
		viewline:				true /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. It's OK with only the width. */

	});

});
</script>
(中略)
</head>

これで「display:none」で消えていたコンテンツ「id=”showcase”」を「フェードインさせる」という挙動になりました。
.fadeIn(1500)の数字部分はフェードインまでにかける時間ですね。(1500は1.5秒)

そんなこんなでどうでしょうか、今までのように画像が縦に表示されること無く、しかもフワッと表示されるようになったはずです。上手くいかない場合はリロードしてみてください。

 

ちなみに今回の挙動に関しては、めっちゃかっこいい上に良質な記事を紹介してくれるブログpoyosicom@poyosi くんにアドバイスを頂きました。
ぽよしありがとう!

poyosicom

 

Skitched 20120711 003024

あと、せっかくなのでカテゴリ「WordPress」と「Web練習帳」を咥えてみました。間違えた加えてみました。
お時間のある方はどうぞ:D

[はじめてのjQuery]コンテンツのスライダー機能を持つjQueryプラグイン「Awkward Showcase」と実装メモ | OZPAの表4


「htmlすら知らなかった私が2週間でWordpressの新テーマを作成するまでにやったこと」と参考にした記事まとめ | OZPAの表4

SPONSORED LINK

FB Comments

About This Site

Mac,iPhone,Evernote,Web,Foodを中心に様々な情報をお届けするブログです。
ふざけた文体が目につきますが、本人はいたってふざけております。
ご意見・ご感想は info[at]ozpa-h4.com もしくはコンタクトフォームまでどうぞ。
広告掲載、執筆、取材などの依頼も受け付けております。
さらに詳しく

SNS

×