• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 804
  • Last Modified:

Firing Event for all visible images jCarousel scroller

I am trying to get a jQuery tooltip to get displayed when jCarousel items come into view. So when a user hovers over the item in view a tooltip will appear. I am using jQuery Tooltip plugin.

I have added my tooltip function to the:

itemLastInCallback: {
    onAfterAnimation: afterAnimationLastInCallback
}

But my tooltips do not get displayed in the carousel.

I have created a basic example of my issue here: http://jsfiddle.net/QAFZX/12/

I know this is a bit confusing and I hope someone will be able to help me.

Thanks!
0
R1ND3R
Asked:
R1ND3R
  • 5
  • 2
1 Solution
 
AmickCommented:
Try
#tooltip h3, #tooltip div { margin: 0; line-height: 13px; color: #f00; font-size: 1.1em; }      

0
 
AmickCommented:
Ignore that advice,  It worked once, showing a nice red H3 pop-up on a black background, but I went back to try it again and it failed, so there must be something else going on.
0
 
AmickCommented:
Change your version of jQuery to the current release and all should be well.  Tested in 1.5.1.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
AmickCommented:
My apologies. It just looked as if it worked. I didn't understand the problem before.  The tooltip fires on the first pass, and fails subsequently.
0
 
R1ND3RAuthor Commented:
Do you have any idea why this is happening and how I can get a javascript function to fire for those viewable images?

Any help is appreciated.
0
 
AmickCommented:
Yes, the way the plugins work together is such that tooltips doesn't see all of the images when it initializes, so needs to be updated on each group load.  You can prove that to yourself with this quick modification of itemLoadCallback.

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;
            }

            carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[i - 1]));
        }
        afterAnimationLastInCallback(carousel); //Inserted this line to test the theory
    };

Open in new window



Unfortunately, it will not allow the same tooltip to be initialized twice, so returns a null or blank tooltip on the second pass through. You can see this most clearly at flowers 1,2 and 3, then again at 10.
Flower 1,2,3 won't show a tooltip at all, because they were initialized upon instantiation. If you eliminate the initial call to afterAnimationLastInCallback($(this)), Flowers1,2 and 3 tooltips will be visible again.

The afterAnimationLastInCallback function has avoid writing tooltips for the already initialized.  I haven't done any further code analysis, but this may be an issue that occurs within tooltips, and may require modification of that code instead of your own.  If that's the case, please share your code with Jörn Zaefferer, the author of tooltips.

I hope this helps to point you in the right direction.
0
 
R1ND3RAuthor Commented:
Thanks for you help Amick.

I think I learnt more about how jcarousel works thanks to your previous post.

I have decided a different approach to getting a tooltip to display in my carousel which has worked.
0

Featured Post

[Webinar] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now