Question

好的，我知道这已被问过很多＆amp;对于那些被问过的人，似乎有一些答案。
但是我理解这些问题并不理解，因为它与我正在寻找的有些不同我有两个查询，首先是视频
我有一个数据库，其中Image＆amp;视频动态存储 2.现在在用户端，我想显示图像＆amp;视频
3.我通过从数据库中调用Sqldatasource来生成链接。

 <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
ConnectionString="<%$ ConnectionStrings:horti %>" 
DeleteCommand="delete from [VideoGallery] where Id=@Id" SelectCommand="SELECT TOP (3) Id, Link FROM VideoGallery ORDER BY Id DESC">
<DeleteParameters><asp:Parameter Name="Id" /></DeleteParameters>
</asp:SqlDataSource>


 <asp:DataList ID="DataList3" runat="server" DataSourceID="SqlDataSource1" RepeatColumns="3">
  <ItemTemplate>
 <a class="fancybox-media" href='<%#Eval("Link")%>'>Youtube</a>
  </ItemTemplate>
 </asp:DataList>

（直到这里一切都很好）

4.现在的问题是，当我打电话给href='<%#Eval("Link")%>'时，花式框不会弹出＆amp;播放视频，但它加载视频全屏而没有弹出叠加效果。
视频的精美盒子脚本是

$（document）.ready（function（）{

  $('.fancybox').fancybox();
      $('.fancybox-media')
          .attr('rel', 'media-gallery')
          .fancybox({
              openEffect: 'none',
              closeEffect: 'none',
              prevEffect: 'none',
              nextEffect: 'none',

              arrows: false,
              helpers: {
                  media: {},
                  buttons: {}

              }

          }); });

我找到了类似于向href here on StackOverflow 添加动态链接的内容，但是我可以使用lyob，无法理解如何实现该方法

For Image
对于图像，我正在调用img src＆amp;上的动态链接。来自数据库的href

<a class="fancybox" data-fancybox-group="gallery" title="<%#Eval("Title") %>" href="<%#"Photo_Gallery.ashx?Id="+ Eval("Id") %>"> <img src='<%#"Photo_Gallery.ashx?Id="+ Eval("Id") %>'> </a>

Fancybox脚本

<script type="text/javascript">
  $(document).ready(function () {

      $('.fancybox').fancybox();

  });

这也与视频相同，它将图像本身加载到空白页面上而没有叠加效果

我相信只需创建href的动态链接，一切都可以解决任何帮助都会非常感激。

Answer 1

<强> 1）。关于视频：

Fancybox媒体助手仅支持来自热门视频网站的格式（youtube，vimeo，dailymotion等）;请参阅此帖子以获取进一步的参考：https://stackoverflow.com/a/11388765/1055987

由于您的视频存储在本地，因此您需要播放器来执行它们（Fancybox不包含任何视频播放器），因此您可以使用jwplayer或medialelement.js。

请参阅此文章，了解如何使用 jwplayer https://stackoverflow.com/a/14326919/1055987，其中包括代码和演示。

<强> 2）。关于图像：

链接中的href

href="<%#"Photo_Gallery.ashx?Id="+ Eval("Id") %>"

没有告诉fancybox您正在打开图片，因为该链接没有图片扩展名（.jpg，.png，.gif），因此您必须强制type内容。

查看此帖https://stackoverflow.com/a/17554660/1055987，了解三种不同的方法。这也可以在http://fancyapps.com/fancybox/#support＆gt;＆gt;中找到。常见问题解答标签＆gt;＆gt;第5号

既然你是菜鸟（你说过），你必须阅读和学习的内容比你想象的要多，但上面的链接是一个很好的起点。

Answer 2

对于初学者来说，@ JK的回复指向了正确的方向，因此，JK的一大部分功劳归于JK，用于整理我的查询。
我发布我的回答只是因为我可能正在寻找与我相同的查询。这是我可以调整的确切答案。

视频

 <a href='<%# Eval("Link")%>' class="fancybox-media" >
 <img src='<%# Eval("Image_Id")%>' />

这是客户端的代码。在服务器上，我给了一个单独的视频和视频ID。图片。（如何获取该视频的图片缩略图Read here

与<head><head/>中的fancybox JS一起调用使用fancybox媒体
<script type="text/javascript" src="fancybox-media.js"></script>
那应该为视频做，你的播放器会弹出＆amp;播放视频

图片
很简单，只需添加data-fancybox-type="image"电话即可。
Read Here有关@JK的详细信息

关于它的人。

来自数据库的动态链接Fancybox href（asp.net）

2 个答案: