Home
Posts
Categories
Archive
ContactJavascript gallery with files stored on Google Drive
Google Drive offers 15 GB of free storage. Let's use this offer to build a photo and video gallery just with JavaScript and files stored on Google Drive.
As first, the pictures have to be uploaded to Google Drive and shared. Sharing can be done simply by selecting a file and then clicking on the share symbol.
Thereupon a dialog window opens. Click on the link "Change to anyone with the link".
Now we get the link to this file. We are not interested in the link because it cannot be used to serve as the source URL in an IMG tag. However, we copy the ID of the file from this link, as shown in the following screenshot.
Now open the gallery.html from the download below in a text editor and scroll to the line "Paste your id's below". Remove the example ID's and paste the ID's of your own files. Note that every ID have to enclosed in quotes and the IDs must be separated by commas just like in the example.
Copying the IDs for a large number of files can be very tiring. In my next post I will offer a solution how to automatically create a list with IDs of files in a folder.
How it works
As already described above, the offered link cannot be used to serve as the source URL in an IMG tag:
https://drive.google.com/file/d/1x5OB0bWUeOKc74xt_jn_iU62UmP3mz_X/view?usp=sharing
The link to the real file looks like following:
https://drive.google.com/uc?export=view&id=YOUR_FILE_ID
We just have to copy the ID from the offered link and exchange it with YOUR_FILE_ID. Now the link works link expected in the IMG tag.
<img src="https://drive.google.com/uc?export=view&id=1x5OB0bWUeOKc74xt_jn_iU62UmP3mz_X" />
Thumbnails
Google Drive can do more. They offers us the opportunity to request a special link for a thumbnail. This can be very useful in our gallery. Note the parameter "sz=h130" in the link below. The h stands for height and can also be exchanged with w for width. In our gallery, however, we want a fixed height of all pictures. The width is calculated proportionally. The real picture will be shown when clicking on the thumbnail.
<a target="_blank" href="https://drive.google.com/uc?export=view&id=1x5OB0bWUeOKc74xt_jn_iU62UmP3mz_X"><img src="https://drive.google.com/thumbnail?authuser=0&sz=h130&id=1x5OB0bWUeOKc74xt_jn_iU62UmP3mz_X" /></a>
Lightbox
Lightbox is a JavaScript used to overlay images on the current page. That fits to the gallery. The implementation is very simple. We simply enclose the link with a DIV and set the class to "lightbox".
<div class="lightbox"><a target="_blank" href="https://drive.google.com/uc?export=view&id=1x5OB0bWUeOKc74xt_jn_iU62UmP3mz_X"><img src="https://drive.google.com/thumbnail?authuser=0&sz=h130&id=1x5OB0bWUeOKc74xt_jn_iU62UmP3mz_X" /></a></div>
Lazyload
Lazyload is a JavaScript to speed up the loading of web sites. Images are only loaded as soon as they become visible. This is very useful if the gallery has a large amount of images. To implement Lazyload the IMG tags gets class "lazy" and "src"-property must be changed into "data-src".
<div class="lightbox"><a target="_blank" href="https://drive.google.com/uc?export=view&id=1x5OB0bWUeOKc74xt_jn_iU62UmP3mz_X"><img class="lazy" data-src="https://drive.google.com/thumbnail?authuser=0&sz=h130&id=1x5OB0bWUeOKc74xt_jn_iU62UmP3mz_X" /></a></div>
jQuery
Lightbox and Lazyload require jQuery. All three are included in the download below. Included is also a light version (gallery-simple.html) without Lightbox, Lazyload and jQuery.
Videos
Google Drive can do even more. They also offers us the opportunity to play video files. We just put the video link into an iframe with the same height like the pictures.
<iframe frameborder="0" height="130" src="https://drive.google.com/file/d/1DTRZyWQvZGsMY38vei7bOvGben2DSGuM/preview"></iframe>
Please note that the script offered in the download below not automatically differentiate between images and videos. For videos you have to put the prefix "vid-" in front of the ID you paste into gallery.html.
Result
Download:
Change log:
- Version 1.0: Initial version
Categories: Google HTML Javascript
