1

单击另一个 div 时，我想用属性和内容填充 div。与下面的示例类似，但具有视频属性。

我已经上传了想要在单击 div 时显示的视频。与照片示例相同，但带有视频。Mabye 在单击 div 时为视频播放器提供文件属性。

照片示例：

  $(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();

});
  });

我的视频播放器：

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

我尝试过这样的事情，但效果不佳..

<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