Question

I’m just getting started with learning jQuery, and I’m having a small CSS issue. Please refer to:

http://www.paulgrantdesign.com/test77/photography/examples.php
and and …/examples2.php

In the first example, the photo gallery looks the way I want it to, and the part of the gallery in question is the thumbnails. You can see that the thumbnails are exactly scaled-down versions of the full image. In the second example, I’ve incorporated an expand/collapse toggle that opens the gallery when you click the link. The expanding is working just fine, but it’s causing the thumbnails to neither be sized nor placed properly.

Does someone know how to fix this? Thanks!!

EDIT: Someone requested some code. I don’t want to add too much, so here’s what I’m doing:
In my head, I of course have the include of the photo gallery js, which is called PikaChoose. You can see the .js file at http://www.paulgrantdesign.com/test77/photography/albumtest/jquery.pikachoose.js

My expand/collapse code is

jQuery(document).ready(function() {
  jQuery(".gallery").hide();
  //jQuery(".collapse").hide();
  //toggle the componenet with class msg_body
  jQuery(".title").click(function()
  {
jQuery(this).next(".gallery").slideToggle(500);
  });
});

jQuery(document).ready(function() {
  jQuery(".collapse").click(function()
   {
   jQuery(this).parent(".gallery").slideToggle(500);
  });
});

Answer 1

It looks like there is a bug in gallery. When it’s initialized in the element with display:none the thumbnails image size is bigger. To fix it probably you need to initialize the gallery in callback.

jQuery(".collapse").click(function () {
        jQuery(this).parent(".gallery").slideToggle(500, function () {
            $("#pikame").PikaChoose({ carousel: true, carouselVertical: true });
        });
    });

I steal your code a little 🙂