Hello everyone, I've recently created an HTML5 file that, when clicked on a specific href link, is supposed to display an image in a smooth and elegant manner. However, so far it hasn't been working for me as expected. Instead of smoothly popping up the image, it is opening a new web browser window, which is not the desired effect. What I'm aiming for is an effect similar to the one on Facebook, where the image fades open by fading out the background and glowing.
Here is the Javascript code I have:
xhttp=new XMLHttpRequest();
// alert("step 1");
xhttp.open("GET","xml/emp2.xml",false);
}
xhttp.send("");
xmlDoc=xhttp.responseXML;
var TestP = new Array();
function loadImg(n){
TestP[n] = xmlDoc.documentElement.childNodes[n].textContent;
var img = document.createElement('img');
/////////alert(TestP[n]);
img.src = TestP[n];
/////////alert(n);
/////////alert(TestP[n]);
//document.getElementById('right').appendChild(img);
elem = document.getElementById('right');
/////////alert(document.getElementById( 'right' ).firstChild);
child = elem.firstChild;
/////////alert(child);
if ( child )
elem.replaceChild(img, child);
else
elem.appendChild( img );
//for(var i =0; i<10 ; i++){
//TestP[i] = xmlDoc.documentElement.childNodes[(i*2)+1].textContent;
//var img = document.createElement('img');
//img.src = TestP[i];
//document.body.appendChild(img);
//}
//////////////////////////////////////////////////////////////////////////Write to another Window ///////////////////////////////////////////////////////////////////////////
function OpenNewWindow(n, width, height)
{
if( navigator.appName == "Microsoft Internet Explorer"){
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
xhttp.open("GET","http://www.multimediaprof.com/test/emp2.xml",false);
}
else if(navigator.appName == "Netscape"){
xhttp=new XMLHttpRequest();
// alert("step 1");
xhttp.open("GET","xml/emp2.xml",false);
}
xhttp.send("");
xmlDoc=xhttp.responseXML;
var TestP = new Array();
TestP[n] = xmlDoc.documentElement.childNodes[n].textContent;
var img = document.createElement('img');
/////////alert(TestP[n]);
img.src = url="pic/"+ TestP[n];
alert(img.src);
/////////alert(n);
/////////alert(TestP[n]);
//document.getElementById('right').appendChild(img);
///elem = document.getElementById('right');
/////////alert(document.getElementById( 'right' ).firstChild);
//child = elem.firstChild;
/////////alert(child);
alert(TestP[n]);
var newWindow = window.open("", "pictureViewer", "location=no, directories=no, fullscreen=no, menubar=no, status=no, toolbar=no, width=" + width + ", height=" + height + ", scrollbars=no");
newWindow.document.writeln("<html>");
newWindow.document.writeln("<body style='margins: 0 0 0 0;'>");
newWindow.document.writeln("<a href='javascript:window.close();'>");
newWindow.document.writeln("<img src='" + img.src + "' alt='Click to close' id='bigImage' border='0'/>");
newWindow.document.writeln("</a>");
newWindow.document.writeln("</body></html>");
newWindow.document.close();
}
My HTML snippet:
<div class="arrowlistmenu">
<div id="container">
<div id="center">
<h3 class="menuheader expandable">Section 1</h3>
<ul class="categoryitems">
<!-- Create first Sub Element -->
<li id="sub">
<h3 style="text-align:center" class="menuheader2 expandable2">Chapter 1</h3>
<ul class="categoryitems2" >
<li><a href="#" onClick="OpenNewWindow(1,800, 600)">Part 1</a></li>
Any creative suggestions?