Question

我有一个奇怪的问题。我正在使用Anything Slider和Tooltipster在图像上创建面部标签。最初我无法让两者一起工作，无论是工作还是其他工作，但不是两者兼而有之。我认为这是由于正在使用的两个不同版本的JQuery之间的冲突。我现在通过使用noConflict方法让它们一起工作，一切正常，除了工具提示不适用于滑块中的最后一个图像！

如果我更改图像的顺序，则新的最后一张图像是不起作用的图像 - 它始终是最后一张图像。我可以通过在最后一个图像之后放置另一个列表项标签（没有任何内容）来获取最后一个图像。虽然这是一种可能的解决方法，但它会在滑块中留下一个空白图像，看起来不太好。

我应该说我不是程序员，到目前为止我刚刚想到这一切，但现在我感到难过，所以对于问题可能会有什么帮助。

这是我的标题代码：

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

使用任何滑块与Tooptipster

0 个答案: