jQuery Forum

Here are a couple of screenshots. The first an initial page load (history and cache cleared), ...



and the second after refreshing (also works once in cache).



See how it only displays the tops of the images, initially and how it displays more than the four to the right in the carousel?

Again, works fine after reloading the page, but to someone new to the site, this wouldn't be ideal.

If it's in the CSS, here is what I have:

.carousel {
    position: relative;
    font-size: 80%;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    width: 560px;
}

.image_carousel {
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 16px;
}
.image_carousel img {
    border: 1px solid #ccc;
    background-color: white;
    display: block;
    float: left;
    margin-top: 3px;
    margin-right: 4px;
    margin-bottom: 3px;
    margin-left: 4px;
    padding: 7px;
}

Thanks for any advice.

Dave

Hello jQuery Forum:

I'm new here, hope I'm posting on the correct board. I'lltry to keep it as short and simple as possible.

I'm working on a project for a client. I have some thumbnails set upto open in a Fancybox lightbox. I figured out how to get the titles todisplay INSIDE the box. Here is the script I have for that:

<script type="text/javascript">

$(document).ready(function(){
$(".fancybox").fancybox({
helpers: {
title : {
type : 'inside'
},
overlay : {
showEarly : false
}
}
});
});
</script>

But the question comes here. The client now wants more than fourthumbnails, so I went with the carousel approach, using carouFredSel,while still using the Fancybox lightbox feature. I got that to work,with the following jQuery.Thing is, how do I extract what's relevantabove to add to or edit the script I'm now using below?

<script>
$(document).ready(function() {

$("#foo1").carouFredSel({
circular: false,
infinite: false,
auto : false,
prev : {
button : "#foo1_prev",
key : "left"
},
next : {
button : "#foo1_next",
key : "right"
},
pagination : "#foo1_pag"
});

// Using custom configuration
$("#foo1 a").fancybox({
cyclic : true,
onStart : function() {
$("#foo1").trigger("pause");
},
onClosed: function() {
$("#foo1").trigger("play");
}
});
});
</script>

I admit, I am NEW to using jQuery, find it fascinating and look forwardto starting some lessons on it. But short term guidance to get this siteup and running would be greatly appreciated!

Here's a link to the way I want the titles to appear in thefancybox: http://www.watercolorsplus.com/New/birds.html

Here's a link to the set-up with the carousel (carouFredSel) withthe titles showing OUTSIDE the box, rather than INSIDE as I want: http://www.watercolorsplus.com/New/birds3.html

Thanks much!

Dave