动态幻灯片 - JSON

我正在开发使用MAXIMAGE Jquery的动态幻灯片。当Iam试图将img标签元素附加到我的HTML页面时，它不起作用。我也从服务器输出一个带有图片URL的警报，并且它被拾取。以下是我的代码。我非常肯定，有什么与maximage.min.js冲突。请注意，如果我将maximage id更改为其他内容，则会出现图像！动态幻灯片 - JSON

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

来源

2013-11-25 AndroidKrayze

请问你对maximage的造型是什么样子？ –

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(); 
      }); 
     });

来源

2013-12-02 15:43:51 AndroidKrayze

动态幻灯片 - JSON

回答

相关问题