Jquery 使用图像替换galler希望单击时用视频替换大图像

Jquery 使用图像替换galler希望单击时用视频替换大图像,jquery,image,video,gallery,replace,Jquery,Image,Video,Gallery,Replace,我有一个图像替换库,当我单击缩略图时,主分区中会显示一个较大的图像。我希望单击此图像并让它播放视频,我希望为每个单击的较大图像播放不同的视频。所有视频都在youtube上。 以下是我到目前为止的代码和脚本: <div class="videogallery"> <img id="largeImg" src="/images/locationbased_largeclicktoplay.jpg" alt="Location-Based Video" /> &

我有一个图像替换库,当我单击缩略图时,主分区中会显示一个较大的图像。我希望单击此图像并让它播放视频,我希望为每个单击的较大图像播放不同的视频。所有视频都在youtube上。 以下是我到目前为止的代码和脚本:

    <div class="videogallery">
    <img id="largeImg" src="/images/locationbased_largeclicktoplay.jpg" alt="Location-Based Video" />
</div>
              <div><hr /></div>
 <div class="thumbnails">
             <p style="font-size: 14px; font-weight:bold; color:#466ea9;font-family:'Lucida Grande', sans-serif; text-align:left; padding-bottom:10px;">Videos</p>
             <p style=" text-align:center;">    
             <a href="/images/logo_largeclick.jpg" title="Social Media 101 Video">
             <img src="/images/logo_small.jpg" border="0" height="61" width="100" style="padding-right:10px;" /></a> 
             <a href="/images/facebook_large.jpg" title="Facebook Video">
             <img src="/images/facebook_small.jpg" border="0" height="61" width="100" style="padding-right:10px;"/></a> 
             <a href="/images/twitter_largeclicktoplay.jpg" title="Twitter Video">
             <img src="/images/twitter_small.jpg"border="0" height="61" width="100" style="padding-right:10px;"/></a>
             <a href="/images/youtube_largeclicktoplay.jpg" title="Youtube Video">
             <img src="U/images/youtube_s.jpg" border="0" height="61" width="100" style="padding-right:10px;"/></a>
  </div>


视频

以下是脚本:

<script type="text/javascript"> 
$(document).ready(function(){


$(".thumbnails a").click(function(){

    var largePath = $(this).attr("href");
    var largeAlt = $(this).attr("title");

    $("#largeImg").attr({ src: largePath, alt: largeAlt });

    $("h2 em").html(" (" + largeAlt + ")"); return false;
});

$(文档).ready(函数(){
$(“.thumbnails a”)。单击(函数(){
var largePath=$(this.attr(“href”);
var largeAlt=$(此).attr(“标题”);
$(“#largeImg”).attr({src:largePath,alt:largeAlt});
$(“h2 em”).html(“+largeAlt+”);返回false;
});
}));

非常感谢您的帮助

多谢各位。
-安

我明白了,我添加了一个脚本

<script type="text/javascript">
var embedCode = '<object data="http://blip.tv/play/gYMo_vAmAA" type="application/x-shockwave-flash" height="500" width="600">
<param name="src" value="http://blip.tv/play/gYMo_vAmAA">
<param name="allowfullscreen" value="true"></object>'
</script>
图像
标记

我可能会为每个thumbmail向脚本添加不同的变量

onclick="document.getElementById('videocontainer').innerHTML = embedCode;"