fancybox ajax图片库

Im am trying to load a fancybox image gallery via ajax. It's my first time using fancybox and my jquery knowledge is limited. Here's what I have put together so far. Gallery link;

<a class="fancybox" href="galleryAj.php?galid=641"><img src="http://www.urllinktomyimage/4451_641.jpg" alt="#" height="140" width="210"></a>

the galleryAj.php echos a list of image links as follows;

<a class="fancybox" rel="gallery1" href="../images/4451_641.jpg" title=""><img src="../images/4451_641.jpg" alt="" /></a>

And here's the javascript

$(document).ready(function() {
$(".fancybox")
    .attr('rel', 'gallery1')
    .fancybox({
        type: 'ajax',
        padding : 0
    });
});

When I click the gallery link, all of the images appear in a single window next to each other, not as a slide show. I have trawled Google and stack overflow for answers without success. Hope someone can help. Thanks in advance.

Remove the type ajax and then just $(".fancybox").fancybox(); put like this to show them in gallery,

Explantion

HTML

<a class="fancybox" rel="gallery1" href="HREF1">
    <img src="SRC1" alt="" />
</a>
<a class="fancybox" rel="gallery1" href="HREF2">
    <img src="SRC2" alt="" />
</a>
<a class="fancybox" rel="gallery1" href="HREF3">
    <img src="SRC3" alt="" />
</a>
<a class="fancybox" rel="gallery1" href="HREF4">
    <img src="SRC4" alt="" />
</a>

SCRIPT

$(".fancybox").fancybox();

For more info you can check here

use a php page to show the image

sort of like

/images/thumbnail.php?file=this/is/my/path.jpg&w=100&h=100

so if you go to that url it will show the image itself

sort of imagecreatefromstring($file); type thing setting the encoding and stuff.

then just call fancybox normaly..

js

$(".fancy").fancybox({type:'image'});

html

<a class="fancy" href="/images/thumbnail.php?file=this/is/my/path.jpg&w=1000&h=1000">
    <img src="/images/thumbnail.php?file=this/is/my/path.jpg&w=50&h=50"/>
</a>

any file you pass to the thumbnail.php page will be rendered (i added the w and h gets cause you'll probably use the php side to resize before sending to the client)

in your case something like

js

$("#galary_area").load("/galaries.php",function(){
   $("a",this).fancybox({type:'image'});
})

and use the above stuff bout the php page calling the image

would also like to point out that using ajax to call html is sort of not best practises. you might want to consider using a javascript templting framework (mustache etc) and only return the JSON via ajax passing it to the template.