Category Archives: Coding

jCarousel Lite and Fancybox

I don’t know if the reason there is no solution to this problem to be found is because it is just that simple or because no one else has run into this problem, but I thought I’d share, for others out there like me who barely understand javascript enough to install it, but not to troubleshoot it.

In April I spent one week working to get my portfolio website up. (Aside: Despite having written it up with php includes in its first incarnation, I decided to do it slightly differently so I had to edit each page to make the changes, mainly putting more of the head stuff in my include file. x.x That’s what I spent a few days doing.)

Over the weekend I decided to bite the bullet and move from Lightbox 2 with a “Coda Slider Effect” script to Fancybox with jCarousel Lite. I was so excited, thinking I’d move from the buggy Coda Slider Effect (Sometimes the slider would choose to slide vertically instead of horizontally, and on one especially annoying page, the slider would decide to wrap one of the three divs around, so going from the second to the third slide showed a diagonal top-right to bottom-left slide.) and the slow, bulky Lightbox 2 design and animation effect that I could never tweak to my liking. jCarousel Lite would, implied by the name, be a lighter javascript file, and with Fancybox running off the jQuery library as well, I could ditch the scriptaculous and prototype files.

I installed jCarousel Lite and Fancybox and set them all up on a Friday. Spent that night and the next morning trying to make them work at all. I don’t know what I did wrong there but I did manage to eventually get them working “out of the box” as promised.

The Problem

The big problem came when I realized in Fancybox when I had the next and previous navigation option turned on that the last image would repeat. I’d get to what I thought was the last image but there was still an arrow pointing to another image, which would just lead to a repeat of the same image. When I first clicked the last image and navigated to the first image, the same problem would occur, but in reverse. (That is, the first image would repeat.)

I combed the Fancybox support area. I tried using search engines to find a solution. jCarouselLite had no support area (not that it needs one, it’s so simple). I tried using a number of different searches, different words (repeat, same image, duplicate image, the list goes on). But no one else seemed to use the two scripts together, or to have the same problem I did.

Then, after letting my brain rest (staying up to four in the morning to fix javascript problems is a bad idea, I know, but it’s like scratching that itch you can’t reach!) I remembered that one function of the Carousel: to wrap around in an endless loop.

The Solution

I don’t know how jCarousel makes it work, and perhaps I could have skipped my javascript headaches weekend by just using jCarousel, but I liked the simplicity of the Lite script.

jCarousel Lite, in order to create that circular loop of images (or whatever content used) needs to make a duplicate of the first div. I just turned off the circular option, since I chose to use the external controls over the left and right navigation arrows.

That one little switch, and oh my gosh everything fell so nicely into place once I turned it off! The three days (or maybe two, if you don’t count the time I spent just trying to make the scripts work in the first place) I spent wracking my brains were over just like that!

Javascript, I don’t understand you, therefore I hate you.

deeper into WordPress

Woot! I feel accomplished! I edited a WordPress plugin tonight. *grin*

Okay, it was mostly the HTML code output that I edited, not really PHP or Javascript (basically code I don’t know), but still. I managed to not screw up my blog while working inside a file with PHP. :3

I also learned what “\n” or “backslash n” means. (New line.) hee. I’m learnin’!

Also, if you didn’t notice, I had a FlickrRSS plugin working in the sidebar before, but decided it’s not the way I want to go about inserting my photos.

Basically I want to upload a photo to Flickr and write a mini-blog entry in the description, then display both on my blog. But the sidebar is waaay too tiny for that (I think it’s too tiny for even the Twitter updates.)

Ideally I’d like the photo updates to show up with my blog entries, but I really don’t know how to go about doing that, so I guess I’ll just make regular WordPress entries linking to the Flickr image. How unspectacular. *snerk* That is, if I actually get around to doing photo updates. (I probably haven’t touched my camera for the past two weeks. How sad…poor camera.)

exactly relative sizes

Down to business. I’m forcing myself to write those reviews. Which doesn’t seem all that logical, because I keep this blog for myself, and why do it if I have to force myself? But oh well. I’ll try to write these in the order they came to mind.

This one’s from last quarter, around January or February. Hah! I learned in my CSS class to use em measurements for font sizes. (Or we could have used percentages. But I went with ems because of that whole GrC student thing I’ve got going.)

I never liked using relative sizing before, because I was used to applying sizes to practially each and every tag and all divs. So everything was shrinking relatively down from whatever size I’d set Body to. Grr, argh.

But in my CSS class I learned that you have to set the default in Body for the em to relate to, and that the default size for one em in all browsers (or just most?) is 16 pixels. Then my teacher taught us that each browser rounds off pixels differently, so to make your design look as similar as possible in different browsers, that we should go four decimal places when figuring em sizes. So to get ten point type, which is the same as 13 pixels (at least on my computers?), you’d have to use 0.8125 ems of the base 1 em, or 16 pixels. That way browsers aren’t randomly rounding up or down to the nearest whole pixel.

That isn’t what I want to talk about though. I always used point sizes because I thought they were relative to a real, absolute measurement: an inch. (A point is 1/72 of an inch.) And it seemed to prove true to me on all the computers I used. 10 point type on my 1024×768, 15″ laptop screen was pretty much the same size as on my 1152×864 17″. It was also a comfortable size on Mac’s 1600×whatever 20″ monitor — not sure if it was the same as my displays though.

But now, now the type on my websites shrink on the more robust monitors! Mac monitors, with their HD display and pixels equating to a fraction of an inch, show my type as barely more than piddly ant scratchings! Incredibly painful for me to read. I don’t know how other people stand it. I always seem to increase the size of type in browsers on bigger monitors. *meep* I’m an old granny at the age of early 20s. (Well okay, I’ve probably got the eyesight of a 90-year-old.)

I guess I should feel satisfied though; at least I know for certain that any and all browsers can increase my type size to the viewer’s liking.


I’m getting interested in XHTML and validating my sites, because two people (whose journals I read on the sly) are all gungho … gung-ho … I dunno how to spell it … my typing skills are going down. Blah. Two people are really pushing it in their journals. Since I like being right, I figured I’d try it some time.

I tried it tonight. I don’t want to use Transitional, I want to use Strict. (For I am teh stubborn that way. :b) Um, I don’t know how many errors I started out with, forgot to check, but uh, I got it down to 63. ^_^;; (I’m sure there were more than 100.) So! That’s something else I could busy myself with; trying to find out how to correct these errors. (Maybe I should stop using tables for my date headers. Ehehe. And figure out how to mix tags and XHTML and Javascript.)

The good news, though, is that my CSS validates. Ahaha. Very good.

The coding for my hit counters/trackers are reeeeeally outdated, as well. Hm. Wonder how far that “Do not change the coding or your account will be terminated” legality thing goes. “But, but, but, I was just updating your coding! It was still essentially the same!” Heh. :b