質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1474閲覧

Lity.js 作動せず困っております。

lily0630

総合スコア30

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2018/10/22 05:51

編集2018/10/22 09:14

### Lity.jsが作動せず、作動させたいです。

ここに質問の内容を詳しく書いてください。
(例)PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

HTMLでホームページを作っています。
Lity.jsを後から導入したところ、作動せず困っております。

コードを入れ替えたりしていますが、うまく作動しません。

発生している問題・エラーメッセージ

下記コードです。(ヘッダー、フッターは省略、改変しております。)

<!DOCTYPE html> <html> <head> <title>テスト</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" type="text/css" href="script/lity.min.css"> <link rel="stylesheet" type="text/css" href="script/style.css"> </head> <body id="photograph">
<!-- wrap始まり -->
<div id="wrap" class="clearfix"> <div class="content"> <section id="movie-page"> <div id="linksaki1"></div> <h2 class="top_title2">Movie</p></h2><br /> <a href="https://vimeo.com/sample/" data-lity="data-lity"><img src="img/movie01.png" class="page_img3" alt="2018" /><p class="midashi-movie">2018</p></a> </section> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script> <script type="text/jacascript" src="script/lity.min.js"></script> <script type="text/javascript" src="script/test.js"></script> </body> </html>

何かヒントなどいただけますと幸いです。
よろしくお願いいたします。

【補記】
test.jsの中身は下記になります。

$(window).on('load', function(){
$('body').removeClass('fadeout');
});

$(function() {
// ハッシュリンク(#)と別ウィンドウでページを開く場合はスルー
$('a:not([href^="#"]):not([target])').on('click', function(e){
e.preventDefault(); // ナビゲートをキャンセル
url = $(this).attr('href'); // 遷移先のURLを取得
if (url !== '') {
$('body').addClass('fadeout'); // bodyに class="fadeout"を挿入
setTimeout(function(){
window.location = url; // 0.8秒後に取得したURLに遷移
}, 800);
}
return false;
});
});

//フェードイン効果を入れていきます
$('head').append(
'<style>body{display:none;}'
);
$(window).on("load", function() {
$('body').delay(300).fadeIn("slow");
});

//スクロールしたときに1回だけ作動する
$( window ).scroll( function() {
var scrollTop = $( window ).scrollTop();
$( '.hoge:not(.fire)' ).each( function() {
var top = $( this ).offset().top;
if ( scrollTop > top ) {
console.log( 'once!' );
$( this ).addClass( 'fire' );
}
} );
} ); //

//するするっと戻る//
$(function () {
var topBtn = $('.hajime');
topBtn.hide();
//スクロールが500に達したらボタン表示
$(window).scroll(function () {
if ($(this).scrollTop() > 1000) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
//スルスルっとスクロールでトップへもどる
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2018/10/22 07:03

再現しません。エラーは出ていないでしょうか?
lily0630

2018/10/22 09:03

今見たところ、エラーはでておりません。
x_x

2018/10/22 09:09

style.cssとtest.jsとを外すとどうですか?
lily0630

2018/10/22 09:10

外すと作動します。どちらかのファイル内に原因があるのでしょうか。
x_x

2018/10/22 09:12

そういうことになりますね。test.jsの中身を提示してもらえるでしょうか?
lily0630

2018/10/22 09:15

質問内容に補記いたしました。よろしくお願いします。
guest

回答1

0

ベストアンサー

この箇所がかち合ってるので、":not([data-lity])"を追加してlity用の場合は処理しないようにしてみてはどうでしょうか?

JavaScript

1//$('a:not([href^="#"]):not([target])').on('click', function(e){ 2$('a:not([href^="#"]):not([target]):not([data-lity])').on('click', function(e){

投稿2018/10/22 09:23

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

lily0630

2018/10/22 09:26

解決いたしました!!! 本当にありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問