0

Hello I have a folder with a few images, and im using FancyBox to show them in a gallery. But puting one by one takes too much time and I have to go back to the code to put another picture. I was wondering if anyone knew a JS that could put in a FancyBox Gallery all the images in a certain folder to be put automatically. Right now Im doing this:

<div class="selCuad" id="Reg"><a class="fancybox-thumb aMenu" rel="fancybox-thumb" href="http://farm9.staticflickr.com/8507/8454547519_f8116520e1_b.jpg" title="Ayvalık, Turkey (Nejdet Düzen)">GALERÍA</a>
        <a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm8.staticflickr.com/7152/6394238505_c94fdd1d89_b.jpg" title="Sicilian Scratches   erice (italianoadoravel on/off coming back)"></a>
        <a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm9.staticflickr.com/8481/8215602321_69d9939b8b_b.jpg" title="The Trail (Msjunior-Check out my galleries)"></a>
        <a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm9.staticflickr.com/8200/8220393833_e52cabfe80_b.jpg" title="Trees (Joerg Marx)"></a>
        </div>

I want to put maybe one anchore and let a JS call the rest. Could this be made? Im searching on my side also. If I find a answer Ill post it here :D

Cœur
  • 37,241
  • 25
  • 195
  • 267
Jurgen Feuchter
  • 544
  • 1
  • 7
  • 29
  • 1
    Reading files from a folder? I guess you rather need php for that. I wrote this tutorial that reads images from a folder and creates the thumbnails and links automatically using php http://www.picssel.com/create-a-filtered-image-gallery-with-jquery-and-fancybox-part-2-create-image-thumbnails-with-php/ (This tutorial assumes that you are comfortable with php commands and syntax.) Saludos Regio – JFK Oct 31 '13 at 03:17
  • Thats a really cool. I like it, but could I make it work so that I have that open up by an anchore instead of the thumbnails? Im not that familiar with php :S – Jurgen Feuchter Oct 31 '13 at 05:41
  • Whatever you put inside the anchor, text or thumbnail, it's up to you. Reading files from folder with pure javascript is impossible (mostly for security reasons) unless you use an external module/API or calling a php script via ajax. – JFK Oct 31 '13 at 06:17
  • Ok Ill see if I can adapt your exaple to fit in my page :D. Still is a really good tutorial. Thanks for the help :D – Jurgen Feuchter Oct 31 '13 at 06:22

1 Answers1

2

If you're willing to use some javascript and constrain yourself within certain limitations, you could make a helper function that can speed up the process for you.

Fancybox API allows you to call a function to generate a new gallery on the fly:

$.fancybox( [A], {B});

Where [A] is an array of objects, each one specifying a content object (and the order in wich they appear in the fancybox presentation will correspond with their index in the array); and {B} is an options object containing the customisations you want for this instance of fancybox.

The content objects can have multiple optional properties that fancybox uses to enrich the presentation, such as a title for the image, but in this case we only need the address path, leaving you with e.g:

var content = {
    href: "path/to/image.jpg"
};

If you have your images in a known location and named in secuential numeric order, you can make a function that fills an array with all the individual locations of this images to pass to the $.fancybox( [A], {B}) function:

//remember that your first image must have "0" as number!!

function createPaths(prefix, amount, sufix) {
    var addresses = [];

    for(var i = 0; i < amount; i++) {
        var thisAddress = prefix + i + sufix;
        addresses[i] = { href: thisAddress };
    }

    return addresses;
}

Then you call this function for each whole presentation, eg:

//This variable will store 124 objects with
// the images' paths (path/to/0.jpg, path/to/1.jpg ... path/to/123.jpg)
var allImages_gallery_1 = createPaths("path/to/" , 124, ".jpg");

And finally, pass this array to $.fancybox();, but put it inside another function, like this:

function open_gallery_1() {
    $.fancybox( allImages_gallery_1, optionsObject );
}

Then, in your HTML you can make anything call this function with the onclick="" attribute, eg:

<img src="image.jpg" onclick="open_gallery_1();">
Oizem
  • 36
  • 4