मैं एक प्रारंभिक जावास्क्रिप्ट प्रोग्रामर हूं। मैं लाइटबॉक्स 2 के समान कुछ बनाने की कोशिश कर रहा हूं, लेकिन बहुत आसान है। एकमात्र कारण है कि मैं इसे अपने आप से खरोंच से करना चाहता हूं ताकि मैं सीख सकूं। हालांकि, मैं अंतिम महत्वपूर्ण भाग पर फंस गया हूं जहां यह छवि प्रदर्शित करता है। मेरा मानना है कि समस्या निहित है जहां मैं किसी अज्ञात फ़ंक्शन को असाइनमेंट के साथ क्लिक करने का प्रयास करता हूं: elem [i] .onclick = function() {liteBoxFocus (imgSource, imgTitle); विवरण झूठा है;}; । यदि आप मेरा कोड चलाते हैं और Google लोगो पर क्लिक करने का प्रयास करते हैं तो यह Google के लोगो और शीर्षक के बजाय याहू लोगो और शीर्षक लाएगा। हालांकि जब आप याहू लोगो पर क्लिक करते हैं तो यह ठीक काम करता है, ऐसा लगता है कि अनाम कार्य केवल अंतिम लूप के लिए होता है। अग्रिम में धन्यवाद!!!जावास्क्रिप्ट ऑनक्लिक, अनाम फ़ंक्शन
मैंने आपकी सुविधा के लिए एक पृष्ठ में संपूर्ण सीएसएस/जेएस/एक्सएचटीएमएल रखा है।
<html>
<head>
<title>Erik's Script</title>
<style type="text/css">
#liteBoxBg, #liteBox {
display: none;
}
#liteBoxBg {
background-color: #000000;
height: 100%;
width:100%;
margin:0px;
position: fixed;
left:0px;
top: 0px;
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
z-index: 40;
}
#liteBox {
background-color:#fff;
padding: 10px;
position:absolute;
top:10%;
border: 1px solid #ccc;
width:auto;
text-align:center;
z-index: 50;
}
</style>
<script type="text/javascript">
window.onload = start;
function start(){
var imgTitle = "No title";
var imgSource;
var elem = document.getElementsByTagName("a");
var i;
//Dynamically insert the DIV's to produce effect
var newDiv = document.createElement('div');
newDiv.setAttribute("id", "liteBox");
document.getElementsByTagName("body")[0].appendChild(newDiv);
newDiv = document.createElement('div');
newDiv.setAttribute("id", "liteBoxBg");
document.getElementsByTagName("body")[0].appendChild(newDiv);
//Check those anchors with rel=litebox
for(i = 0;i < elem.length;i++){
if(elem[i].rel == "litebox"){
imgSource = elem[i].href.toString();
imgTitle = elem[i].title;
elem[i].childNodes[0].style.border="0px solid #fff";
elem[i].onclick = function(){liteBoxFocus(imgSource,imgTitle); return false;};
}
}
//When foreground is clicked, close lite box
document.getElementById("liteBoxBg").onclick = liteBoxClose;
}
//Brings up the image with focus
function liteBoxFocus(source,title){
document.getElementById("liteBox").style.display = "block";
document.getElementById("liteBox").innerHTML = "<h1>" + title + "</h1>" +
"<img src='" + source + "'/><br />" +
"<a href='#' onclick='liteBoxClose();'><img src='images/litebox_close.gif' border='0' alt='close'/></a>";
document.getElementById("liteBoxBg").style.display = "block";
}
//closes lite box
function liteBoxClose(){
document.getElementById("liteBox").style.display = "none";
document.getElementById("liteBoxBg").style.display = "none";
return false;
}
</script>
</head>
<body>
<a href="http://www.google.com/intl/en_ALL/images/logo.gif" rel="litebox" title="Google Logo"><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="" /></a>
<a href="
http://www.barbariangroup.com/assets/users/bruce/images/0000/4121/yahoo_logo.jpg" rel="litebox" title="Yahooo Logo"><img src="
http://www.barbariangroup.com/assets/users/bruce/images/0000/4121/yahoo_logo.jpg" alt="" /></a>
</body>
</html>
+1 मुझे इसे हराया –