製品画像ギャラリーにYouTubeビデオを配置する際に問題が発生しました。現在、メイン商品の写真とサムネイルがメイン商品の写真を変更しているので、大きな写真を持っています。例は私のウェブサイトにあります。以下のコードにビデオを配置しようとすると、壊れた画像リンクが表示されます。
サムネイルを選択したときにYouTube動画を再生したいのですが。私がこれについていくらかの援助を得ることができれば、それは素晴らしいことです。コーディングに慣れていないため、この問題を解決する能力が制限されています。
現在、これは純粋なHTMLソリューションであり、コードは以下のとおりです。私はjavascriptを受け入れていますが、それが簡単な場合は。
私はこれですべての助けに感謝します！ありがとうございました
HTMLの主な製品写真
<div class="image"><img name="preview" src="http://firesuppressiontech.com/wp-content/uploads/2015/08/hsl7.jpg" alt=""/></div>
サムネイル
<div class="thumbnails">
<img onclick="preview.src=img1.src" name="img1" src="http://firesuppressiontech.com/wp-content/uploads/2015/08/hsl7.jpg" alt="" /><img onclick="preview.src=img2.src" name="img2" src="http://firesuppressiontech.com/wp-content/uploads/2015/08/end.jpg" alt="" /><img onclick="preview.src=img3.src" name="img3" src="http://firesuppressiontech.com/wp-content/uploads/2015/08/lhsl.png" alt="" /><img onclick="preview.src=img4.src" name="img4" src="https://www.youtube.com/watch?v=TTiEz5j48x4" alt="" />
だからここにいる：ワーキングフィドル
(function ($, w) {
w.contentToggle = {
addVideo: function (videoId) {
$('.image').html('<iframe width="640" height="360" src="https://www.youtube.com/embed/' + videoId +'?rel=0&autoplay=1&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>');
},
addImage: function (imageSrc) {
$('.image').html('<img name="preview" src="' + imageSrc + '" alt=""/>');
}
};
})(jQuery, window)
これは、サムネイルをクリックすると.imageのhtmlコンテンツを変更する小さなスクリプトです。jQueryはすでにあなたのウェブサイトに含まれているので、私はそれを使用しました。もちろん、純粋なJS（バニラ）でこのようなことを行うことができます。jQueryでコンテンツを切り替えるという基本的な概念を理解していただければ幸いです。
このjsスニペットを使用すると、グローバルスコープで使用できる新しいオブジェクト（contentToggle）が得られます。このオブジェクトには、addVideo（）とaddImage（）の2つの関数が含まれています。
このアプローチを改善して楽しんでください。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加