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

フィドルを作成しました

jQuery コードに誤りがありました。いくつか変更を加えました。.login-popup画像をクリックすると、次のように正しい画像にアクセスできます。

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

「インスピレーション」を得て、必要な変更を加えて、必要なものを正確に取得してください。

ID はコード内で一意である必要があることに留意することも重要です。複数の要素に同じプロパティとスタイルを与えたい場合は、クラスを使用します。

于 2012-12-13T19:49:58.043 に答える