I am developing a dynamic slideshow using MAXIMAGE Jquery. When Iam trying to append the img tag element to my HTML page it will not work. I am also outputting an alert with the image URL from the server and it gets picked up. Below is my code. I am pretty sure that something is conflicting with maximage.min.js. Note that If I change the maximage id to something else then the image will appear!
<!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>
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();
});
});