fancybox does not work at all

Question

Im trying to connect a thumbnail to a bigger picture via fancybox.

this is how I add the files in the header (I have a master page)

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="css/style-gallery.css" rel="stylesheet" type="text/css" />
<script src="img_fancy/jquery.mousewheel-3.0.4.pack.js" type="text/javascript"></script>
<script src="img_fancy/jquery.easing-1.3.pack.js" type="text/javascript"></script>
<script src="img_fancy/jquery.fancybox-1.3.4.js" type="text/javascript"></script>
<script src="img_fancy/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
<link href="img_fancy/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.4.3.min.js" type="text/javascript"></script>

this is my thumbnails:

<div id="galleryContent">
    <%for (int i = 0; i < dt.Rows.Count; i++)
        {%>
        <div class="thumbnail"><a class="photoGallery" href="<%=dtbl_large_pic.Rows[i][1].ToString() %>" ><img src="<%=dt.Rows[i][1].ToString() %>" alt="wedding photo gallery" /></a></div>
        <% } %>

    </div>

and this is my jquery :

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

        });

</script>

any help? thanks!

have you gone through the [full documentation](http://fancybox.net/howto) for fancybox implementation? — Jason, May 23 '12 at 21:17

Tina CG Hoehr · Answer 1 · 2012-05-23T21:19:35.917

2

My guess is the ordering of script includes matter. Try putting jQuery first.

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="css/style-gallery.css" rel="stylesheet" type="text/css" />
<link href="img_fancy/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="img_fancy/jquery.fancybox-1.3.4.js" type="text/javascript"></script>
<script src="img_fancy/jquery.easing-1.3.pack.js" type="text/javascript"></script>
<script src="img_fancy/jquery.mousewheel-3.0.4.pack.js" type="text/javascript"></script>
</asp:Content>

edited May 23 '12 at 21:19

answered May 23 '12 at 21:11

Tina CG Hoehr

6,721
6
44
57

1

i would probably recommend that the CSS appear first, though, to minimize [FOUC](http://www.bluerobot.com/web/css/fouc.asp/) – Jason May 23 '12 at 21:12
@thormayer Blast! Is there more information we should know about? JavaScript console errors? I really want your page to work. – Tina CG Hoehr May 23 '12 at 21:16
@thormayer I got it!! You're including fancybox twice, the regular kind and packed kind! Get rid of one of them (the not packed one). – Tina CG Hoehr May 23 '12 at 21:20
@Lilina oh.. I've noticed there is an JS error ! : Object # – thormayer May 23 '12 at 21:20
@thormayer While I think about this error, please try the reordering suggested by LittleBigBot and removing the duplicate that I suggested. – Tina CG Hoehr May 23 '12 at 21:21
@Lilina OK! , Im trying. you mean this one: right ? – thormayer May 23 '12 at 21:25
1

@thormayer No, I mean `jquery.fancybox-1.3.4.js` and `jquery.fancybox-1.3.4.pack.js` ought to be the same. Keep the second one. I'm reading some other posts here that say there might be something wrong with Apache. I'm assuming your pages with just jQuery work fine? – Tina CG Hoehr May 23 '12 at 21:27
@Lilina actually this is my only JQuery code. (and I've got two "pack" files.. one is "easing" and one "mousewheel"? should I keep one of them or just get rid of them both ?) – thormayer May 23 '12 at 21:34
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/11663/discussion-between-thormayer-and-lilina) – thormayer May 23 '12 at 21:37
@thormayer If you're using both easing and mousewheel, you have to keep them, or you'll break the page. The docs say it's fine to include them. Sounds silly, but can you follow the path (compose the whole URL of the fancybox link) to make sure the app is actually loading the file? (this happened in another post where the address was mistyped. It would cause the "no method" error. So if your working folder is "http://myserver/www/mypics/mypage.html", check "http://myserver/www/mypics/img_fancy/jquery.fancybox-1.3.4.pack.js" – Tina CG Hoehr May 23 '12 at 21:38
1

@thormayer OMG I think I found it, there's an uncalled for jquery include in line 96 that should be removed (because it's already loaded above). `Each sample represents 2 pages. the photos in the samples will be change to your photos from your wedding!` I cannot test myself but I bet the twenty rep I got from this answer :) – Tina CG Hoehr May 23 '12 at 22:23

Belladonna · Answer 2 · 2012-05-23T21:22:09.410

The fancybox site tells us this order for calling scripts:

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="css/style-gallery.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="img_fancy/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="img_fancy/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="img_fancy/jquery.mousewheel-3.0.4.pack.js"></script>
<link rel="stylesheet" href="img_fancy/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

My guess is that you included jquery.fancybox-1.3.4.pack.js as well as jquery.fancybox-1.3.4.js?

Updated to include your files and filepaths.

score 0 · Answer 3 · edited May 23 '17 at 12:27

The elements that are (supposedly) bound to fancybox don't exist in the DOM when fancybox is initialized. They are rather dynamically added to the document via an asp loop (for) instruction that you have set.

Fancybox v1.3.x doesn't support dynamically added elements, however there is a workaround that you can find here.

In your case, tweak the script to match your own selectors like:

$("#galleryContent").on("focusin", function(){
 $("a.photoGallery").fancybox({
  // fancybox API options here
 }); // fancybox
}); // on

Please also check the other requirements on the post of reference.

Additionally, follow all the other people's recommendations:

Load jQuery first
Load either fancybox.js or fancybox.pack.js but not both
Don't forget to upgrade to jQuery v1.7.x

etc.

Note: To make sure that fancybox works properly, hard code a single link in order to test it like:

<a class="photoGallery" href="images/image01.jpg">test</a>

fancybox does not work at all

3 Answers3