search

banthagroup / fslightbox

An easy to use vanilla JavaScript plug-in without production dependencies for displaying images, videos, or, through custom sources, anything you want in a clean overlying box.
MIT License
351 stars 30 forks source link

[SOLVED] Not works with Google Cloud Storage images URLS #124

Closed joaom182 closed 4 years ago

joaom182 commented 4 years ago

I'm trying to render a gallery imagem from Google Cloud Storage, and when lightbox open, return "Invalid source".

Example of image URL https://storage.googleapis.com/sellers-pictures/f1305769-2965-43ba-ba30-cd7a8ce2a647.jpg

Screen Shot 2020-07-25 at 10 15 59
ffd8 commented 4 years ago

Just ran into similar issue with a cloud bucket – could either be a CORS issue, or maybe you just need to specify it's an image, adding data-type="image" to the <a> tag...

joaom182 commented 4 years ago

@ffd8 yeah i've confirmed, it's a CORS issue. But when i render inline <img /> tag, the image is rendered. But when i open the light box, throw the CORS issues on console.

I'm trying to configure cloud bucket to works with wildcard origin CORS, but it's not working.

joaom182 commented 4 years ago

@ffd8 i've found the solution.

Create a json file, ex: storage-settings.json with the content:

[
  {
    "origin": ["*"],
    "method": ["GET", "OPTIONS"],
    "responseHeader": [
      "Origin",
      "Accept",
      "X-Requested-With",
      "Authorization",
      "Content-Type",
      "Content-Length",
      "Accept-Encoding",
      "X-CSRF-Token"
    ],
    "maxAgeSeconds": 1
  }
]

Apply this file to configure CORS on your bucket running the command:

gsutil cors set [PATH_TO_JSON_FILE] gs://[BUCKET_NAME]