Skip to main content

Making a Tourism Slideshow With HTML/CSS/JS (Ft. TraversyMedia)

 Video for reference here.

I'm one to encourage good rest over constant work. 

Yet I found myself awake at 2 AM listening to this video by TraversyMedia, because I was suddenly curious about making a full page image carousel.

I wanted to listen before I put hand to keyboard in coding, so at around 3 AM, I pulled up my machine with an idea.


 

I followed the instructions and did most of the code myself. Here, I outline:

  • The changes in my code from the original.
  • The demo mockup (Here)
  • The changes in the new Tourism: Welcome to Babylos! .The images may take a moment to load at first.

The original video code says

.buttons button#next
.buttons button#prev

But the code didn't work! The buttons were still as follows:

 

  • Unstyled
  • At the bottom

So I removed the .buttons part and everything was placed and styled appropriately.

It took a while to get the image to be full screen;

My original code was:

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100wh;
    height: 100vw;
    opacity: 0;
    transition: opactiy 0.5s ease-in-out;
}

Oops - I misspelled 'opacity' in the transition. No wonder it didn't work in the code! 😆 Fixed now!


See width and height? It shouldn't say wh and vw, but 100% for both.

.slide {
    position: absolute;
    top: 0;
    left: 0;
    /* I had w/h as vh and vw and what an issue */
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

Spelling; Achieved 👍🏾


Image-wise, it all comes from my copy of Animal Crossing; New Horizons and editing in Paint.net.

The size of the image around 1600 x 769. The initial images I had were stretched to fit. Some (Marcel's) were easy to resize. 

One (Static's) needed only a small adjustment of the clothing images and no resizing!

 Others (Opal's) was so unusually difficult, as layers began to cross and bleed into each other. I had to remake that one entirely.

In the future, I'll measure twice (or, at all...) and cut once.

Links do not work in the first slide of the show. Not sure why.

I kept going "I'm gonna need another panel". Hence how this grew from 3 small slides to 8. It was very fun, and I'll probably do more 3 AM coding in the future.

Remember: I'm available for consulting, temp roles.


Now Featured on Bridges in Tech!

Retweet?


Labels:

Comments

Post a Comment

Popular posts from this blog

Connecting IoT Devices to a Registration Server (Packet Tracer, Cisco)

 If you're seeing this post, I'm helping you, and you probably have LI presence: React and share this post to help me in return.   In Packet Tracer, a demo software made by Cisco Systems. It certainly has changed a lot since 2016. It's almost an Olympic feat to even get started with it now, but it does look snazzy. This is for the new CCNA, that integrates, among other things, IoT and Automation, which I've worked on here before. Instructions here . I don't know if this is an aspect of "Let's make sure people are paying attention and not simply following blindly", or an oversight - The instructions indicate a Meraki Server, when a regular one is the working option here. I have to enable the IoT service on this server. Also, we assign the server an IPv4 address from a DHCP pool instead of giving it a static one. For something that handles our IoT business, perhaps that's safer; Getting a new IPv4 address every week or so is a minimal step against an...
Post a Comment
Read more

Create a Simple Network (Packet Tracer) + A Walkthrough

Again; I've done this, but now there's so many new things, I'm doing it again. The truly new portions were...everything on the right side of this diagram; The cloud needed a coax connector and a copper Ethernet connector. It's all easy to install, turn off the cloud (Weird), install the modules. Getting the Cable section of Connections was an unusual struggle - The other drop down menu had nothing within. It required going into the Ethernet options and setting the Provider Network to 'cable', which is the next step AFTER the drop-downs. The rest was typical DHCP and DNS setups, mainly on the Cisco server down there. The post is rather short - How about adding a video to it? Find out what A Record means - This site says 'Maps a name to an IP address', which is DNS. So it's another name for DNS? You can change them (presumably in a local context) to associate an IP address to another name.
Post a Comment
Read more

Securing Terraform and You Part 1 -- rego, Tfsec, and Terrascan

9/20: The open source version of Terraform is now  OpenTofu     Sometimes, I write articles even when things don't work. It's about showing a learning process.  Using IaC means consistency, and one thing you don't want to do is have 5 open S3 buckets on AWS that anyone on the internet can reach.  That's where tools such as Terrascan and Tfsec come in, where we can make our own policies and rules to be checked against our code before we init.  As this was contract work, I can't show you the exact code used, but I can tell you that this blog post by Cesar Rodriguez of Cloud Security Musings was quite helpful, as well as this one by Chris Ayers . The issue is using Rego; I found a cool VS Code Extension; Terrascan Rego Editor , as well as several courses on Styra Academy; Policy Authoring and Policy Essentials . The big issue was figuring out how to tell Terrascan to follow a certain policy; I made it, put it in a directory, and ran the program while in that ...
Post a Comment
Read more