Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Google Drive Image Gallery Website JavaScript Google Script
Rating: 4.6 out of 5(9 ratings)
3,257 students

Google Drive Image Gallery Website JavaScript Google Script

Create a dynamic image gallery getting images from your Google Drive Folder and placing them on your website JavaScript
Created byLaurence Svekis
Last updated 11/2024
English
English [Auto],

What you'll learn

  • How to apply JavaScript AJAX and JSON
  • How to create a webapp with Google Apps Script
  • How to construct JSON object endpoint with data
  • How to read folder contents of Google Drive

Explore related topics

Course content

2 sections • 18 lectures • 51m total length

  • Introduction Image Gallery2:26

    Output images from Google Drive to your web site using JavaScript and Google Apps Script, delivering JSON data via AJAX to build an image gallery from a Drive folder.

  • Web Application Setup and start for development5:58

    Set up a Google Drive image gallery by creating a Drive folder and Google Apps Script web app, loading images into a web page via JSON and a modal viewer.

  • HTML Source0:06
  • Google Script Web App5:36

    Create a Google Apps Script web app that outputs JSON via doGet using the content service, deploy as an API, and fetch image data from Drive with Ajax.

  • Source Code0:03
  • Get Drive Images using Google Apps Script9:14

    Learn to fetch images from Google Drive using Google Apps Script, set folder id, loop through files, grant view permissions. Output a JSON feed for a web gallery.

  • Google Script Source Code0:10
  • Connect to WebApp JSON4:22

    Connect a Google Drive image gallery to a web app JSON feed using Apps Script and a fetch call in JavaScript, load DOM content, and render images with a modal.

  • JavaScript Source Code0:04
  • Create Page Elements JavaScript DOM createElement3:10

    Create image elements from json data using dom createElement and set their src. Add a click listener and style images to trigger a modal.

  • JavaScript Source Code0:08
  • JavaScript Popup Image Modal6:56

    Open a clicked image in a JavaScript-powered modal for a Google Drive image gallery. Display the image in the body with a styled close button and overlay.

  • JavaScript Modal Source Code0:34
  • JavaScript Popup Image Modal Part 23:53

    Debug and enhance the JavaScript popup image modal by adding a close function, enabling closure via the X or outside clicks, and loading new images from Google Drive.

  • Source Code0:16
  • Code Review Image Gallery8:09

    Review the image gallery app code, showing how the index page and modal viewer work, fetch image data via AJAX JSON, and how Google Apps Script doGet builds image data.

  • Final Source Code0:48

Requirements

  • JavaScript
  • Programming experience
  • HTML and CSS

Description

Create your own website that DYNAMICALLY GETS IMAGES from your Google Drive !!!!!

Learn more about JavaScript and how JavaScript ES6 can be applied to create amazing JavaScript projects.  Course is loaded with JavaScript Examples and perfect JavaScript for Beginners to learn more about JavaScript Online.  Writing JavaScript Code using vanilla JavaScript - no libraries no tricks this JavaScript tutorial the JavaScript Course will walk you through creating your own JavaScript code and provide many JavaScript Code Snippets for use in JavaScript programming.  Learn JavaScript with this step by step JavaScript Course.

Created with Google Apps Script - allows you to create WebApps with JSON content for your website that you can make an AJAX request and get those images directly showing on your webpage.

Get data from Google Drive and use that data within you JavaScript application.

Previous JavaScript knowledge is a prerequisites to this course - YOU MUST HAVE JAVASCRIPT EXPERIENCE

Course is focused on applying JavaScript to connect to web APIs and get back JSON data using Google Apps Script to construct the API.

Course covers:

  • How to search the drive folder and get the image information

  • How to output JSON data into a Google Script web app

  • Building your endpoint to connect to Google Apps Script web app

  • Using JavaScript fetch to connect to JSON data

  • Applying JavaScript forEach to loop data and use it in the code

  • Building Elements for the page and updating attributes

  • Adding CSS

  • Compete WebApp with Modal popup for fullsize viewing of images

  • Complete Gallery display of Google Drive Images.

Source code is included so you can copy and paste the code to try for yourself.

Step by step learning

Fast friendly support is always available within the Q&A section

Experienced instructor with over 20 years of experience ready to help you learn

You have nothing to lose - Join now and start learning to create your own version of this helpful application today!!!

Who this course is for:

  • Web developers
  • Web designers
  • Anyone who wants to learn more about Google Apps Script
  • Webmasters

Report abuse