Question

我正在使用MAXIMAGE Jquery开发动态幻灯片。当Iam尝试将img标记元素附加到我的HTML页面时，它将无法正常工作。我还从服务器输出带有图像URL的警报，然后它被拾取。以下是我的代码。我很确定有些东西与maximage.min.js相冲突。请注意，如果我将maximage id更改为其他内容，则会显示图像！

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>

    <!-- Le Basic Page Needs
    ================================================== -->
    <meta charset="utf-8">
    <title>Viessmann Slideshow</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le Mobile Specific Metas
    ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- Le CSS
    ================================================== -->
    <link rel="stylesheet" type="text/css" href="slideshow/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="slideshow/css/style.css"/>

    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le Javascript
    ================================================== -->

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>    

    <!-- Le Favicons
    ================================================== -->  
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="slideshow/images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="slideshow/images/apple-touch-icon-114x114.png">

</head>
<body> 


<!-- Le Slider -->
<div id="maximage">
    <img id="show"  />        
</div>


<script type="text/javascript" charset="utf-8">    
    var urlstring = "http://localhost:8000";
    $(function() {      
            var logourl = urlstring + "/api/v1/image/?format=json";  
            $.ajax({
                type: "GET",
                url: logourl,
                dataType: "json",
                success:function(data){
                    alert(urlstring + data.objects[5].image);

                    $("#show").attr("src", urlstring + data.objects[2].image);
                }
              });       
    });     
</script>
<!-- Le Javascript -->
<script src="slideshow/js/jquery.cycle.all.js" charset="utf-8"></script>
<script src="slideshow/js/jquery.maximage.min.js" charset="utf-8"></script>
<script src="slideshow/js/scripts.js" charset="utf-8"></script>
</body>    
</html>

Answer 1

I found what the Mistake was. I had to call MAXIMAGE after the HTML elements have been added:

    var urlstring = "http://localhost:8000";



      $( document ).ready(function() {
        var logourl = urlstring + "/api/v1/image/";

        $.ajax(logourl,{
            dataType: "json"

        })

        .done(function( data ) {
              $.each(data.objects, function(i, obj){
                    var tag = $("<img>");
                    tag.attr("src", urlstring + obj.image);
                    tag.appendTo("#maximage");
              });
              jQuery('#maximage').maximage();
          });
        });

动态幻灯片 - JSON

1 个答案: