jQuery Forum

FireFox console gives me this error, no matter which picture I click:

Error: missing ] after element list
Sourcefile: http://www.ttmt.org.uk/forum/6_fancybox1/#
Line: 1, Column: 8
Sourcecode:
[object Object]

Also, this .js doesn't exists:
http://www.ttmt.org.uk/forum/6_fancybox1/fancybox/jquery.easing-1.4.pack.js

Yes I can see the errors in Firefox but what do they mean

This is how the generated HTML looks like from FireFox:

1. <a href="images/Planes/01.jpg" class="single_image" onclick="myFun('.single_image')">
2. <img src="images/Planes/01_th.jpg">
3. </a>

So the <a/> tag has two click actions, although I can see both actions take place: (1) alert and (2) image is show, maybe you should try:  "myFun('.single_image'); return(false);"

But most importantly: move your JavaScript into the <head/> section of the page.

Wrap your js between this:

1. $(document).ready(function () {
2. 
   
3.       ... your JavaScript here
   
4. }

Let's see what happens then.

Thanks for your suggestions Yomodo but it's still not working

Using an alert() for testing doesn't always proof anything.

Have you tried my suggestions? If so, what happens?

Better yet: what makes you so sure, you should disregard good-practices like mentioned above?

I tried your suggestions but it didn't work

Hi, in your current demo, you still have this commented out:

1. //var img_onClick = $('.single_image').fancybox();

Enabling this will at least active the fancybox again.

Although it still leaves us with the original problem, at least the code is a bit structured more now.
I've downloaded this demo site so I can play around myself.

Ok, this fixes it:

1.               success: function(xml){
2.                 $(xml).find('section').each(function(){
3.                   var id = $(this).attr('id');
4.                   var secName = $(this).attr('secName');
5.                   var divName = '#'+secName;
6.                   var nav_onClick = "slideContent('" + divName + "')";
7.                   var link = '<a href="#" onclick="' + nav_onClick + '">' +secName+ '</a>';
8.                   $('<div id='+secName+' class="section"><ul></ul></div>').appendTo('#content');        
9.                     $(this).find('img').each(function(){
10.                       var thumb = $(this).attr('imgName')+'_th.jpg';
11.                       var img = $(this).attr('imgName')+'_th.jpg'; 
12.                       var imgLink = '<a href="'+img+'" class="single_image"><img src="'+thumb+'"/></a>';
13.                       $('<li></li>').html(imgLink).appendTo(divName+' ul');
14.                     });
15.                 });
16.                 $(".single_image").fancybox();
17.               }

The last line: $(".single_image").fancybox(); will apply the fancybox to all elements with class ".single_image", in one go; no need to put this in the loop.

The myFun becomes obsolete.

Also, you might want to consider placing the .ajax() call in a seperate function, and then calling this function.
Just good-practice ;)

Thank you so much for that.