0

我正在使用 3 个图片库。当您单击图像时，会出现一个弹出窗口，其中包含一个 iframe。目前，单击时的 3 个不同图像都在弹出窗口中显示相同的视频。我想知道如何为不同的图像调用不同的视频。另外，是否可以自动启动视频，这样您就不必在弹出窗口出现时按播放？谢谢大家，我的代码如下。

 <script>
 $(document).ready(function() {
    $('a.login-window').click(function() {

            //Getting the variable's value from a link 
    var loginBox = $(this).attr('href');

    //Fade in the Popup
    $(loginBox).fadeIn(300);

    //Set the center alignment padding + border see css style
    var popMargTop = ($(loginBox).height() + 24) / 2; 
    var popMargLeft = ($(loginBox).width() + 24) / 2; 

    $(loginBox).css({ 
        'margin-top' : -popMargTop,
        'margin-left' : -popMargLeft
    });

    // Add the mask to body
    $('body').append('<div id="mask"></div>');
    $('#mask').fadeIn(300);

    return false;
});

    // When clicking on the button close or the mask layer the popup closed
    $('a.close, #mask').live('click', function() { 
     $('#mask , .login-popup').fadeOut(300 , function() {
      $('#mask').remove();  
  }); 
 return false;
 });
});
</script>


      <div id="videos">
        <div id="header_start">
        <a class="login-window" href="#login-box"><img src="/images/video_holder1.jpg" style="padding-right: 20px; width: 316px; height: 186px;" /></a></div>
            <div class="login-popup" id="login-box">
                <iframe width="560" height="315" src="foo.com" frameborder="0" allowfullscreen></iframe>
                <a class="close" href="#"><img alt="Close" class="btn_close" src="close_pop.png" title="Close Window" /></a>
                </div></div>
      <div id="videos1">
        <div id="header_start">
        <a class="login-window" href="#login-box"><img src="/images/video_holder2.jpg" style="padding-right: 20px; width: 316px; height: 186px;" /></a></div>
            <div class="login-popup" id="login-box">
            <iframe width="560" height="315" src="foo.com" frameborder="0" allowfullscreen></iframe>
            <a class="close" href="#"><img alt="Close" class="btn_close" src="close_pop.png" title="Close Window" /></a>
            </div></div>
       <div id="videos2">     
         <div id="header_start">
         <a class="login-window" href="#login-box"><img src="/images/video_holder3.jpg" style="padding-right: 20px; width: 316px; height: 186px;" /></a></div>
            <div class="login-popup" id="login-box">
            <iframe width="560" height="315" src="foo.com" frameborder="0" allowfullscreen></iframe>
            <a class="close" href="#"><img alt="Close" class="btn_close" src="close_pop.png" title="Close Window" /></a>
            </div></div>
4

1 回答 1

0

我创建了一个FIDDLE

您的 jQuery 代码中有一些错误，我已经进行了一些更改。当您单击图像时，您可以.login-popup像这样访问正确的图像：

var $loginBox = $(this).parent().next('.login-popup');

尝试获得“启发”并进行所需的修改以获得您想要的。

记住，代码中的 ID 应该是唯一的，这一点也很重要。如果您想为多个元素提供相同的属性和样式，请使用类。

于 2012-12-13T19:49:58.043 回答