How to create image full size preview using layer pop-up

Discussion in 'JavaScript' started by MN Sandy, Jun 19, 2009.

0
  1. #1
    I'm trying to play around JS/HTML to create a script for image gallery to preview full size image.

    On click the page has a layer with 80% transparency and then in center to load the image. So visitor can focus on image.

    Any idea where i could get some simplified samples / scripts for this?

    Thank you in advance!
     
    MN Sandy, Jun 19, 2009 IP
  2. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #2
    google for modal image view, lightbox, etc etc. any number of examples, a lot of which are almost plug and play.

    i have even written my own called 'largerbox' which is in the style of the apple.com/trailers modal boxes :)

    mind you, don;t use mine, its not documented in a simple to install way and assumes an understanding of javascript and mootools :/
     
    dimitar christoff, Jun 20, 2009 IP
  3. JavaScriptBank.com

    JavaScriptBank.com Peon

    Messages:
    141
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #3
    JavaScriptBank.com, Jun 23, 2009 IP
  4. Mike H.

    Mike H. Peon

    Messages:
    219
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #4 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Centered, Auto Full-Size Image With Caption From Thumbnail, Unobtrusive &amp; Accessible</title>
<script type="text/javascript">

	var sWidth = screen.width;
	var sHeight = screen.height;	
	var nV = 0;	
		
	function displayFull(){

		var nContainer = document.getElementById('imgContainer');
		nContainer.style.left = Math.round((sWidth - document.getElementById('nullImg').width)/2) + "px";	
		nContainer.style.top = Math.round(((sHeight - document.getElementById('nullImg').height)/4) - 30) + nV + "px";						
	}

	function openFullSize(nSrc,nCap){
		
		document.getElementById('nullImg').src = nSrc;
		document.getElementById('imgCaption').innerHTML = nCap;
		setTimeout("displayFull()",1000);  // you may need to "adjust" the 1000;		
	}

	function stayHome(){

		nV = document.documentElement.scrollTop;
		setTimeout("stayHome()", 150);
	}

	function init(){

		var nGallery = document.getElementById("photoGallery").getElementsByTagName("a");
		var index = 0;
		for (i=0; i<nGallery.length; i++)
			{
			 nGallery[i].onclick = function()
				{
				 nDiv.style.top = "-2000px";
				 openFullSize(this.firstChild.src, this.firstChild.alt);				 				 	 
				 return false;
				}			
			 nGallery[i].href = "#";	
			 nGallery[i].id = "n" + index++;	
			}
		var nBody = document.getElementsByTagName("body")[0];
		var nDiv = document.createElement("div");
		var nImg = document.createElement("img");
		var nCaption = document.createElement('div');
		nDiv.id = "imgContainer";
		nImg.id = "nullImg";
		nImg.alt = "Click to close";
		nImg.title = "Click to close";
		nCaption.id = "imgCaption";
		nDiv.appendChild(nImg);
		nDiv.appendChild(nCaption);
		nBody.appendChild(nDiv);
		nDiv.style.cursor = "pointer";
		nDiv.style.position = "absolute";
		nDiv.style.top = "-2000px";
		nDiv.style.border = "1px solid black";
		nDiv.onclick = function()
			{
			 this.style.top = "-2000px";
			}
		nCaption.className = "caption";	
		stayHome();	
	}

	navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);	

</script>
<style type="text/css">

	 body {height: 1000px; background-color: #f0fff0;}
	.caption {font-family: tahoma; font-size: 14pt; text-align: center; color: #4169e1; 
		  background-color: #ffffe0; padding-top: 1px; padding-bottom: 1px;}
	.thumbNail {width: 400px; background-color: #f6eabc; border: 1px solid black; text-align: center;
		    position: relative; top: 700px; margin-left: auto; margin-right: auto;}
	.thumbNail img {border: 2px solid blue; margin-left: 15px; margin-top: 5px; margin-bottom: 0px;}	

</style>
</head>
	<body>
		<div id="photoGallery" class="thumbNail">
			<a href='images/CB1.jpg'><img src='images/CB1.jpg' width='96' height='96' alt='First Image Description' title='First Image Description'></a>
			<a href='images/CB2.jpg'><img src='images/CB2.jpg' width='64' height='96' alt='Second Image Description' title='Second Image Description'></a>
			<a href='images/CB3.jpg'><img src='images/CB3.jpg' width='128' height='85' alt='Third Image Description' title='Third Image Description'></a>
		</div>
	</body>
</html>
    Code (markup):
     
    Mike H., Jul 2, 2009 IP