Wie man jQuerys dblclick benutzt, um ein Video von Bild zu öffnen

Ich fange gerade mit jQuery an und entschied mich, ein Video zum gleichen Fenster zu öffnen, indem ich ein Bild doppelklickte, aber in Probleme lief. Ich habe einige Beispiele für dblclick gefunden, die die versteckten p Elemente zeigen, aber ich konnte das nicht wirklich in mein Projekt konvertieren. Grundsätzlich kann ich dblclick nicht mit diesem Code arbeiten und höchstwahrscheinlich brauche ich zwei div-Elemente, aber ich kann nicht wirklich herausfinden, wie man sie in diese einfügt. Vielen Dank im Voraus.Wie man jQuerys dblclick benutzt, um ein Video von Bild zu öffnen

-Code, wie es ist:

<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>

Der JS-Code:

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

Quelle

2016-04-15 fnd

Willkommen bei Stack Overflow! Ich bin sicher, dass wir Ihnen bei Ihrem Problem helfen können, aber zuerst, könnten Sie genau sagen, was Ihr Fehler ist? Bitte aktualisieren Sie Ihren Post mit dieser Information. –

Wenn click.js für das erforderlich ist, was Sie erreichen möchten, geben Sie diese Datei ebenfalls an. – Atula

@Atula JS-Code, der dort zeigt (einschließlich .dblclick und .show) ist das einzige, was click.js in sich hat. – fnd

Dies wird Wok.

<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>

Quelle

2016-04-15 13:19:18

ist es wert, die ** Antwort ** zu sein. – Atula

Sehr hilfreich, vielen Dank! Ich habe Autoplay auf Video gestellt und jetzt fängt es an zu spielen, bevor ich das Bild doppelt geklickt habe. Gibt es eine Möglichkeit, das Video sofort nach dem Doppelklick auf das Bild abzuspielen? – fnd

Ist es das, was Sie erreichen möchten? Ich entfernte die click.js, weil ich diese Datei nicht hatte und konnte sie nicht einschließen. Oh und auch, da Ihr <a> Tag keinen Text hatte, wäre es verborgen geblieben, also gab ich ihm einen kleinen Text.

$(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
Ich glaube, ich weiß, was Sie erreichen wollen. Wenn Sie auf das Bild doppelklicken, möchten Sie im selben Fenster zum Video umleiten.

Wenn Sie dies mit einem einzigen Klick erreichen möchten, wickeln Sie das Bild einfach in ein <a>-Tag ein und setzen Sie das Attribut href auf die URL. Sie könnten das Attribut target einschließen und es auf _blank setzen, um das Video in einem neuen Fenster zu öffnen.

<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>

Oder Sie es, für die durch einen Doppelklick tun könnten Sie einen Code benötigen.

$("#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" />

Da Stackoverflow Umleitungen nicht zulässt, werden die Schnipsel ein anschauliches Beispiel nicht zeigen, aber es auf dem lokalen System versuchen.

Quelle

2016-04-15 13:20:24 Jorrex

Entschuldigung, ich erklärte es schlecht, aber ich meinte, dass das Video im Grunde das Bild ersetzt, nachdem es doppelt geklickt wurde, und es ist nur ein bisschen größer als das Bild selbst. Ich habe auch vergessen, in der ersten Nachricht zu sagen, dass es cool wäre, Autoplay auf Video zu haben. (nicht wenn das Bild auf dem Bildschirm ist, sondern direkt nach dem Doppelklick) – fnd

Wie man jQuerys dblclick benutzt, um ein Video von Bild zu öffnen

Antwort

Verwandte Themen