2

Q1)ページの読み込み時に、Jquery を使用して画像のファイル名を確認し、css を設定してページに配置することはできますか?

Q2)これを管理する最も簡単な方法は何ですか。ユーザーは div.icon 内に iframe コードを埋め込まないでください。

e コマース Web サイトの製品説明に表示される再生ボタン アイコンがあります。ユーザーが再生をクリックすると、製品画像の div ボックス内に YouTube ビデオが正確に表示されます。アイコンは画像ナビゲーション アイコンの隣に配置されるため、ユーザーは写真を閲覧しながらビデオを見ることができます。

ここに私のコードがあります：

HTML:

<div class="container">
    <div class="product-image"><img src=
    "http://www.skriftlig.com/konfliktmegling/wp-content/uploads/2010/02/Photoxpress_2658886-480x220.jpg"
    alt=
    "http://www.skriftlig.com/konfliktmegling/wp-content/uploads/2010/02/Photoxpress_2658886-480x220.jpg" /></div>

    <div class="image-nav"></div>

    <div class="icon">
      <iframe width="480" height="220" src=
      "http://www.youtube-nocookie.com/embed/jvTv_oatLA0?rel=0" frameborder="0"
      allowfullscreen=""></iframe>
    </div>
  </div>

CSS:

div.container
{
    margin:10px 10px auto;
    border:1px solid orange;
}

div.product-image
{
    height:220px;
    width:480px;
    border:1px solid red;
    margin:30px;      
}

div.image-nav
{
    border:1px solid black;
    width:500px;
    height:100px;
    margin:30px;
}

div.icon
{
    background-image: url("http://i46.tinypic.com/zmmbo8.png");
    background-repeat: no-repeat;
    height: 50px;
    left: 540px;
    position: relative;
    top: -104px;
    width: 50px;
    cursor:pointer;
}

div.icon iframe
{
    display:none;
    position:relative;
    top:30px;
}

div.product-image iframe
{
    position: absolute;
    top: 42px;
    left:42px;
}

JQ:

var $video=$('div.icon iframe');
var $productImage=$('.product-image');
var $icon=$('.icon');
$icon.on('click',function()
{
    $('.product-image').append($video);
});

jsfiddle: http://jsfiddle.net/t7qMF/2/

4

1 に答える 1

1

Q1 Ishan の場合は、次を使用できます。

$('img[src="images/test.png"]').css("position","absolute");

Q2 の場合: YouTube の埋め込みコードは次のようになります。

<iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0">

iframe クラスを使用して選択できます。

var $video=$('iframe.youtube-player');
var $productImage=$('.product-image');
var $icon=$('.icon');
$icon.on('click',function()
{
    $('.product-image').append($video);
});

次に、onload イベントで、すべての YouTube iframe をアイコン div でラップする jquery を追加する必要があります。よくわかりませんが、これは次のようなものかもしれません：

$(function() {
     $('iframe.youtube-player').each(function(){
         var $iconDiv = $(this).parent().append('<div class="icon"></div>');
         $(this).prependTo($iconDiv);
     });
});

お役に立てれば

于 2012-06-20T14:19:13.143 に答える