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 that 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.