Одна функция jQuery работает с CSS другой

Question

Я только начинаю изучать jQuery, и у меня небольшая проблема с CSS. Пожалуйста, обратитесь к:

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

В первом примере фотогалерея выглядит так, как я хочу, а часть рассматриваемой галереи - это миниатюры. Вы можете видеть, что миниатюры - это точно уменьшенные версии полного изображения. Во втором примере я включил переключатель раскрытия / свертывания, который открывает галерею при нажатии на ссылку. Расширение работает просто отлично, но оно приводит к тому, что миниатюры не имеют размера и не размещаются должным образом.

Кто-нибудь знает, как это исправить? Спасибо !!

РЕДАКТИРОВАТЬ: Кто-то запросил код. Я не хочу добавлять слишком много, поэтому вот что я делаю: В моей голове, конечно, есть фото галерея Js, которая называется PikaChoose. Вы можете увидеть файл .js на http://www.paulgrantdesign.com/test77/photography/albumtest/jquery.pikachoose.js

Мой код развертывания / свертывания

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

Возможно, попробуйте скрыть раздел с галереей изображений после загрузки документа .Это может быть потенциальной причиной проблемы.В качестве примечания, возможно, стоит рассмотреть возможность использования jQuery fadeIn () или fadeOut () для изображения, отображаемого в этом разделе.

$(document).ready(function(){
    <your code to hide the that section>
});

Answer 2

Похоже, в галерее есть ошибка. Когда он инициализируется в элементе с display:none, размер уменьшенного изображения становится больше. Чтобы исправить это, вероятно, вам нужно инициализировать галерею в обратном вызове.

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

Я немного украду твой код:)