Tuesday, 18 October 2011

Modifying the jQuery and HTML

To make the panoramas work in the web page, I had to place the completed, reduced file size jpgs  into a web directory folder (root/images). I also had some premade HTML documents of the web pages, aswell as an index.


To link the image into the panorama, I had to open the web page in Textwrangler. I then had found the object that was the panorama window, and simple had to change the link from /images/test1.jpg to the name of the image (/images/panofinish.jpg) Once that had changed, I had to modify the length of the panorama. In the viewer object code, there was a height and width. The height was set to 400 (hence why my images were lowered to this height). The width was set to 0. To make the code work, I had to change the width value to the width of the image. To find this I found the jpg file > right click > get info. This showed me the dimensions of the image so I could change the code. I repeated this process for all four HTML pages. 


I also added a simple <div align="center"> tag, followed by a </div> just before the final </body> code to center everything.


Due to my images being different sizes, the speed changed between the four webpages. To fix this, I had a look at the jQuery code. The first thing I noticed is that jQuery is coded similar to CSS so was very easy to understand. The few variables down is "speed", set to a 5 digit number. After a little experimenting I discovered the higher the number = slower the image rotates. 


To change them for all 4 html files, I duplicated the jQuery file 4 times each with a different name (jquery1, jquery2 etc). Once these were created, I had to link each HTML to its own jQuery (otherwise they would all link to the same code, thus all having the same speed). This is done similar to how you link CSS to a webpage. In the header, there was coding that linked the webpage to the jQuery. I simply modified each of these on the four HTML pages to link to the relative jQuery. (html1 linked to jquery1, etc). This allowed me to have different speeds for my four panoramas. I played with the numbers alot until I achieved the perfect speed. The smaller the image width, the smaller the number needs to be. For example, my car panorama speed is around 15000, my restaurant speed is over 75000. 

No comments:

Post a Comment