0

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.

Rob
  • 93
  • 1
  • 6
  • Your ajax link doesn't need to have the class `fancybox` since it only brings the links to the page. Then, when the links (and thumbnails) have been brought to the page by the ajax call, then you still need to click in one of them to fire the fancybox gallery. On the other hand, if you are expecting to fire the gallery from a single link, then you may need to have a different approach, either having the gallery elements in a variable or having them in a json file that you can read via ajax. – JFK Sep 30 '13 at 15:55

2 Answers2

0

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

Anil kumar
  • 4,107
  • 1
  • 21
  • 36
  • This method only works when the href and image src values point to the images, in my version they point to a php script that creates the values, hence the type:ajax. – Rob Sep 30 '13 at 14:05
  • ok then try with `$.fancybox.open(arr, { //your options here })` just like [this](http://jsfiddle.net/wg4MD/) – Anil kumar Sep 30 '13 at 14:23
  • Thanks, but I'm not sure this is what I need. The reason I'm trying to load the gallery using ajax is that there are many galleries on each page, each containing many images, all taken from a mysql database. I have tested a page loading all image references in to a hidden div but the page load is way to slow hence the need for an on-the-fly ajax solution. – Rob Sep 30 '13 at 14:48
  • you need to do some manipulations over here before proceeding to use `$.fancybox.open` – Anil kumar Oct 01 '13 at 04:35
  • OK but this is where I need help my jquery knowledge isn't broad enough. How to I insert an ajax result into $.fancybox.open([..ajax result here..]);. I have used ajax to update dom elements of my page but never to another jquery function. Anyone? – Rob Oct 01 '13 at 13:52
0

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.

WilliamStam
  • 254
  • 2
  • 13