Creating a blob image gallery with fancybox

Question

In fancybox examples, you can create a fancybox gallery as follows:

$("#fancybox-manual-c").click(function() {
  $.fancybox([{
    href: '1_b.jpg',
    title: 'My title'
  }, {
    href: '2_b.jpg',
    title: '2nd title'
  }]);
});

and in html you have to create a link, for example:

<a id="fancybox-manual-c" href="javascript:;">Open gallery</a>

But the problems are that my photos are BLOB), and I don’t know how I can get this way to the picture. Maybe someone knows how I can do this?

I need my gallery, which needs to be opened by clicking on this link.

I can get the image data using ajax and then try to do something with it, but this did not work:

$.get("imgView.php", {
  image_id: 5
}, function(data) {
  $.fancybox({ type: 'image' }, 
    [{
      href: data,
      title: 'My title'
    }, {
      href: '2_b.jpg',
      title: '2nd title'
    },{
      href: '3_b.jpg'
    }], {
    helpers: {
      thumbs: {
        width: 75,
        height: 50
      }
    }
  });
});

Answer 1

Have you tried using a base64 source? A result like this.

<img alt="Embedded Image" src="data:image/png;base64,iVBORwAAANSU...hJUSKmfmdfm" />

data:image/jpeg;base64or data:image/png;base64can be used based on a file.

$.fancybox({ type: 'image' }, 
    [{
      href: "data:image/png;base64," + data,
      title: 'My title'
    }, {
      href: '2_b.jpg',
      title: '2nd title'
    },{
      href: '3_b.jpg'
    }], {
    helpers: {
      thumbs: {
        width: 75,
        height: 50
      }
    }
  });