a auto-updating carousel for your website
View Demo
·
Report Bug
·
Request Feature
Table of Contents
Google had no good way to embed google photos albums so I did it my self. To use this library you're gonna need to set up a proxy function to funnel the requests through I'll briefly cover the way I did it and include links to AWS's documentation. But as long as the proxy function passed into the script returns the right data it'll work.
- blur until load
- dynamic resizing
- load videos and photos
- auto updates pictures and videos using the just the album id
- grid and carousel display options
- minimal css for easy editing
To use swiper on your own site you'll need to set up an api/lambda/proxy thing to make the google requests with. Google Photos has Same-Origin headers so we can't just make the requests directly from the browser. There's a hundred different ways to do this but I'll go through doing it the way I did which is with AWS and API gateway.
- AWS Gotta have one
- Create a new lambda function with python 3.8:
- Copy and paste/somehow upload this code into your created function (you can straight up do this through their editor)
- Setup a REST API through API gateway create a GET Method either under a resource or under the root.
- Instructions: https://docs.aws.amazon.com/apigateway/latest/developerguide/api-gateway-create-api-step-by-step.html (Follow this but choose Lambda function instead of HTTP when choosing the Integration type)
- Setup a query string for the url and feed that into the lambda function. (The instructions are in the guide above)
- Enable CORS
- Instructions: https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors-console.html
- I would limit the cors to your domain, but for development you can leave it as is.
- Deploy the API
- Copy the Invoke Url we will need that later (depending how you set it up you may need to add the resource name after your invoke url)
- For example mine is
{invokeurl}/proxy
- For example mine is
- Add the CSS to your head tag.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/src/yoink.min.css">- copy the following code into your body
<div id="photos-container"></div>
<script type="module">
import embed_google_photos from "https://cdn.jsdelivr.net/npm/[email protected]/src/yoink.min.js"
async function make_request(url){
const proxy_url = '{{$invoke_url}}?url='
var response = await fetch(`${proxy_url}${encodeURIComponent(url)}`)
return response
}
embed_google_photos("{{$your google photos id}}", "photos-container", "{{$type}}", make_request, 240) //this last paramater is optional and is just the max-height when using grid layout
</script>- {{$type}}: is either 'grid' or 'carousel': see a demo here
- {{$your google photos id}} is the public id of your google photos album (its the last part of the sharable url)
- {{$invoke_url}}: is your invoke url
- Run the page and you should see your album pop up :)
If you wanna do the proxy some other way go for it you as long as its an async function and returns the data as a json formatted as following
{
"body": {
"data": "the request data, <- the request data format (in this case its an html string)",
"redirected": "Bool <- a boolean value based on whether the request was redirected (important for telling between pictures and videos)"
}
}- make the it so setting up the AWS function is a single command using like a bash function/ cloud formation script or figure out a better way to do proxies so you just need to use the library and no aws at all.
- comment my code better
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.
Arjun Gandhi - @arjungandhi06 - [email protected]