[jQuery] jcarousel and text below image

[jQuery] jcarousel and text below image


Hi,
I am playing with jcarousel and trying to show text below my images.
Like for example the reference nr or name of the image.
I am showing images of properties from my database and allow the user
to scroll through the properties. If they like one, they can click on
it and it will then show a page with more details on it.
I have tried to add text but it seems to show only one character that
I can see because it is behine the next image. I have then tried to
use the <BR> tagg but this does not move the text down.
Here is my code and would you be so kind to try and help me or point
me in the right direction.
I am not sure if you can add the text here or If I have to add it in
the jquery.jcarousel.js
You can see the test URL here and would apreciate any help or advice.
http://www.somewhere2rent.com/test/
I am not sure what to change in the stylesheet, have tried to make
some options bigger or smaller but do not realy know.
Below is code that I have tried to add text to.
return '<a href="' + url_m + '" title="' + item.title + '" myrefval="'
+ item.myref + '" mydescval="' + item.mydesc + '" myCountryURLval="' +
item.myCountryURL + '" myCountryval="' + item.myCountry + '"
myRegionval="' + item.myRegion + '" myTownval="' + item.myTown + '"
myTermval="' + item.myTerm + '" myAreaval="' + item.myArea + '"
myagentcodeval="' + item.myagentcode + '"><img src="' + item.url + '"
width="175" height="125" border="0" alt="' + item.title + '" />My text
here ???</a>';
return '<a href="' + url_m + '" title="' + item.title + '" myrefval="'
+ item.myref + '" mydescval="' + item.mydesc + '" myCountryURLval="' +
item.myCountryURL + '" myCountryval="' + item.myCountry + '"
myRegionval="' + item.myRegion + '" myTownval="' + item.myTown + '"
myTermval="' + item.myTerm + '" myAreaval="' + item.myArea + '"
myagentcodeval="' + item.myagentcode + '"><img src="' + item.url + '"
width="175" height="125" border="0" alt="' + item.title + '" /><BR>My
text here ???</a>';
<script type="text/javascript">
function mycarousel_itemLoadCallback(carousel, state)
{
for (var i = carousel.first; i <= carousel.last; i++) {
if (carousel.has(i)) {
continue;
}
if (i > mycarousel_itemList.length) {
break;
}
// Create an object from HTML
var item = jQuery(mycarousel_getItemHTML(mycarousel_itemList[i-1])).get
(0);
// Apply thickbox
tb_init(item);
carousel.add(i, item);
}
};
/**
* Item html creation helper.
*/
function mycarousel_getItemHTML(item)
{
var url_m = item.url.replace(/_s.jpg/g, '_m.jpg');
return '<a href="' + url_m + '" title="' + item.title + '" myrefval="'
+ item.myref + '" mydescval="' + item.mydesc + '" myCountryURLval="' +
item.myCountryURL + '" myCountryval="' + item.myCountry + '"
myRegionval="' + item.myRegion + '" myTownval="' + item.myTown + '"
myTermval="' + item.myTerm + '" myAreaval="' + item.myArea + '"
myagentcodeval="' + item.myagentcode + '"><img src="' + item.url + '"
width="175" height="125" border="0" alt="' + item.title + '" /></a>';
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
size: mycarousel_itemList.length,
itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
});
});
</script>
.jcarousel-skin-ie7 .jcarousel-container {
-moz-border-radius: 10px;
background: #D4D0C8;
border: 2px solid #808080;
}
.jcarousel-skin-ie7 .jcarousel-container-horizontal {
width: 545px;
padding: 20px 40px;
}
.jcarousel-skin-ie7 .jcarousel-container-vertical {
width: 200px;
height: 545px;
padding: 40px 20px;
}
.jcarousel-skin-ie7 .jcarousel-clip-horizontal {
width: 545px;
height: 130px;
}
.jcarousel-skin-ie7 .jcarousel-clip-vertical {
width: 180px;
height: 130px;
}
.jcarousel-skin-ie7 .jcarousel-item {
width: 175px;
height: 125px;
border: 1px solid #fff;
}
.jcarousel-skin-ie7 .jcarousel-item:hover {
border-color: #808080;
}
.jcarousel-skin-ie7 .jcarousel-item-horizontal {
margin-right: 7px;
}
.jcarousel-skin-ie7 .jcarousel-item-vertical {
margin-bottom: 7px;
}
.jcarousel-skin-ie7 .jcarousel-item-placeholder {
}
/**
* Horizontal Buttons
*/
.jcarousel-skin-ie7 .jcarousel-next-horizontal {
position: absolute;
top: 65px;
right: 5px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(next-horizontal.gif) no-repeat 0 0;
}
.jcarousel-skin-ie7 .jcarousel-next-horizontal:hover {
background-position: -32px 0;
}
.jcarousel-skin-ie7 .jcarousel-next-horizontal:active {
background-position: -64px 0;
}
.jcarousel-skin-ie7 .jcarousel-next-disabled-horizontal,
.jcarousel-skin-ie7 .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-ie7 .jcarousel-next-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}
.jcarousel-skin-ie7 .jcarousel-prev-horizontal {
position: absolute;
top: 65px;
left: 5px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(prev-horizontal.gif) no-repeat 0 0;
}
.jcarousel-skin-ie7 .jcarousel-prev-horizontal:hover {
background-position: -32px 0;
}
.jcarousel-skin-ie7 .jcarousel-prev-horizontal:active {
background-position: -64px 0;
}
.jcarousel-skin-ie7 .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-ie7 .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-ie7 .jcarousel-prev-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}
/**
* Vertical Buttons
*/
.jcarousel-skin-ie7 .jcarousel-next-vertical {
position: absolute;
bottom: 5px;
left: 43px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(next-vertical.gif) no-repeat 0 0;
}
.jcarousel-skin-ie7 .jcarousel-next-vertical:hover {
background-position: 0 -32px;
}
.jcarousel-skin-ie7 .jcarousel-next-vertical:active {
background-position: 0 -64px;
}
.jcarousel-skin-ie7 .jcarousel-next-disabled-vertical,
.jcarousel-skin-ie7 .jcarousel-next-disabled-vertical:hover,
.jcarousel-skin-ie7 .jcarousel-next-disabled-vertical:active {
cursor: default;
background-position: 0 -96px;
}
.jcarousel-skin-ie7 .jcarousel-prev-vertical {
position: absolute;
top: 5px;
left: 43px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(prev-vertical.gif) no-repeat 0 0;
}
.jcarousel-skin-ie7 .jcarousel-prev-vertical:hover {
background-position: 0 -32px;
}
.jcarousel-skin-ie7 .jcarousel-prev-vertical:active {
background-position: 0 -64px;
}
.jcarousel-skin-ie7 .jcarousel-prev-disabled-vertical,
.jcarousel-skin-ie7 .jcarousel-prev-disabled-vertical:hover,
.jcarousel-skin-ie7 .jcarousel-prev-disabled-vertical:active {
cursor: default;
background-position: 0 -96px;
}