hy all,
I have created an html5 file that should when clicked on a certain href pop’s up an image in a smooth way. Till now it didn’t work with me, that’s when clicked, it opens up a new web browser, but that’s not what i need.
I need it to fade open, by fading out the background and glowing, like the facebook effect.
My Javascript code :
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 ideas??
It looks like you want something like http://www.shadowbox-js.com/
There are a lot of jQuery plugins that does roughly what you’re describing. Inventing it all over in plain javascript looks like a bad idea here.