點擊隱藏YouTube視頻

Q1）頁面加載是否可以用Jquery檢查圖像的文件名，然後設置CSS以將其放置在頁面上？點擊隱藏YouTube視頻

Q2）什麼是管理最簡單的方法，用戶將不會被嵌入div.icon

我有這將是在產品說明中的播放按鈕圖標內的iframe代碼電子商務網站。當用戶點擊播放時，它會在product-image 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/

來源

2012-06-20 SOLDIER-OF-FORTUNE

這爲** **第一季度，根據其路徑或圖像名稱，像這樣設置圖像的圖像風格：'$（'img [src =「圖像路徑」]'）.css（some_css_property，「value」）;'。沒有你在Q2。 –

Q2-不知道HTML的人如何能夠將div粘貼iframe代碼？我正在尋找這個障礙的解決方案。 –

對於Q1依禪是分辯你可以使用：

$('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); 
});

然後你必須添加一些jQuery的onload事件，多數民衆贊成內[114]總結每個YouTube的iframe與您的圖標股利。我不知道，但是這可能是這樣的：

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

希望這有助於公司

來源

2012-06-20 14:19:13 RTB

謝謝，這清除了一些東西。關鍵是用戶只需要將youtube iframe粘貼到描述部分。所以我需要檢查iframe是否存在，然後將其附加到div.icon我認爲你的JQ代碼在做什麼？ –

Q1_增加班級會更好。 –

我同意addClass會更好。是的，這就是我的代碼正在做的。我不確定，因爲我還沒有測試它。如果我的答案有幫助，請接受它:-)謝謝。 – RTB

點擊隱藏YouTube視頻

回答

相關問題