Solved

Firing Event for all visible images jCarousel scroller

Posted on 2011-03-24
7
784 Views
Last Modified: 2012-05-11
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
Comment
Question by:R1ND3R
  • 5
  • 2
7 Comments
 
LVL 12

Expert Comment

by:Amick
ID: 35216737
Try
#tooltip h3, #tooltip div { margin: 0; line-height: 13px; color: #f00; font-size: 1.1em; }      

0
 
LVL 12

Expert Comment

by:Amick
ID: 35216767
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
 
LVL 12

Expert Comment

by:Amick
ID: 35216807
Change your version of jQuery to the current release and all should be well.  Tested in 1.5.1.
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 12

Expert Comment

by:Amick
ID: 35216934
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
 

Author Comment

by:R1ND3R
ID: 35217387
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
 
LVL 12

Accepted Solution

by:
Amick earned 500 total points
ID: 35218040
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
 

Author Comment

by:R1ND3R
ID: 35222808
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now