1

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

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

问题是我不知道谁用视频制作类似的效果。视频也将显示为缩略图，但无法弄清楚如何在 div 中显示它。我正在使用 jwplayer，但我不知道如何用我的 js 视频播放器代码填充弹出 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 代码链接到弹出 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>
4

0 回答 0