Solved

Firing Event for all visible images jCarousel scroller

Posted on 2011-03-24
7
786 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Changing Two Areas of a Page 5 17
jQuery for Each 12 20
asp.net mvc5 6 17
Most efficient JavaScript way to verify if variable matches any value in the list? 6 22
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

777 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