带有来自数据库的动态链接的 Fancybox href (asp.net)答案

【问题标题】：Fancybox href with dynamic link from database (asp.net)带有来自数据库的动态链接的 Fancybox href (asp.net)
【发布时间】：2013-10-22 22:18:43
【问题描述】：

好的，我知道这个问题已经被问过很多次了，而且对于那些被问到的问题似乎有很多答案。
但我在理解这些查询方面是个菜鸟，因为它与我正在寻找的内容有些不同。
我有两个查询，首先是视频
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 不会弹出并播放视频，而是会在没有弹出叠加效果的情况下全屏加载视频。
视频的花式盒子脚本是

$(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
但是我是菜鸟，不太了解如何实现该方法

对于图片
对于图像，我正在调用 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 创建动态链接就可以解决所有问题。
任何帮助将不胜感激。

【问题讨论】：

标签： javascript jquery asp.net sql-server fancybox-2

【解决方案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 >> FAQ 标签 >> No. 5 中找到

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

【讨论】：

非常感谢，@JFK 我会浏览链接，如果这些对我有帮助，我会给出正确的答案。我相信它。我在这里找到了这个链接：stackoverflow.com/questions/11943673/… wud 如果我在现有代码中使用“type”：“image”语法，它对我有任何帮助吗？再次感谢。
& 对于视频，我只存储来自 youtube 的视频链接（对不起，我没有指定）。这是一个存储链接的示例：youtube.com/embed/AZCkcJTjhVU & through source 它在 iframe 上调用 vid。
@Lemdor ：那么您的 $('.fancybox-media').fancybox(...) 应该可以在 youtube 上正常工作，只要确保您包含正确的 js 文件 <script type="text/javascript" src="path/jquery.fancybox-media.js"></script>。顺便说一句，fancybox 2 支持动态添加的链接，所以你不必担心

【解决方案2】：

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

对于视频

 <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>
这应该是为视频做的，你的播放器会弹出并播放视频

图片
很简单，只需添加data-fancybox-type="image" 调用即可。
Read Here@JK 了解更多详情

就是这样，伙计们。

【讨论】：