CODEWITHSUNDEEP
javascriptjqueryanythingslidertooltipster
user4455111
user4455111

Reputation:

Using Anything Slider with Tooptipster

I have an odd problem. I’m using the Anything Slider in conjunction with Tooltipster to create face tags on images. Initially I could not get both to work together, either one worked or the other but not both. I figured this was due to a conflict between the two different versions of JQuery being used. I have now got them working together by using the noConflict method and everything works fine except the tooltips don’t work on the last image in the slider!

If I change the order of the images, the new last image is the one that does not work – it’s always the last image. I can get the last image to work simply by putting another list item tag (without any content) after the last image. Whilst this is a possible workaround, it leaves a blank image in the slider, which does not look good.

I should say I’m not a programmer, I’ve just figured all this out so far but now I am stumped so any help would be appreciated as to what the problem might be.

Here is my header code:

<head>
<meta charset="utf-8">

<title>Gallery Testing</title>

<!-- *** AnythingSlider JavaScript and Styling Links *** -->

<!-- jQuery *** required *** -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../js/jquery.min.js"><\/script>')</script>

<!-- Syntax highlighting *** required *** -->
    <link rel="stylesheet" href="../../css/prettify.css" media="screen">
    <script src="../../js/prettify.js"></script>

    <!-- jQuery (required) & jQuery UI (for this demo only) -->
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css">
   <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

    <!-- Anything Slider optional plugins -->
    <script src="../../js/jquery.easing.1.2.js"></script>

    <!-- Anything Slider -->
    <link rel="stylesheet" href="../../css/anythingslider.css">
    <script src="../../js/jquery.anythingslider.js"></script>

    <link rel="stylesheet" href="../../css/theme-metallic.css" media="screen">

    <!-- AnythingSlider optional FX extension -->
<!--    <script src="../../js/jquery.anythingslider.fx.js"></script>
-->
    <!-- for Thumbnail slider -->
    <link rel="stylesheet" href="../../css/page.css">
    <script src="js/page2-slider-thumbnails.js"></script>


<!-- *** ToolTipster JaveScript and Styling Links *** -->

    <link rel="stylesheet" type="text/css" href="../../css/tooltipster.css" />
    <link rel="stylesheet" type="text/css" href="../../css/themes/tooltipster-light.css" />
    <link rel="stylesheet" type="text/css" href="../../css/themes/tooltipster-shadow.css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.0.min.js"></script>
<script type="text/javascript" src="../../js/jquery.tooltipster.min.js"></script>

<!--******************************************************************************* --> 

<!-- AnythingSlider Java Script Functions -->

<!-- 
***********************************************************
 START - This is the JavaScript required for each face tag.  
 Each tag must have a unique ID $('#uniquename'). 
***********************************************************
-->

<!-- Example Image Tag Info - Tag No 1 -->    
<script>
        var js = $.noConflict();
        js(document).ready(function() {
            js('#img1-tag1').tooltipster({
            animation: 'fade',
   delay: 100,
   theme: 'tooltipster-shadow',
   touchDevices: true,
   interactive: true,
   trigger: 'click',    
                content: $('<span><h4>Fred Bloggs</h4></span>')
            });
        });
</script>


        <link href="../../css/skins/oka_skin.css" rel="stylesheet" type="text/css" media="screen">

</head>

Upvotes: 0

Views: 60

Answers (0)

Related Questions