0

好的，我知道这个问题已经被问过很多次了，而且对于那些被问到的问题似乎有很多答案。
但我在理解这些查询方面是个菜鸟，因为它与我正在寻找的内容有些不同。
我有两个查询，第一个是视频
1。我有一个动态存储图像和视频的数据库。
2. 现在在用户端，我想显示图像和视频
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")%>'，fancy-box 不会弹出并播放视频，而是会在没有弹出叠加效果的情况下全屏加载视频。
视频的花式盒子脚本是

$(文档).ready(函数 () {

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

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

              }

          }); });


我在 StackOverflow 上 发现了类似于在此处添加动态链接到 href的内容，
但是我是菜鸟，不太了解如何为图像实现

For Image
方法 ，我在 img src 和 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 创建动态链接来解决。
任何帮助将不胜感激。

4

2 回答 2

2

1）。关于视频：

Fancybox 媒体助手仅支持来自流行视频网站（youtube、vimeo、dailymotion 等）的格式；请参阅此帖子以获取更多参考：https ://stackoverflow.com/a/11388765/1055987

由于您的视频存储在本地，因此您需要一个播放器来执行它们（Fancybox 不包含任何视频播放器），因此您可以使用jwplayer或medialeelement.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 >> FAQ 标签 >> No. 5中找到

由于您是菜鸟（您说过），因此您必须阅读和学习比您想象的更多的东西，但上面的链接是一个很好的起点。

于 2013-10-22T22:54:58.880 回答
0

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

对于视频

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

这是客户端的代码。在服务器上，我为视频和图像提供了一个单独的 ID。（如何获取该视频的图像缩略图阅读此处 连同在 使用该fancybox媒体中

调用的fancybox JS应该为视频执行此操作，您的播放器将弹出并播放视频<head><head/>

<script type="text/javascript" src="fancybox-media.js"></script>


对于 Image
Simple，只需添加data-fancybox-type="image"调用。
阅读此处以获取@JK 提供的更多详细信息

就是这样，伙计们。

于 2013-10-28T19:16:42.123 回答