展开视频和照片缩略图大小轨道

Question

我有一个项目模型，我在其中创建不同的项目。每个项目都有标题，描述和许多资产。资产是包含附加照片和视频的项目的嵌套属性。（这意味着在每个项目中您都可以上传许多视频和照片。）

我的项目索引看起来像一个照片库，将每个项目的第一个图像列为缩略图。 我的项目节目以缩略图（130 x 130像素）显示项目标题，desc和所有照片。 单击照片缩略图时，此asset.photo.url将存储在div中，该div显示原始大小的缩略图（弹出窗口）。 div根据您单击的缩略图更改照片。如果您不明白，请查看下面的代码。

问题在于我不知道该对视频产生类似效果的对象。视频也会显示为缩略图，但无法弄清楚如何在div中显示它。我正在使用jwplayer，我不知道如何用我的js视频播放器代码填充popup div。

这是我的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代码链接到弹出窗口。

以下是用于显示视频缩略图的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标签等，不知道如何为视频做。< / p>

 <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>