Fatal编程技术网
  • javascript/
  • Javascript 使用Tooptipster的任意滑块

Javascript 使用Tooptipster的任意滑块

javascript jquery

Javascript 使用Tooptipster的任意滑块,javascript,jquery,anythingslider,tooltipster,Javascript,Jquery,Anythingslider,Tooltipster,我有个奇怪的问题。我将使用Anything滑块和Tooltipster在图像上创建面标记。起初，我无法让两者一起工作，一个工作，另一个工作，但不是两者都工作。我认为这是因为使用的两个不同版本的JQuery之间存在冲突。我现在使用noConflict方法让它们一起工作，除了工具提示对滑块中的最后一个图像不起作用外，其他一切都很好 如果我更改图像的顺序，新的最后一个图像就是不起作用的图像–它始终是最后一个图像。我只需在最后一张图像后放置另一个列表项标记，而不包含任何内容，就可以让最后一张图像正常工作

我有个奇怪的问题。我将使用Anything滑块和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>
您不需要window.jQuery | | document.write和tooltipster前右下角对jQuery的最后一个引用。一个对库的引用可以很好地添加brroshan所说的内容，您可以考虑使用Real.js来轻松加载JQuery的本地版本，仅当从CDN加载失败时。谢谢@ BrROShanon的答复。如果删除对jQuery1.7.0的最后一次引用，则什么都不起作用。如果删除对jQuery1.8的第一个引用，情况也是如此。我发现我需要这两个插件一起工作。我想这就是问题的根源？