 Okay, so last week I showed you how to use Huggin to create 360 panoramas with a series of photos And we're going to in that video I uploaded the photos along with some java script to make it allow you to pan full 360 non-stop on Desktop browsers as well as mobile devices That was a script that I did not write. I got it off github and I did modify it a little bit and that's what we're gonna look at today on getting that script and And modifying a little bit open up my web browser here, and I actually probably should show you how I got here It's called panorama 360, but if you just go to github and do a search on panorama You'll see that there's 68 java scripts For that and I'll click on this java scripts narrow it down It was actually already the second one on the list here the panorama 360 I'm not gonna try to say that guy's name, but we'll click on that You can just click this download zip file. I'm actually going to right-click it and say copy URL and I'm going to minimize that and I'm in the folder that I want to have my project in and I was just going to W get that zip file I'll unzip it and go into the file the folder it created called panorama 360 master Obviously, you can rename that folder and in this folder. We've got some sub folders and an index and a small HTML Index is basically the panorama is the full screen where the small is it's with inside a little Element on the page. In fact, we can look at both of them. Let me Let me type things properly Google Chrome. I'll open up the index. So here it is. This is the default Index not only can you scroll right now? I'm scrolling with my mouse wheel I can also grab and drag as you would drag with a touch screen. You'll also notice a little Gray box here that highlights when I hover over it and if I click it it could put me through to another URL And that's another feature that I didn't put into the ones I uploaded because I had no hot spots I think is what it's labeled as in the code So there's that and then we can also go small dot HTML, which you'll see is the same thing But it's within a little frame here So I can scroll left and right And so that is our examples. We're gonna go back to our index one because that's the one that we're gonna modify and Let's just have a quick look at that code because it's very very simple So I'm gonna use Vim as my text editor again always use whatever text editor you prefer to modify Bring this down a little bit just to make it easier to read so First off, I guess I should go back to the github page here and In here and actually this is the same thing we've downloaded so we can actually look at it on the file But if we go into our JavaScript folder here, so we got we got some CSS here blah blah blah We've got our default images And cursors here so you can modify those which we will be changing out the image here momentarily The read me file which doesn't really say much and You got the index possibly look at but if we go into our JavaScript folder here, you can see that It's using some jQuery code and here's the the jQuery Script that we're mainly working with here and as you can see it is released under the MIT license And the GPL license, so it is free and open source. That's good So it's always good to check what? Licenses the codes you're using are under to make sure that you are using them properly So moving on from there. Let's go back into the code Vim index And again, you can change the title of your page if you want. I'm just gonna leave that It's linking to the jQuery code online if you're gonna want to run this, you know Locally and not have to worry about internet connections. You may want to download that but we're not gonna worry about that too much So this is our Function here really our only JavaScript at this point, but we're going to add some more here in a moment And basically it's it's saying it's using jQuery style of coding and it's saying find the Object with the class the element with the class of panorama view and then add make it a panorama 360 So this this could be called anything as long as it coordinates with That right there so we can rename this but then we'll rename that and so you could theoretically have more than one on a page Going down here. We got our class for our panorama a little div tag for our view a Container and then here we have where our image is loaded so It knows because this image is within this Div tag with the class to make this a 360 panorama But you'll notice that not only does it have the source for the image And it says to use a hot spot Which is the little gray box that I showed you it also says the With and height of the image so you have to have the image width and height for this to work properly Which can be kind of annoying if you're going to be using multiple images The files I uploaded last week. I uploaded a separate HTML file for each image but we're going to work in some JavaScript today to make it so you can have one HTML and You know code and pass it an image file So and then it will calculate the width and height I have some alternate text once again not necessary. Okay, but then here it says map hot spots So here we're saying use hot spots and so it's going. Oh, okay. There's a hot spot for this image and it's saying, okay Here's the hot spot Create a rectangular shape at these coordinates It has some alternate text and then if you want to be able to click on that hot spots and give it a URL that's what you put there And then it's just got some information here down at the bottom about the image It's a very creative commons the image that it came with so just to simplify stuff. We're going to remove that there We're going to remove the hot spot I'm just going to remove the non-essential stuff for what we're doing just to make things easier to read we just say that okay So Here we're going to say once again each image has a different size The images I created last week just to keep the size down so they load faster on mobile devices We're 400 We'll get into that we're going to use this default image at first and then we'll switch it out with one of my images But what we're going to do here is so That we don't have to worry about having a web server because we could do some of this with PHP We're going to use JavaScript here To grab the image and Get its height and width So I'm going to say document Dot ready So I like to start all my jQuery stuff with that making sure the document is loaded now before we set the panorama here I'm going to say Var I am G equals new image so We're creating an image element here and Then we're going to say image dot on load We're going to do this function here Function and what is that function going to do? Well that functions going to Send h for the height so we'll say h is equal to the image height and w Image width and now We're going to say find the element With the class of Panorama Dash Container just still using the same Labels that they had in the default code obviously once again you can change that if you'd like and we're going to change the inner html And then what we're going to change it to is basically this information here except for without The actual image so we're going to say Image source let's put this Inside single quotes here I'm going to say plus IMG Dot source which we'll set here in a second plus And then we're going to say data dash With just as we have down here They're going to say that's equal to and then once again We're going to put in a JavaScript variable here of w that we created And really we could you know just put in That right there, but this line is going to be long as is and that's why we created the shorter variable of w So now we're going to say data Something's not color-coded right I have a quotations backwards here that a height equals plus H Plus again. I got something wrong there Tations This is this is all wrong That should be there That should be there see color coding helps okay, and Then we're going to say There we go. Okay so We're saying look for the container for the for the div tag that has the class of panoramic container Which is right there and we're actually going to do is we're going to remove everything inside it right now. Oops So it's empty to start, but then once our Code loads, and I still have something wrong here. That should be that okay Once our code loads, it's going to start adding stuff into our HTML making a little more dynamic so At this point We want to say yes that will indent it Properly there we go so Now we'll close that function And that should actually be tabbed in one more my tabs are a little off, but that's okay now. We're going to say IMG source equals and we'll say images forward slash and The name of an image and I'll just call it One dot jpeg we actually don't have an image in there yet Okay, so I don't think I explained that well while I was typing it So let's look over it again So our page is going to load and it's going to load the body tags and these div tags Which display nothing at this point because there's nothing in them, but the div tags Once the document is ready. So once all that is loaded. We're going to start with this function. This function is going to Create a variable object of image. What is image gonna be? Well, it's gonna be a new image. I'm sorry What is IMG gonna be? It's gonna be a new image. Okay, so we know it's an image and And I believe this is HTML 5 I don't believe this was available in previous versions being able to grab Image information like this. I could be wrong on that So then we're gonna say When IMG is loaded because it isn't loaded yet at that point Then we're going to get the height the width and then we're going to once again find this container which is right here and Inside it. It's HTML is going to be this with the variables, which is what we had before But now we're loading the image here So all and then again, then we're gonna make that a panorama So this all gets ready and waits for the image. Well here. We're going to load the image So the image source is going to be that or whatever wherever your image is going to be could be locally or remotely, you know So now we don't have to go and figure out our Height and width for each of our images so we can create this HTML code and just replace the Image now if you were running this on a web server you could Pass it information actually theoretically you could do it with JavaScript pass it information in the URL for the image I've never seen a very clean way of doing that with JavaScript, but with server-side scripts like PHP you can grab the get posts and get image URLs Either way We're saving our time in that we can use the same code over and over again And we don't have to go and figure out the image a height and width So that's basically what we did there So we took the original code and just made it so we don't have to figure out the height and width is basically what we did It's a little more coding, but saves you time if you're going to use this a lot. So anyway If I typed everything right, let's go into our folder images and I'm going to copy a Image that we created last week called cripple Creek view dot PNG. Oh, it's PNG and inside the I think most web browsers Even if I call a PNG a JPEG it will transfer it over properly, but let's do this, right? I'm going to say copy that to here as PNG then I'm going to go back into my image index or my Index HTML and I'm going to change this to PNG just because that's what my file is once again Theoretically you could put that in the URL and have your JavaScript look at the URL and cut through it I've never seen a clean way of doing that, but it can be done Or if you're actually running this on a server use PHP or Python or whatever your server side script is So anyway, we've done that if I've typed everything right and we go back here and hit f5 This is that 360 from up on the hill of cripple Creek This is the really long one that I adjusted Because it went up and down so much if you remember was the last thing I did in the tutorial last week So it's a very long 360 panorama and any second now. Well, we're back at the beginning again So we can just keep on spinning all we want We can drag with the mouse Has a little bit of kinetic activity there. So it keeps going even after you drag a little bit and let go So that is it We can quickly review here Again go to github get this code all you really have to do is download the code Put in the URL to your image and it's heightened with I Added a little bit for today's tutorial of adding that JavaScript code that finds out the heightened with for you So you don't have to do that now if you want to let me go into just as a little bonus here if you have image magic installed which is commonly installed and On I know my web server image magic is installed and it's commonly installed on web servers I believe because it's used in a lot of image manipulation manipulation on the server side Identify is One of the tools that is built in with it and if I do identify and the image Which is one dot png in this case and hit enter it tells you the name of the file the Type of image file it is and it gives you your height and width obviously you can go into any Graphic editor like gimp or Photoshop if you will And look at the that lots of times file browsers you can right-click and get properties But if you're working in a shell on a web server and you want to get the Size of an image you can do that you can also once again write it in with the JavaScript to get it as we did Or even PHP can do it But it's a little less Server-side hungry if you do it with JavaScript there's bonuses and negatives for both your a little more control if it's done on the server side But we're using JavaScript in HTML5 here anyway, so might as well do it on the client side so That is it for this tutorial. I hope that you enjoyed it. I hope that you come back next week I once again, I don't normally do tutorials on Wednesday. At least I haven't been Debating on whether I should start making Wednesday as a tutorial day of some sort And probably will in near future This is this was half a tutorial half a review on software and then the second half was modifying it So it was a little bit of a tutorial So again, thank you for watching films by Chris comm that's Chris of the K There should be a link in the description and as always, I hope that you have a great day