Thank you for taking the time to respond to my question....
I am not vary good at Javascript and I am learning as I am going
along. I do most of my stuff with ASP.
Could you be so kind to tell me where I would place this code in the
code that I supplied ?
I managed to get this working by changing things and refresh. Takes me
a long time, but I learn....
If you could tell me where to PLACE THIS CODE AND SEE IT IN ACTION, i
CAN THEN TRY TO SEE WHAT TO DO AND HOW TO CHANGE IT...
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'});
});
OR IF YOU CAN, show me how to implement this bit, I will so greatfull.
Since the image elements are sort of dynamic it might be better to
use
live events with mouseover/mouseout, or mousemove
Thnak you again for your time.
Hugo
On Apr 10, 8:22 pm, jay <jay.ab...@gmail.com> wrote:
> If you want it directlybelowtheimagethe easiest thing to do would
> be to position it absolutely to this position when you hover over theimage.
> 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 theimageelements 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 withjcarouseland trying to showtextbelowmy images.
> > Like for example the reference nr or name of theimage.
>
> > 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 addtextbut it seems to show only one character that
> > I can see because it is behine the nextimage. I have then tried to
> > use the <BR> tagg but this does not move thetextdown.
>
> > 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 thetexthere 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.
>
> >Belowis code that I have tried to addtextto.
>
> > 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 + '" />Mytext
> > 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
> >texthere ???</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 quotedtext-
>
> > - Show quotedtext-- Hide quotedtext-
>
> - Show quotedtext-
