Can anyone help me figure out why this gallery plugin is behaving this way?

Question

Hello SO:

I am using jQuery and a plugin called Galleriffic to display some images and text on a website I am developing. I have only tweaked the CSS (size and color mostly) to fit my page, but for some reason the text that displays for the next image you click appears below the current text then when the old text fades, it slides up to the top.

Here is a link to my dev page.

Also, the main image does not appear in IE(8), compatibility mode does not change anything. The thumbnails, title and description all appear and change as intended. In the example pages for Galleriffic, IE functions just fine. As I mentioned above, I only tweaked the CSS for sizing and colors, so this should not have affected the image this way right?

Thanks in advanced.

Answer 1

When you click the next pic in your gallery, the plugin appends the new image text in a div after the currently displaying one. The plugin then starts a fade out animation on the current pic text, and then finally removes it from the DOM.

So while the current one is fading out, it keeps the new one below it, until it disappears, causing that snap effect.

What your trying to do is simple enough to not use a plugin. If you'd like, I'll help you write the logic for this gallery effect.

Answer 2

Ok the thing that actualy caused the problem is the fact that you commented out the section in your style sheet that makes the image caption kinda stay afloat to the top:

span.image-caption {
    display: block;
    /*position: absolute;
    width: 100px;
    top: 0;
    left: 0;*/
}

So changing this back i found makes it work as seem intended. But this then causes the image to float over the caption to the left. This i would fix by setting float: right on the div#gallary.

div#gallery { float: right; }

Then you will probably want to just play with the sizes and margins to make it look nice again.