Question

For retrieving image from blobstore, I usually do the following and it works:

<img src="/image?blob_key={{ blob_key }}"></img>

As far as I read about fancybox and personally tried it:

$("a[rel=photo_collections]").fancybox({
'transitionIn'      : 'none',
'transitionOut'     : 'none',
});

<a rel="photo_collections" href="/image/photo.png"> Photos </a>
<a rel="photo_collections" href="/image/photo2.png"> Photos </a>

The above image gallery works if I have images in the folder.

So, my question is what if I want to retrieve images from Blobstore instead of folder?

So, I tried following it doesn’t work:

$("a[rel=photo_collections]").fancybox({
'transitionIn'      : 'none',
'transitionOut'     : 'none',
});

<a rel="photo_collections" href="/image/photo.png"> Photos </a>
<a rel="photo_collections" href="/image/photo2.png"> Photos </a>

// This part, the fancybox works but it doesn't display the image correctly. All it shows were some sort of binary data instead of image
<a rel="photo_collections" href="/image?blob_key={{ blob_key }}"            

Hence, I’ve two main questions here:

1. How to solve the problem mentioned above ?
2. If I wish to do something like Google Plus/Facebook Photo Viewer, where while viewing the images, user is able to make comments. Does this require HTML content gallery instead of just images gallery since I need more HTML form control?

EDIT

Following is the handler to serve the image retrieved from Blobstore:

class RemoteDisplayImageHandler(blobstore_handlers.BlobstoreDownloadHandler):
    def get(self):

    blob_key = self.request.GET.get('blob_key', None)
    blob_info = blobstore.BlobInfo.get(blob_key)

    logging.debug('blob_key=%s', blob_key)
    logging.debug('blob_info=%s', blob_info)

    if not blob_info:
        raise Exception('Blob Key does not exist')

    self.send_blob(blob_info)

Answer 1

Solved by using alternative:

            options.push({
                    'href'  : 'image_url',
                    'class' : 'iframe'
                });

            $.fancybox(options, {
                'padding'           : 0,
                'transitionIn'      : 'none',
                'transitionOut'     : 'none',
                'type'              : 'image',
                'changeFade'        : 0
            });