I have spent many hours trawling the web for a solution to this problem without success. I have a page of image galleries, each one a thumbnail representing a complete gallery, I want to use fancybox to load the full gallery via ajax when one of the thumbnails is clicked.
Fancybox's non ajax solution is to include all of the gallery images with the thumbnail in a hidden div but this makes my page painfully slow to load so not an option.
There is an Fancybox ajax option that loads the contents of an external file but this loaded all images side by side and not as a slide show as I'd hoped.
The fancy box jquery that looks the most promising is as follows;
- $(".open_fancybox").click(function() {
- $.fancybox.open([
- {
- href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
- title : '1st title'
- },
- {
- href : 'http://fancyapps.com/fancybox/demo/2_b.jpg',
- title : '2nd title'
- },
- ], {
- padding : 0
- });
- return false;
- });
Is there a way I can do something like...
- $(".open_fancybox").click(function() {
- get the list of images and title from a php file via ajax here
- $.fancybox.open([
- insert the returned data here
- ], {
- padding : 0
- });
- return false;
- });
Im not sure if this is even possible, my knowledge of jquery/ajax is very limited, assumption that I know absolutely nothing in your answers would be appreciated.
Thanks in advance