this question related previous post problem temporarily solved: caption text on image.
i had move website new server script doesn't work anymore. purpose load random image folder on website , display on image related paired text (image1.jpg & text1.txt).
after migration of site, nor images or text display. image displayed again changing line of code:
xmlhttp.open("get", caption, false); -> xmlhttp.open("get", caption, true); this has fixed problem of images attached text still not displayed.
the updated jsfiddle there: http://jsfiddle.net/totoleheros/es22a/7/.
html:
<img class="fullsize" onload="fiximage(this)" /> <div class="holder"> <div class="thecaption"></div> <img id="showimage" alt="random image" /> </div> javascript:
function fiximage( image ) { // change calculations match needs var show = document.getelementbyid("showimage"); if ( image.height > image.width ) { show.style.height = "331px"; show.style.width = math.round( (image.width / image.height) * 331 ) + "px"; } else { show.style.width = "200px"; show.style.height = math.round( (image.height / image.width) * 200 ) + "px"; } show.src = image.src; show.style.visibility = "visible"; } var maxpicturenumber = 166; // or whatever choose var rn = 1 + math.floor( maxpicturenumber * math.random() ); var url ="http://www.lvts.fr/images/randompictures/" + rn + ".jpg"; var caption ="http://www.lvts.fr/images/randompictures/" + rn + ".txt"; var xmlhttp; if (window.xmlhttprequest) { xmlhttp = new xmlhttprequest(); } else { xmlhttp = new activexobject("microsoft.xmlhttp"); } xmlhttp.open("get", caption, true); xmlhttp.send(); window.onload = function() { jq('.thecaption').html(xmlhttp.responsetext); jq('.fullsize').prop('src',url); }; $mirage(document).ready(function(){ $mirage('body').unbind('mouseenter'); var miragemenuconfig = { sensitivity: 3, interval: 30, over: revealmainmenuchildren, timeout: 500, out: hidemainmenuchildren }; function revealmainmenuchildren(){ $mirage(this).children("ul").css('opacity','1').slidedown(300); } function hidemainmenuchildren(){ $mirage(this).children("ul").fadeto(300, 0).slideup(300); } $mirage("#nav ul ul").parent().addclass("ddarrow"); $mirage("#nav ul ul").parent().append("<span></span>"); $mirage("#nav ul ul").css({ display: "none" }); $mirage("#nav ul li").hoverintent(miragemenuconfig); }); css:
#showimage { display: block; height: 331px; width: 200px; visibility: hidden; z-index: 1; } .holder { position: relative; width:200px; margin:0 auto; } .thecaption { position: absolute; width: 196px; height: 40px; background-color: #eeeeee; color: #000000; overflow: hidden; font-family: arial; font-weight: normal; filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity: 0.8; opacity: 0.8; z-index: 2; font-size: 10px; line-height: 0.9em; padding-top: 2px; padding-right: 2px; padding-bottom: 1px; padding-left: 2px; display: none; } .holder:hover .thecaption {display:block;} .fullsize { position: absolute; top: 0px; left: 0px; visibility: hidden; } i don't understand why moving website has generated issue. appreciated...
that's because speed of connection server changed - got slower.
ajax request asynchronous. happens send request, read result , response server comes in. use code instead:
var caption ="http://www.lvts.fr/images/randompictures/" + rn + ".txt"; $( document ).ready(function() { $.ajax(caption, { datatype: 'html', success: function(data, textstatus, jqxhr) { console.log('data', data); $('.thecaption').html(data); } }); $('.fullsize').prop('src',url); }); jquery prepare call success callback when server response comes in. see http://learn.jquery.com/ajax/
and should use $( document ).ready(); instead of window.onload note: work, document must served www.lvts.fr or you'll error:
xmlhttprequest cannot load http://www.lvts.fr/images/randompictures/79.txt. no 'access-control-allow-origin' header present on requested resource. origin 'http://fiddle.jshell.net' therefore not allowed access. 