Fancybox href with dynamic link from database (asp.net)

Question

Ok, I know this has been asked quite a few & there's seems to be quite some answers to those that has been asked.
But I'm a NOOB at understanding those queries cuz' its somewhat different to what I'm looking for.
I have two Query, first for the Video
1. I have a database where Image & Video is stored dynamically.
2. Now on the user end, I want to show the image & the video
3. I'm generating the links by calling the Sqldatasource from the database.

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

(Till here everything is perfectly fine)

4. Now the issue is when i call the href='<%#Eval("Link")%>', fancy-box doesn't popup & play the video but instead its loads the video full screen without the popup overlay effect.
Fancy box script for the video is

$(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: {}

              }

          }); });

I found something similar to adding dynamic links to href here on StackOverflow
but lyk the noob i am, couldn't understand much how to implement the method

For Image
for the image, I'm calling the dynamic links on the img src & the href from the database

<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

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

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

  });

This too loadsthe same thing as the video, it loads the image itself on a blank page with out the overlay effect

I believe everything works around with just creating the dynamic link for the href.
any help would be immensely appreciated.

score 2 · Answer 1 · edited May 23 '17 at 12:10

2

1). Regarding the videos :

Fancybox media helper only support formats from popular video sites (youtube, vimeo, dailymotion, etc); see this post for further reference : https://stackoverflow.com/a/11388765/1055987

Since your video is stored locally, you will need a player to execute them (Fancybox doesn't include any video player) so you could either use jwplayer or medialelement.js for instance.

See this post for how-to with jwplayer https://stackoverflow.com/a/14326919/1055987, which includes code and demo.

2). Regarding the images :

The href in your link

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

doesn't tell fancybox that you are opening an image because the link doesn't have an image extension (.jpg, .png, .gif) so you have to force the type of content.

Check this post https://stackoverflow.com/a/17554660/1055987 for three different ways to do that. That is also found in http://fancyapps.com/fancybox/#support >> FAQ tab >> No. 5

Since you are noob (you said) you have to read and learn more than you think but the links above are a good starting point.

edited May 23 '17 at 12:10

Community

1
1

answered Oct 22 '13 at 22:54

JFK

40,963
31
133
306

Thanks a Ton, @JFK I'll go through the links & makr it the ocrrect answer if those help me. i beliv it wud. I found this link right here: http://stackoverflow.com/questions/11943673/using-fancy-box-and-httphandler-to-load-images wud it by any way help me if i use the "type":"image" syntax's in my existing code? thanks again. – Lemdor Oct 22 '13 at 22:57
& for the Video, i'm storing only the links (sorry i didnt specify that) the videos are from youtube. here is an example of a link being stored: http://www.youtube.com/embed/AZCkcJTjhVU & through source its calling the vid on an iframe. – Lemdor Oct 22 '13 at 23:06
@Lemdor : then your `$('.fancybox-media').fancybox(...)` should work fine for youtube, just make sure you are including the proper js file ``. BTW, fancybox 2 supports dynamically added links so you don't have to worry about it – JFK Oct 23 '13 at 00:25

score 0 · Accepted Answer · edited May 23 '17 at 11:50

For Starters, @JK's reply pointed me in the right direction, so, A major chunk of the credit goes to JK for sorting out my Query.
I'm posting my answer just incase someone as NOOB as me might be looking for the same query as mine. Here is the exact answer i could tweak around.

For Video

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

This is the code on the client side. On the server, I gave a separate Id for Video & Image. (How to get the Image thumbnail for that video Read here

Along with the fancybox JS called inside the <head><head/>
Use the fancybox media
<script type="text/javascript" src="fancybox-media.js"></script>
That should do it for the Video, your player will pop up & play the video

For Image
Simple, just add the data-fancybox-type="image" call.
Read Here for more details on that by @JK

That's about it Folks.

Fancybox href with dynamic link from database (asp.net)

2 Answers2