View the demo of the gallery at https://glitch-collection-gallery.glitch.me. In the website, you will see two textboxes. In the first one, enter your Glitch username (without the
khalby786. In the second textbox, enter your collection name. Now, collection names should be entered according to the URL of the collection. If the collection’s name is “My Big Collection”, then you should type it as "my-big-collection’. It is better to copy the name from the url of the collection page on Glitch. Click ‘Submit’ and you’ll see all the projects of that collection in the form of a slideshow!
Using it in your website
Here’s how you use it in your website:
- Make sure you have a
<div>element in your HTML file with a proper id where you want the collection gallery.
<div id = "collection-gallery"></div>
Download the script from https://glitch.com/edit/#!/glitch-collection-gallery-script?path=script.js:1:0 into a new
.jsfile in your project.
Call the script in your HTML file.
<script src = "collectionembed.js"></script> <script> createEmbed("element-id", "username", "collection-name"); </script>
createEmbed()function has 4 parameters:
element-idis the id of the element where you want the gallery to be. (Only id elements right now )
usernameis your username. (the username to whom the collection belongs)
collection-nameis the name of the collection you want to display. Again, collection names should be entered according to the URL of the collection. If the collection’s name is “My Big Collection”, then you should type it as "my-big-collection’. It is better to copy the name from the url of the collection page on Glitch.
Aaaand you’re good to go!
I recommend adding this only once, because adding it more than once can cause it to clash with the same ids. Or unless you can change the ids of the gallery components. I’m working on this…
The GeoGlitches blog had a view called web-ring that allowed you to display projects in a collection in a similar way. Check out the GeoGlitches blog here: https://glitch.com/~geoglitchies
I need help
For some reasons, the
Previous button does not work at times, can anyone tell me why? And does anyone know how to get the README of a project with the Glitch API?
PS. Private projects are hidden, just in case you’re wondering!
Let me know if you find any bugs or glitches. Feedback is welcome!
More embeds for Glitch user profiles, teams and projects coming soon…