{"id":62,"date":"2025-03-25T02:32:17","date_gmt":"2025-03-25T02:32:17","guid":{"rendered":"https:\/\/www.sethcormican.com\/internship-blog\/?p=62"},"modified":"2025-03-25T02:32:18","modified_gmt":"2025-03-25T02:32:18","slug":"week-7","status":"publish","type":"post","link":"https:\/\/www.sethcormican.com\/internship-blog\/?p=62","title":{"rendered":"Week 7"},"content":{"rendered":"\n<p>For this past week my main focus was on creating image galleries for the project for my client. These image galleries are to show off art projects that will be completed by students throughout the year for each grade level. Not only is it a gallery of images but when you click on the image it will drop down a second image that has information about the selected project.<\/p>\n\n\n\n<p>To make this image gallery I followed this tutorial.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Build an Image Gallery with Vanilla HTML, CSS, and JavaScript\" width=\"750\" height=\"422\" src=\"https:\/\/www.youtube.com\/embed\/vQc3EmFCWRw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>The image gallery is made using HTML, CSS, and JavaScript. I did have to make a change from the tutorial. The tutorial used the original gallery image as the bigger drop-down image, but I knew I wanted to use a different image and use the same script for multiple pages. To do that I used a data-set attribute in the HTML on each page. I also followed a consistent naming convention for the files. This allowed the script to read the data set in the HTML and know which images to select.<\/p>\n\n\n\n<p>This is the HTML data-set I used<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"378\" height=\"39\" src=\"https:\/\/www.sethcormican.com\/internship-blog\/wp-content\/uploads\/2025\/03\/image-2.png\" alt=\"\" class=\"wp-image-65\" srcset=\"https:\/\/www.sethcormican.com\/internship-blog\/wp-content\/uploads\/2025\/03\/image-2.png 378w, https:\/\/www.sethcormican.com\/internship-blog\/wp-content\/uploads\/2025\/03\/image-2-300x31.png 300w\" sizes=\"auto, (max-width: 378px) 100vw, 378px\" \/><\/figure>\n\n\n\n<p>This it being used in the JavaScript<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"692\" height=\"239\" src=\"https:\/\/www.sethcormican.com\/internship-blog\/wp-content\/uploads\/2025\/03\/image-3.png\" alt=\"\" class=\"wp-image-66\" srcset=\"https:\/\/www.sethcormican.com\/internship-blog\/wp-content\/uploads\/2025\/03\/image-3.png 692w, https:\/\/www.sethcormican.com\/internship-blog\/wp-content\/uploads\/2025\/03\/image-3-300x104.png 300w\" sizes=\"auto, (max-width: 692px) 100vw, 692px\" \/><\/figure>\n\n\n\n<p>This the file naming I used so the script could find them in the folder.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"272\" height=\"150\" src=\"https:\/\/www.sethcormican.com\/internship-blog\/wp-content\/uploads\/2025\/03\/image-4.png\" alt=\"\" class=\"wp-image-67\"\/><\/figure>\n\n\n\n<p>Here is the image gallery I created.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"896\" height=\"1024\" src=\"https:\/\/www.sethcormican.com\/internship-blog\/wp-content\/uploads\/2025\/03\/image-896x1024.png\" alt=\"\" class=\"wp-image-63\" style=\"width:377px;height:auto\" srcset=\"https:\/\/www.sethcormican.com\/internship-blog\/wp-content\/uploads\/2025\/03\/image-896x1024.png 896w, https:\/\/www.sethcormican.com\/internship-blog\/wp-content\/uploads\/2025\/03\/image-262x300.png 262w, https:\/\/www.sethcormican.com\/internship-blog\/wp-content\/uploads\/2025\/03\/image-768x878.png 768w, https:\/\/www.sethcormican.com\/internship-blog\/wp-content\/uploads\/2025\/03\/image.png 1054w\" sizes=\"auto, (max-width: 896px) 100vw, 896px\" \/><\/figure>\n\n\n\n<p>Here is what the drop down image looks like after a project is selected.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"966\" src=\"https:\/\/www.sethcormican.com\/internship-blog\/wp-content\/uploads\/2025\/03\/image-1-1024x966.png\" alt=\"\" class=\"wp-image-64\" style=\"width:503px;height:auto\" srcset=\"https:\/\/www.sethcormican.com\/internship-blog\/wp-content\/uploads\/2025\/03\/image-1-1024x966.png 1024w, https:\/\/www.sethcormican.com\/internship-blog\/wp-content\/uploads\/2025\/03\/image-1-300x283.png 300w, https:\/\/www.sethcormican.com\/internship-blog\/wp-content\/uploads\/2025\/03\/image-1-768x724.png 768w, https:\/\/www.sethcormican.com\/internship-blog\/wp-content\/uploads\/2025\/03\/image-1.png 1407w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>This week I am looking to finish filling out the other pages and work on a contact form. I am getting closer to being done with the website now that some of the harder pages are finished. <\/p>\n\n\n\n<p><br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>For this past week my main focus was on creating image galleries for the project for my client. These image galleries are to show off art projects that will be completed by students throughout the year for each grade level. Not only is it a gallery of images but when [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-62","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.sethcormican.com\/internship-blog\/index.php?rest_route=\/wp\/v2\/posts\/62","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sethcormican.com\/internship-blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sethcormican.com\/internship-blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sethcormican.com\/internship-blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sethcormican.com\/internship-blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=62"}],"version-history":[{"count":1,"href":"https:\/\/www.sethcormican.com\/internship-blog\/index.php?rest_route=\/wp\/v2\/posts\/62\/revisions"}],"predecessor-version":[{"id":68,"href":"https:\/\/www.sethcormican.com\/internship-blog\/index.php?rest_route=\/wp\/v2\/posts\/62\/revisions\/68"}],"wp:attachment":[{"href":"https:\/\/www.sethcormican.com\/internship-blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=62"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sethcormican.com\/internship-blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=62"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sethcormican.com\/internship-blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=62"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}