jQueryのdblclickを使用して画像からビデオを開く方法

jQueryを使い始めたばかりで、画像をダブルクリックして同じウィンドウにビデオを開くことにしましたが、問題が発生しました。隠されたp要素を表示するdblclickの例をいくつか見つけましたが、それを実際にプロジェクトに変換することはできませんでした。基本的に私はこのコードで作業するdblclickを取得することはできませんし、おそらく私は2つのdiv要素が必要ですが、実際にこれをどのように配置するのか把握することはできません。前もって感謝します。jQueryのdblclickを使用して画像からビデオを開く方法

コードをそのまま：

<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>jQuery doubleclick</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
     <script src="click.js"></script> 
    </head> 
    <body> 
     <img src="http://img.ifcdn.com/images/3b10c8e09263402758a14321e6999b6aa9daac4c8f10c78defd8884fc832d1a7_3.jpg" width="360px" height="240px" id="image"/> 
     <a href="https://www.youtube.com/watch?v=SNvDUO42Hys" width="640px" height="480px" id="video"</a> 
    </body> 
</html>

JSコード：

$(document).ready(function() { 
    $('#image').dblclick(function() { 
     $('#video').show(); 
    }); 
});

出典

2016-04-15 fnd

ようこそスタックオーバーフロー！私はあなたの問題についてお手伝いすることができると確信していますが、まずあなたの誤りが何であるか正確に言うことができますか？その情報で投稿を更新してください。 –

あなたが達成しようとしているものに対してclick.jsが必要な場合は、そのファイルも指定してください。 – Atula

@Atulaそこに表示されているJSコード（.dblclickと.showを含む）は、click.jsにある唯一のものです。 – fnd

この意志の鍋。

<html> 
<head> 
<meta charset="utf-8"> 
<title>jQuery doubleclick</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
</head> 
<body> 
<img src="http://img.ifcdn.com/images/3b10c8e09263402758a14321e6999b6aa9daac4c8f10c78defd8884fc832d1a7_3.jpg" width="360px" height="240px" id="image"/> 
<iframe width="560" height="315" id='video' style="display:none" src="https://www.youtube.com/embed/SNvDUO42Hys" frameborder="0" allowfullscreen></iframe> 
</body> 
<script> 
    $(document).ready(function() { 
     $('#image').dblclick(function() { 
      $('#image').hide(); 
      $('#video').show(); 
     }); 
    }); 
</script> 
</html>

出典

2016-04-15 13:19:18

**回答**にするには合理的です。 – Atula

非常に役に立ちました、ありがとう！私はビデオに自動再生を入れましたが、今は画像をダブルクリックする前に再生を開始します。画像をダブルクリックした直後に動画を再生する方法はありますか？ – fnd

これは達成しようとしていることですか？私はclick.jsを削除しました。私はそのファイルを持っていなかったので、それを含めることができませんでした。ああ、あなたの<a>タグにはテキストがありませんでしたので、隠れたままだったので、少しテキストを付けました。

$(document).ready(function() { 
 
    $('#image').dblclick(function() { 
 
    $("#video").show(); 
 
    }); 
 
});

#video { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="http://img.ifcdn.com/images/3b10c8e09263402758a14321e6999b6aa9daac4c8f10c78defd8884fc832d1a7_3.jpg" width="360px" height="240px" id="image" /> 
 
<div id="video"><a href="https://www.youtube.com/watch?v=SNvDUO42Hys">Click for the video!</a> 
 
</div>

EDIT
私は私はあなたが達成しようとしているものを知っていると思います。画像をダブルクリックすると、同じウィンドウ内のビデオにリダイレクトします。

ワンクリックでこれを実現したい場合は、<a>タグでイメージをラップし、href属性をURLに設定してください。 target属性を含めて、新しいウィンドウでビデオを開くには_blankに設定します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="https://www.youtube.com/watch?v=SNvDUO42Hys"> 
 
    <img src="http://img.ifcdn.com/images/3b10c8e09263402758a14321e6999b6aa9daac4c8f10c78defd8884fc832d1a7_3.jpg" width="360px" height="240px" id="image" /> 
 
    </a>

それとも、あなたには、いくつかのコードが必要になるためにダブルクリックでそれを行うことができます。

$("#image").dblclick(function() { 
 
    window.location.href = "https://www.youtube.com/watch?v=SNvDUO42Hys"; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="http://img.ifcdn.com/images/3b10c8e09263402758a14321e6999b6aa9daac4c8f10c78defd8884fc832d1a7_3.jpg" width="360px" height="240px" id="image" />

StackOverflowのは、リダイレクトを許可しないので、スニペットは、実際の例を示すが、ローカルシステム上でそれをしようとしません。

出典

2016-04-15 13:20:24 Jorrex

申し訳ありませんが、私はそれをうまく説明しませんでしたが、私はビデオが基本的にそれをダブルクリックした後に画像を置き換え、それは画像そのものより少し大きいことを意味しました。最初のメッセージで、ビデオで自動再生するのがクールだと言っても忘れました。（画像が画面上にあるときではなく、ダブルクリックした直後） – fnd

jQueryのdblclickを使用して画像からビデオを開く方法

答えて

関連する問題