Me again....
I tried your code here like this. but it does not seem to work. Any
pointers ???
<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>';
div = $("<div style='display:none'>blah</div>")
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
size: mycarousel_itemList.length,
itemLoadCallback: {onBeforeAnimation:
mycarousel_itemLoadCallback}
});
});
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'});
});
</script>
On Apr 10, 8:50 pm, "globalpropertyonline....@gmail.com"
<globalpropertyonline....@gmail.com> wrote:
> 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 theimageelements 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-- Hide quotedtext-
>
> - Show quotedtext-
