CodingForums.com - jcarousel lite plug in help needed

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript frameworks (http://www.codingforums.com/forumdisplay.php?f=62)

- - jcarousel lite plug in help needed (http://www.codingforums.com/showthread.php?t=159846)

jcarousel lite plug in help needed

I am creating this carousel with jcarousel lite plug in but instead of
getting a carousel I am just getting a vertical static list of images
when loading it into a table cell with firefox. I have read that IE is
notroious for having this problem as well.
Upon pressing the next and prev buttons the list just hides and shows
itself.

I know that plug in is being called properly bc without the call for
the script, the toggling of the list with the buttons doesnt work.

I have gone over my code and several times and checked install notes
and other demo scripts, but still have same problem.

Here is my link to the page at issue

http://royalvillicus.com/photo_site/photo.html

I appreciate any help in solving this matter

Main reasoning for that is because your jCarousel initialization isn't located in the $(document).ready, but is instead floating freely.

Finalized, the code should look like:

Code:

 $(document).ready(function(){

         $("a#site").click(function(){

                 $("div.gallery").slideDown("slow");

                 $("span.menu").fadeIn("slow");

                 $("span.picture").slideDown("slow");

                 $("a#site").fadeOut("slow");

   });

        $("#pictures").jCarouselLite({

      btnNext: ".nextpic",

      btnPrev: ".prevpic",

      visible: 5,

      speed: 400,

      vertical: true,

        });

        $("#gallery").jCarouselLite({

      btnNext: ".nextgal",

      btnPrev: ".prevgal",

      visible: 5,

      speed: 400,

        });

 });

As for stuff hiding, the main cause for that is the following code:

Code:

$(document.body).click(function () {

      if ($("div:first").is(":hidden")) {

        $("div").slideDown("slow");

      } else {

        $("div").hide();

      }

    });

Where you're essentially telling it... "whenever I click on any part of the window, hide or show the first div." Also, I'd suggest you look into the #pictures gallery, because it doesn't seem to contain pictures, but htm files instead. Also... do have a look at the solution to your other problem in this forum as well, because I see you haven't implemented it either:

http://www.codingforums.com/showthread.php?t=158332