The computer geek part is probably obvious by how often I keep adding stuff to this blog. A lot of the stuff ends up on this blog for 1 day and then disappears. Some of the stuff (which I really like) stays. Yesterday I spent a bit of time adding a Lightbox to the blog. For those of you who have never heard of lightbox, it basically deals with the pictures. If you click on one of the pictures in this blog, usually they open in a new window (or tab). With lightbox, the picture actually opens in the same window as the blog. Lightbox puts a shadow on the blog and then opens the picture. If there are more than 1 picture in the post (or other similar posts since I set it up that way), you will be able to click through all of the pictures. I first found this when I was setting up my shopping cart program on my website. This was the first addon for my shopping cart that really blew me away. Since then, I have run into a few other websites using lightbox and I still love how this works.
Click Continue Reading to read more about Lightbox
When I set this up for my shopping cart program, it was very straight forward. The files were all the same, so basically it was just putting the new files in and VOILA! For the blog, it was a bit more difficult. First off, the website I found the instructions was for if you were hosting your blog on your own website. Well, that didn't work very well because I have my blog at blogger.
Since I have my own website, I did have a place to host the files necessary for Lightbox to work. I uploaded the files on my website. I edited the commands so Lightbox could find the files correctly on my site. I also had to add some extra lines of code to my blog template. Even though the instructions were very vague about where to put the code, no problem, I figured that out easy. Then I had to add some more code to the header (the very top/the logo at top) of the blog. Well blogger doesn't let you add anything to the header, so I ended up adding a HTML box right below the header. Still pretty easy...ok next. Oh wait, now here is the hard part. Not really all that hard, just very tedious. I have to edit the code for every picture on my blog! YIKES! So I edited the code.
Luckily I only edited the code for the first few pictures, because when I tried it out....NO GO! The pictures were opening in a new window. I tinkered with the code for a bit before I decided to take a different route. I went back and looked at the website of the guy who had written the instructions. I found his code in his website and I copied it. Pretty funny how the code was a bit different than the instructions he had given. So after I changed my code to match his...IT WORKED (sort of!) The only thing that wasn't working was the Previous, Next and Close wasn't showing up. No problem, that is easy to fix...but the hard part is figuring out why my code wasn't working, but his was.
I tinkered some more and nothing. So I started over using his code again. And I would change the code line-by-line until I finally got to the last line. Everything was still working at that point, but when I changed that last line, NADA!
Ok, so the last line was calling for a Javascript file. I looked at my file, it seemed ok. I didn't see any errors right away. Then I got the brilliant idea of stealing his code from that Javascript file on his website. Low and behold, the code was different than what I had. After changing that, IT WORKS! I had to make a few cosmetic changes (like the red, I don't like using the same black that everybody else uses!) I then spent a few hours going most of the pictures to get them working with Lightbox. I still need to go back and fix the pictures from the beginning of the blog.
Go ahead and test it out. Check out this link about my Post86 Fiesta collection. There are quite a few pictures in there. Just click on any of them and then you can use the Previous and Next buttons to scroll through the pics.
Ok, my geekiness is very happy with myself. Now I need to get back to some work.
4 years ago
0 comments:
Post a Comment