开发者

One jQuery function is messing with the CSS of another

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 inc开发者_开发知识库lude 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);
  });
});


Maybe try hiding the section with the image gallery after the document has loaded. That could be a potential cause of the problem. As a side note, maybe consider using jQuery's fadeIn() or fadeOut() for the image that's displayed in that section.

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


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 :)

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜