skipprを実装したい… (2ページ目) - FC2ブログユーザーフォーラム

無料新規登録

会員の方はログイン

トピック

コミュニティ

お知らせ

質問・疑問

skipprを実装したい… 2ページ目

Fc2公式のテンプレート「Diary_2column」のヘッダーを変更したくて、jQueryのskipprをダウンロードしました。

dist>skippr.cssのheight:300pxに変更後
dist>skippr.cssとskippr.jsをファイルアップロードしました

そしてこちら↓のブログを参考に変更してみましたが
http://blog.raizzenet.com/how-to-use-skippr/
全く動作しません

<header></header>内に設置しました

以前のレスポンシブじゃないテンプレートのときは
jQueryも動作してくれたんですが…

どうすればいいんでしょうか…
ご教授くださいませ

by 2016年01月28日 12:20

by
2016年01月28日 12:20

コメント一覧新しい順に表示▽ / 古い順に表示△

コメント一覧
新しい順 | 古い順

このコミュニティにご参加頂くと、コメントの書き込みができます

直したんですが
やっぱり表示されず…

本当にすみません

by 2016年01月28日 17:37

by
2016年01月28日 17:37
それから、テンプレCSSソースの

#header

に指定してある
height: 220px;
は
height: auto;
に変更してくださいね。
これやらないとオーバーフロー(溢れ)状態になってメインコンテンツとスライダーとが被ってしまいます。

by vanillaice (Akira) 2016年01月28日 16:43

by vanillaice (Akira)
2016年01月28日 16:43
まるっとコピペすればできるはずです　(´・ω・｀)

by vanillaice (Akira) 2016年01月28日 16:39

by vanillaice (Akira)
2016年01月28日 16:39
私の指定内容書いておきますね。

・最新CSSファイルを<head>内
<link rel="prev" href="<%nextentry_url>">
の直下に記述(修正は一切行わない)

・<header>〜</header>を以下の通り記載

<header id="header">
<div class="inner">
<h1><a href="<%url>"><%blog_name></a></h1>
<p><%introduction></p>
</div>
<div id="skipcontainer">
<div id="theTarget">
<div style="background-image: url(アドレス)"></div>
<div style="background-image: url(アドレス)"></div>
<div style="background-image: url(アドレス)"></div>
</div>
</div>
</header>

・最新JSファイル(minファイル)を</body>の直前に

・フックアップをJSファイル直下に。内容は以下の通り。

<script>
$(function(){
$("#theTarget").skippr({
transition: 'slide',
autoPlay: true,
});
});
</script>

・CSSソース(テンプレのことです)末尾に以下を記載

#skipcontainer {
width: 100%;
height: 希望の高さpx;
}

by vanillaice (Akira) 2016年01月28日 16:38

by vanillaice (Akira)
2016年01月28日 16:38
なんかCSSファイルおかしくないですか　(´・ω・｀)
こちら行って最新ファイルのDLをしてください　↓

https://github.com/austenpayan/skippr

大元のCSSファイルを修正してはいけません。
内容をしっかり把握しているのなら別ですが。
本来はheight: 100%でなければいけないところが何故かheight: 300pxになっています。
このファイルは一旦破棄して最新CSSファイルを入手してください。

by vanillaice (Akira) 2016年01月28日 16:26

by vanillaice (Akira)
2016年01月28日 16:26
よろしくお願いします(涙)

by 2016年01月28日 16:23

by
2016年01月28日 16:23
できましたよ　(´・ω・｀)
ちょっとそちらまた伺います(笑)

*まだJqueryライブラリの重複が修正されていません
これが原因になっていることもありますので正しく修正してください。

by vanillaice (Akira) 2016年01月28日 16:18

by vanillaice (Akira)
2016年01月28日 16:18
直しましたが
変化はありませんでした…

すみません

by 2016年01月28日 15:42

by
2016年01月28日 15:42
まずJqueryライブラリが3つ入っています。
これは一つにしてください。
<head>内にあるもの以外は削除。
ただしバージョンによって動かなくなるプラグインもありますので、その辺は各々確認が必要です。
(例えばtoggleのfunctionやIE8以下向けは古いJqueryでなければ動作しません)
skipprの必要要件も照らしてライブラリを1件に。

そして現在skippr要素の高さ(縦幅)が0になってます。
CSS定義が為されていません。
#sliderへの定義がされていません。
CSSソース内に

#slider {
width: 100%;
height: 数値px;
}

の指定が必要です。

by vanillaice (Akira) 2016年01月28日 15:00

by vanillaice (Akira)
2016年01月28日 15:00
すみません（汗）

只今そのテンプレートを適用しました
ご確認いただければと思います

by 2016年01月28日 14:37

by
2016年01月28日 14:37