javascript - ビデオと写真のサムネイル サイズ レールを展開する

Question

さまざまなプロジェクトを作成するプロジェクト モデルがあります。各プロジェクトには、タイトル、説明、および多くのアセットがあります。アセットは、添付された写真とビデオを含むプロジェクトにネストされた属性です (これは、すべてのプロジェクトで多くのビデオと写真をアップロードできることを意味します)。

私のプロジェクト インデックスはフォト ギャラリーのように見え、すべてのプロジェクトの最初の画像がサムネイルとして一覧表示されます。私のプロジェクト ショーでは、プロジェクトのタイトル、説明、およびすべての写真がサムネイル (130 x 130 ピクセル) として表示されます。写真のサムネイルをクリックすると、この asset.photo.url が div に保存され、元のサイズでサムネイルの上に表示されます (ポップアップ div)。div は、クリックしたサムネイルに応じて写真を変更します。よくわからない場合は、以下のコードを見てください。

問題は、誰がビデオで同様の効果を出すかわからないことです。ビデオもサムネイルとして表示されますが、div に表示する方法がわかりません。jwplayer を使用していますが、ポップアップ div を js ビデオ プレーヤー コードで埋める方法がわかりません。

ここに私の Project.show.html.erb があります:

<div style=" height: 40%;">
<h1 class="center">
  <%= @project.title %>
</h1>
<hr></hr>
<div>
    <div class="form-signin-show">
      <br />
      <% if @project.description? %>
        <p style=" margin-bottom: 5%;" >
        <%=raw @project.description.html_safe.gsub(/\r\n?/,"<br/>").html_safe %>
        </p>
        <% end %>
      </div>

      <p id="popup" align="center"></p>

<div class="row" style="margin-right: auto; margin-left: auto; text-align: center;">   
  <div class="thumball"> 
<% @project.assets.each do |asset| %>
  <% if asset.photo.file? %>
    <li class="thumbnail span1 col-md-2" style="border: none; display: inline-block !important; float: none !important; position: relative;">
       <%= link_to asset.photo.url, class: :popup_link, target: :_blank do %>
       <span class="roll" ></span>
         <%= image_tag asset.photo.url(:thumb) %>
      <% end %>  
    </li>
  <% end %>
<% end %>
<hr></hr>


<div class="center" id="gohere">
<%= link_to 'Edit', edit_project_path(@project) %> |
<%= link_to 'Back', projects_path %>
</div><br /><br />


<script type="text/javascript">
$('.thumbnail').click(function () {
    $('html, body').animate({scrollTop:$(document).height()}, 1500);
    return false; 
});
  $(document).ready(function() {
     $(".popup_link").click(function(e) {
        e.preventDefault();
        $("#popup").html( $('<img>').attr('src', this.href) );
     });
  });
  $(document).ready(function() {
     $("#popup").click(function() {
$("#popup img").remove();

});
  });

$(function() {
// OPACITY OF BUTTON SET TO 0%
$(".roll").css("opacity","0");

// ON MOUSE OVER
$(".roll").hover(function () {

// SET OPACITY TO 70%
$(this).stop().animate({
opacity: .7
}, "fast");
},


// ON MOUSE OUT
function () {

// SET OPACITY BACK TO 50%
$(this).stop().animate({
opacity: 0
}, "slow");
});
});


</script>

このコードは、「元の画像サイズでポップアップ div を埋める:

<%= link_to asset.photo.url, class: :popup_link, target: :_blank do %>

$(document).ready(function() {
     $(".popup_link").click(function(e) {
        e.preventDefault();
        $("#popup").html( $('<img>').attr('src', this.href) );
     });
  });

ビデオのサムを表示し、クリックするとjsコードをポップアップdivにリンクする、同様のソリューションを考えています。

動画のサムネイルを表示するための js コードは次のとおりです。

 <script type="text/javascript">
      jwplayer("video").setup({
          flashplayer: "<%=asset_path('jwplayer.flash.swf')%>",
          file: "<%= asset.object.video.url(:original) %>",
          primary: "flash",
          height: 160,
          width: 160,
          analytics: {
              enabled: false,
             cookies: false
         }
      });
      </script> 

ビデオを元のサイズでポップアップし、誰かがビデオのサムネイルをクリックしたときに背景を暗くするなどの他の解決策があれば、助けていただければ幸いです。または、写真と同じ解決策を実行できる場合。私はRubyにかなり慣れていません...ありがとう！

編集： それにアプローチする方法がわからない、このようなことを試してみましたが、うまくいきませんでした..問題は私のjavascriptにあると思います.imgタグなどで、ビデオに対してそれを行う方法がわかりません.

 <div style=" height: 40%;">
    <h1 class="center">
      <%= @project.title %>
    </h1>
    <hr></hr>
    <div>
        <div class="form-signin-show">
          <br />
          <% if @project.description? %>
            <p style=" margin-bottom: 5%;" >
            <%=raw @project.description.html_safe.gsub(/\r\n?/,"<br/>").html_safe %>
            </p>
            <% end %>
          </div>
          <p id="popup" align="center"></p>
          <p id="video" align="center"></p> <!-- Display the original Video --!>


    <div class="row" style="margin-right: auto; margin-left: auto; text-align: center;">   
      <div class="thumball"> 
    <% @project.assets.each do |asset| %>
      <% if asset.photo.file? %>
        <li class="thumbnail span1 col-md-2" id="thumb1"style="border: none; display: inline-block !important; float: none !important; position: relative;">
           <%= link_to asset.photo.url, class: :popup_link, target: :_blank do %>
           <span class="roll" ></span>
             <%= image_tag asset.photo.url(:thumb) %>
          <% end %>
        </li>
      <% end %>
    <% end %>

<!--------------------------- Video thumbs ----------------------------------!>
           <div class="thumball"> 
    <% @project.assets.each do |asset1| %>
      <% if asset1.video.file? %>
        <li class="thumbnail span1 col-md-2" id="thumb2"style="border: none; display: inline-block !important; float: none !important; position: relative;">
           <%= link_to asset1.video.url, class: :popup_link, target: :_blank do %>
           <span class="roll" ></span>
             <%= image_tag asset1.video.url(:thumb) %>
          <% end %>
      <% end %>
      <script type="text/javascript">
          jwplayer("video").setup({
              flashplayer: "<%=asset_path('jwplayer.flash.swf')%>",
              file: "<%= asset1.video.url(:original) %>",
              primary: "flash",
              height: 160,
              width: 160,
              analytics: {
                  enabled: false,
                 cookies: false
             }
          });
          </script> 
    <% end %>


<!--------------------------- Video thumbs END----------------------------------!>
    <hr></hr>


    <div class="center" id="gohere">
    <%= link_to 'Edit', edit_project_path(@project) %> |
    <%= link_to 'Back', projects_path %>
    </div><br /><br />


    <script type="text/javascript">
    $('#thumb1').click(function () {
        $('html, body').animate({scrollTop:$(document).height()}, 1500);
        return false; 
    });
      $(document).ready(function() {
         $(".popup_link").click(function(e) {
            e.preventDefault();
            $("#popup").html( $('<img>').attr('src', this.href) );
         });
      });
      $(document).ready(function() {
         $("#popup").click(function() {
    $("#popup img").remove();

    });
      });

<!--------------------- TAKING THE VIDEO URL PATH -----------------!>

      <script type="text/javascript">
    $('#thumb2').click(function () {
        $('html, body').animate({scrollTop:$(document).height()}, 1500);
        return false; 
    });
      $(document).ready(function() {
         $(".popup_link").click(function(e) {
            e.preventDefault();
            $("#video").html( $('<img>').attr('src', this.href) );
         });
      });
      $(document).ready(function() {
         $("#video").click(function() {
    $("#video img").remove();

    });
      });

    $(function() {
    // OPACITY OF BUTTON SET TO 0%
    $(".roll").css("opacity","0");

    // ON MOUSE OVER
    $(".roll").hover(function () {

    // SET OPACITY TO 70%
    $(this).stop().animate({
    opacity: .7
    }, "fast");
    },


    // ON MOUSE OUT
    function () {

    // SET OPACITY BACK TO 50%
    $(this).stop().animate({
    opacity: 0
    }, "slow");
    });
    });


    </script>