Fancybox, jQuery and Images

[Gazley]

Hi there (hoping Soma's in a good mood)

I now have my images available via paginated pages fully available to Google. Happy days!

Now, I want to enable Fancybox so that the whole gallery of images can be access form the same page, if the users prefers that. Here are some thoughts around approaches that I have considered :

Fancybox allows you to specify an array of values at run-time that consist of image href and title values. This is preferred because I don't want to create a bunch of links on the page.

This means that when I am generating the available Albums page that lists the albums that the user can see, for each Album, I will need to record/render each image URL (and any other data) for the collection of images in the Album, for as many Albums appear on the page.

Whilst I am familiar with Javascript, I am not that familiar with jQuery (I've been doing JS before jQuery and Ajax emerged). I wondered where to store this data and looking at the jQuery docs, it seems that I could use its .data() method and store the data associated to each Album's link or teaser thumb img. Does this sound a reasonable way of storing the data? The idea being that if the link or image is clicked, I could build the Fancybox config array/object and then load it.

I was also thinking that I could write out the values in PHP in the document.ready handler so they are handled when the page loads which might not need any storage because the handler and it contents would be generated via PHP.

The other way that I have considered is doing some kind of callback to PW (maybe using Ryan's new Web Service module) and query these image details when Fancybox is called.

I've found this posting http://processwire.c...wire/#entry1498 by Ryan and wondered whether this is all I need? I couldn't find any examples of the client-side Ajax call to return json from the page (just spotted it in the post)

I wondered what PW best practice around this might be and any recommendations you might have for loading Fancybox using its array/object based configuration options.

Thanks.

Edited August 27, 2012 by Gazley

[Soma]

I love this kind of questions.

I think one simple solution would be to have the list of images loaded via ajax (bootstrap PW and return the image array) or render a js object on the album page you will simple use when opening fancybox.

Simplest solution for now (other solutions up to others slower posters):

Add a link somehwere to the album <a href="#" class="showgallery">Show Gallery</a>

The jquery will be like this.

$('a.showgallery').fancybox([
   {href : 'img1.jpg', title : 'Title'},
   {href : 'img2.jpg', title : 'Title'}
 ],
 { ..fboptions.. }
);

Print that script using php and add the images string on runtime.

<?php
$imgstr = '';
foreach($images as img) $imgstr .= "{href : '".$img->url."', title : '".$img->description."'},";
?>
$('a.showgallery').fancybox([<?php echo substr($imgstr, 0, -1); ?>], { ..fbconfig.. });

Done. Not tested but you get the idea.

Edited August 27, 2012 by Soma
stupid editor!!

[Gazley]

Hey Soma,

Writing out the data using PHP works really well! -- thanks a lot!

[Soma]

One other comes to mind.

If you have multiple albums on same page, you could create a js config object with the different albums images.

var albums = {
 album1 : [ {href: 'image1', title: 'Title1'}, {href: 'image2', title: 'Title2'}, ],
 album2 : [ {href: 'image1', title: 'Title1'}, {href: 'image2', title: 'Title2'}, ]
};

Then create the album fancybox links:

<a href="#" rel="album1" class='album-link'>Album1</a>
<a href="#" rel="album2" class='album-link'>Album2</a>

And the fancybox init script like this:

$('.album-link').bind('click', function(e){
 e.preventDefault();
 var name = $(this).attr('rel');
 $.fancybox( albums.name, { .. options .. });
});