If you want it directly below the image the easiest thing to do would
be to position it absolutely to this position when you hover over the
image. Something like this might work:
div = $("<div style='display:none'>blah</div>")
jcarousel.find("img")
.hover(
function(){
div.css({display:'block',position:'absolute',left:$(this).offset
().left, top:$(this).offset().top+$(this).height()});
$(document.body).appendChild(div);
},
function(){
div.css({display:'none'});
});
Since the image elements are sort of dynamic it might be better to use
live events with mouseover/mouseout, or mousemove
On Apr 10, 9:54 am, "globalpropertyonline....@gmail.com"
<globalpropertyonline....@gmail.com> wrote:
> 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;
>
>
>
> }- Hide quoted text -
>
> - Show quoted text -
