Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts

    Javascript and Pictures

    All,
    I have a PHP script that will get images out of the database and display them in a grid. I have two verisons. I save a thumbnail which I display and then a larger image in a different folder. These images are placed in a scroll bar but what I would like to happen is that when I click on a thumbnail it basically displays the bigger image until I click on that image and it goes away. I would love for the middle of the image to be displayed in the middle of the users screen but beggers probably can't be choosers in this case.

    An example of a similar desired result is a link here:
    http://qrayg.com/experiment/hig/

    Instead of the hover, I'd like to utilize the onclick to display and remove the image. If it's easy to put the center in the center of the screen that that would be absolutely incredible as well.

    Thanks for any guidance you could provide me on this.

    Thanks in advance!

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts

  • #3
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Dynamically Created Photo Gallery with Animated Image Fade-in, Click for Full-size</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">	
    
    /*   Dynamically Created Photo Gallery with Animated Image Fade-in, Click for Full-size */
    /*   Copyright 2009, Michael J. Hill.  All rights reserved. Used with permission.  www.javascript-demos.com */
    /*   Free use of the code, so long as the above notice is kept intact */
    
    	var imgPath = "./images/";
    
    	var dynamicImage = []; // file | width | height;    
    	dynamicImage[dynamicImage.length] = "CBa.jpg | 185 | 225";
    	dynamicImage[dynamicImage.length] = "CB1.jpg | 160 | 170";
    	dynamicImage[dynamicImage.length] = "CB2.jpg | 215 | 300";
    	dynamicImage[dynamicImage.length] = "CBd.jpg | 140 | 250";
    	dynamicImage[dynamicImage.length] = "CB4.jpg | 125 | 185";
    	dynamicImage[dynamicImage.length] = "CB3.jpg | 185 | 200";
    	dynamicImage[dynamicImage.length] = "CBb.jpg | 160 | 175";
    
    /*   Do not edit below this line */
    
    	var loadingImageSrc = imgPath + "loading.gif";
    	loadingImage = document.createElement('img');
    	loadingImage.src = loadingImageSrc; 	
    	var grandLoadingGIF = document.createElement('img');
    	grandLoadingGIF.src = imgPath + "grand_loading.gif";	
    	var sWidth = screen.width;
    	var sHeight = screen.height;
    	var fullSizePct = "";
    	var IE = navigator.appName == "Microsoft Internet Explorer" ? true : false;
    
    	function displayFull(){
    
    		var nV = document.documentElement.scrollTop;
    		var origWidth = popImg.width;
    		popImg.width = Math.round(origWidth * fullSizePct);	
    		popDiv.style.left = Math.round((sWidth - popImg.width)/2) + "px";	
    		popDiv.style.top = Math.round(((sHeight - popImg.height)/4) - (30 * fullSizePct)) + nV + "px";							
    	}
    
    	function openFullSize(nSrc){
    		
    		while (popDiv.lastChild)
    			{
    		 	 popDiv.removeChild(popDiv.lastChild);
    			 popDiv.style.top = "-10000px";
    			}
    		popImg = document.createElement("img");
    		!IE ? popImg.style.marginBottom = "-4px" : null;	
    		popImg.alt = "Click to close";
    		popImg.title = "Click to close";		
    		popDiv.appendChild(popImg);
    		nBody.appendChild(popDiv);	
    		popImg.src = nSrc;
    		nShadow.style.width = document.documentElement.clientWidth + "px";
    		nShadow.style.height =  document.documentElement.scrollHeight >= document.documentElement.clientHeight ? document.documentElement.scrollHeight + "px"
    											  				: document.documentElement.clientHeight + "px";
    		nShadow.style.display = "";
    		grandLoadingGIF.style.top = (document.documentElement.clientHeight / 2) - 16
    					  + document.documentElement.scrollTop + "px";					
    		grandLoadingGIF.style.left = (document.documentElement.clientWidth / 2) - 16 + "px";
    		grandLoadingGIF.style.display = "";	
    		setTimeout("displayFull()", 900);	
    		popDiv.onclick = function()
    			{			
    			 nShadow.style.display = "none"; 
    			 grandLoadingGIF.style.display = "none";
    			 this.style.top = "-10000px";	
    			 while (popDiv.lastChild)
    				{
    			 	 popDiv.removeChild(popDiv.lastChild)
    				}	
    			}
    	}
    
    	function brushIn(nStaticImg){
    
    		var nOpacity = 0;			
    		var nInterval = setInterval(function()
    			{
    		 	 nOpacity < 100 ? nOpacity = nOpacity + 2 : clearInterval(nInterval);
    		 	 IE ? nStaticImg.style.filter = "alpha(opacity = "+nOpacity+")"
    		 	 : nStaticImg.style.opacity = (nOpacity / 100); 
    			}, 25);	
    		IE ? nStaticImg.detachEvent('onload', brushIn, false) : nStaticImg.removeEventListener('load', brushIn, false);	 
    	}
    
    	function init(){		
    			
    		var nLoadImg = "";		
    		var nWrapper = "";
    		var imageArchive = [];	
    		var nStaticImg = [];
    		var nDiv = document.getElementsByTagName('div');
    		for (i=0; i<nDiv.length; i++)
    			{
    			 if (nDiv[i].className == "imgContainer")
    				{
    				 var nContainer = nDiv[i];				 
    				}
    			}
    		fullSizePct = (nContainer.title.replace(/%/, "") / 100).toFixed(2);
    		nContainer.title = "Click Image to Enlarge";
    		var dynImgInfo = "";
    		for (i=0; i<dynamicImage.length; i++)
    			{
    			 dynImgInfo = dynamicImage[i].split("|");
    			 imageArchive[imageArchive.length] = [dynImgInfo[0], dynImgInfo[1], dynImgInfo[2]];
    			 nStaticImg[nStaticImg.length] = document.createElement('img');		 
    			}
    		nContainer.style.visibility = "visible";
    		for (i=0; i<dynamicImage.length; i++)
    			{			 
    			 nLoadImg = document.createElement('img');
    			 nLoadImg.style.position = "absolute";
    			 nLoadImg.style.backgroundColor = "#90ee90";
    			 nLoadImg.alt = "";
    			 nLoadImg.src = loadingImage.src;								
    		 	 nStaticImg[i].onload = function()
    				{				
    			 	 brushIn(this);
    				}			
    			 nStaticImg[i].src = imgPath + imageArchive[i][0];
    			 IE ? nStaticImg[i].style.filter = "alpha(opacity = 0)" : nStaticImg[i].style.opacity = 0;			 	
    			 imageArchive[i][2] >= nContainer.clientHeight - 15
    				 ? imageArchive[i][2] = nContainer.clientHeight - 15
    				 : imageArchive[i][2];
    			 nStaticImg[i].height = imageArchive[i][2];
    			 nStaticImg[i].width = imageArchive[i][1];	
    			 nStaticImg[i].style.position = "relative";
    			 nStaticImg[i].style.cursor = "pointer";	
    			 nStaticImg[i].style.marginBottom = nContainer.clientHeight - imageArchive[i][2] - 12 + "px";	
    			 nStaticImg[i].onclick = function()
    				{
    				 openFullSize(this.src);
    				}	
    			 nLoadImg.style.top = (imageArchive[i][2] / 2) - 12 + "px";
    			 nLoadImg.style.left = (imageArchive[i][1] / 2) - 12 + "px";
    			 nWrapper = document.createElement('div');			 
    			 IE ? nWrapper.style.styleFloat = "left" : nWrapper.style.cssFloat = "left";			
    			 nWrapper.style.position = "relative";	
    			 nWrapper.style.paddingRight = "5px";	
    			 nWrapper.appendChild(nLoadImg);
    			 nWrapper.appendChild(nStaticImg[i]);			
    			 nContainer.appendChild(nWrapper);		
    			 nBody = document.getElementsByTagName("body")[0];	
    			 popDiv = document.createElement('div');
    			 popDiv.style.position = "absolute";
    			 popDiv.style.top = "-10000px";
    			 popDiv.style.cursor = "pointer";
    			 popDiv.style.border = "1px solid black";		 
    			 nShadow = document.createElement('div');		
    		 	 nShadow.style.backgroundColor =  "#808080"; 
    			 nShadow.style.position = "absolute";
    			 nShadow.style.top = "0px";
    			 nShadow.style.left = "0px";
    			 nShadow.style.display = "none";
    			 IE ? nShadow.style.filter = "alpha(opacity = 75)" : nShadow.style.opacity = .75;	
    			 nBody.appendChild(nShadow);	
    			 nBody.appendChild(grandLoadingGIF);
    			 grandLoadingGIF.style.display = "none"; 
    			 grandLoadingGIF.style.position = "absolute";			
    			 grandLoadingGIF.style.backgroundColor = "#90ee90";						
    			} 		
    	}
    
    	IE ? attachEvent('onload', init, false) : addEventListener('load', init, false);	
    
    </script>
    <style type="text/css">
    
    	 body	{margin-top: 200px;}
    	.imgContainer {position: relative; visibility: hidden;  border: 1px solid black;
    		       width: 800px; height: 225px; background-color: #f0fff0; margin-left: auto;
    		       margin-right: auto; padding-left: 3px; overflow: auto; padding-bottom: 5px;}	
    	.imgContainer img {margin-top: 3px; margin-bottom: 3px; border: 1px solid blue;}
    	
    </style>
    </head>
    <body>
    	<!-- title = the size at which the "full size" images will be displayed. -->
    	<div class="imgContainer" title="90%"></div>
    	
    </body>
    </html>
    Attached Images Attached Images   
    Last edited by Sciliano; 12-13-2010 at 06:17 PM.

  • #4
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts
    Thanks for the replies. Since this is a dynamic gallery using PHP, how can I populate the image list:

    Code:
    var dynamicImage = []; // file | width | height;    
    	dynamicImage[0] = "CBa.jpg | 185 | 225";
    	dynamicImage[1] = "CB1.jpg | 160 | 170";
    	dynamicImage[2] = "CB2.jpg | 215 | 300";
    	dynamicImage[3] = "CBd.jpg | 140 | 250";
    	dynamicImage[4] = "CB4.jpg | 125 | 185";
    	dynamicImage[5] = "CB3.jpg | 185 | 200";
    	dynamicImage[6] = "CBb.jpg | 160 | 175";
    I would want to populate this with the PHP name and then I guess I would have to get the image width and height from getimagesize() in the PHP function.

  • #5
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    Use this instead, no numbers to make it easy to add/delete to/from the array:

    Code:
    var dynamicImage = []; // file | width | height;    
    	dynamicImage[dynamicImage.length] = "CBa.jpg | 185 | 225";
    	dynamicImage[dynamicImage.length] = "CB1.jpg | 160 | 170";
    	dynamicImage[dynamicImage.length] = "CB2.jpg | 215 | 300";
    	dynamicImage[dynamicImage.length] = "CBd.jpg | 140 | 250";
    	dynamicImage[dynamicImage.length] = "CB4.jpg | 125 | 185";
    	dynamicImage[dynamicImage.length] = "CB3.jpg | 185 | 200";
    	dynamicImage[dynamicImage.length] = "CBb.jpg | 160 | 175";
    The dimensions are the thumbnail dimensions. I assume that your thumbnails are all the same size, so just manually change those values to suit.

    The full size image will open at it's actual full size, subject to the "title" value, in the markup, here:

    Code:
    <!-- title = the size at which the "full size" images will be displayed. -->
    	<div class="imgContainer" title="90%"></div>
    meaning, the full-size image will display at 90% of its actual full-size.

    Just use PHP echo, to insert the image file names in to the array. The same for the image path variable, echo the path.

  • #6
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts
    So to get the image names I used the following code:
    PHP Code:
    $qrypics "Select * from pics where album_id='$album_id'";
    $resultpics mysql_query($qrypics);
    while(
    $resultsetpics mysql_fetch_array($resultpics)){
    echo 
    "<li><a href=\"viewpics.php?pic_id=$resultsetpics[pic_id]&album_id=$resultsetpics[album_id]\"><img src=\"thumbs/$resultsetpics[name]\" alt=\"\" /></a></li>"
    Would I load my array the same way?

    Code:
    var dynamicImage = []; // file | width | height;
    
    $qrypics = "Select * from pics where album_id='$album_id'";
    $resultpics = mysql_query($qrypics);
    while($resultsetpics = mysql_fetch_array($resultpics)){  
    	dynamicImage[dynamicImage.length] = "$resultsetpics[name] | 185 | 225";
    }
    Not sure how PHP works in Javascript.

  • #7
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts
    Also, this is is close to what I'm looking for. Is there a way to stop it from loading and fading in the main images. I want it to just load the images like it normally would and then when I click on it do the fade and display the image quickly. This takes a while. How would I update that part of it?

  • #8
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts
    So I went with the link that was originally suggested and I put it in my file. However I think that one works nicely when there aren't a lot of <div>'s and in mine I have a lot and just don't know what I need to update to achieve the same result. I figured I might as well post the whole page so sorry that it is kind of long but just wanted to give you a full idea:

    PHP Code:
    <?php
    session_start
    ();
    include 
    "config.php";
    $album_id $_GET['album_id'];
    ?>
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">
    <script type="text/javascript" src="js/html5.js"></script>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
    <script type="text/javascript" src="js/cufon-yui.js"></script>    
    <script src="js/bgstretcher.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
        //  Initialize Backgound Stretcher       
            $(document).bgStretcher({
                images: ['images/bg1_new.jpg']
            });
        });
    </script>
    <script>
    function doAction1()
        {
        alert("it is in action 1");
        var my_outer = document.getElementById("outer");
        my_outer.style.backgroundColor = "#000";
        my_outer.style.width  = screen.width+"px";
        my_outer.style.height = 1500+"px";
        var my_inner = document.getElementById("inner");
        my_inner.style.left = this.myl;
        my_inner.style.top  = this.myt;
        my_inner.style.display = "block";
        my_inner.innerHTML="<img style=\"z-index:auto;opacity:1;\" src=\"upload/"+this.my_src+"\">";
        my_inner.onclick = doAction2;
        }
    function doAction2()
        {
        var my_outer = document.getElementById("outer");
        my_outer.style.backgroundColor = "Transparent";
        my_outer.style.width  = "10px";
        my_outer.style.height = 1500+"px";
        var my_inner = document.getElementById("inner");
        my_inner.innerHTML = "";
        my_inner.style.display = "none";
        }
    </script>
      <!--[if lt IE 7]>
          <link rel="stylesheet" href="css/ie/ie6.css" type="text/css" media="screen">
        <script type="text/javascript" src="js/ie_png.js"></script>
        <script type="text/javascript">
            ie_png.fix('footer, h1 a, nav li a, .inner');
        </script>
      <![endif]-->
    </head>

    <body id="page5">
        <div class="extra">
            <!-- content -->
            <section id="content">
                <div class="main">
                    <h1><a href="index.php">Website</a></h1>
                    <nav>
                        <?php
                        
    include "nav_buttons.php";
                        
    ?>
                    </nav>
                    <div class="indent">
                        <section class="inner bg4">
                            <div class="indent">
                                <h2>photos</h2>
                                <div class="scroll scroll2">
                                    <div class="scroll-inner">
                                    <?php
                                    $qryname 
    "Select name from albums where album_id='$album_id'";
                                    
    $resultname mysql_query($qryname);
                                    
    $resultsetname mysql_fetch_array($resultname);
                                    
    ?>
                                    <h7>Album Name: <?php echo stripslashes($resultsetname['name']); ?></h7><br><br><a href="photos.php">Go back to all the photo albums</a><br><br>
                                    <div class="gallery">
                                            <ul>
                                                
                                            <?php
                                            $qrypics 
    "Select * from pics where album_id='$album_id'";
                                            
    $resultpics mysql_query($qrypics);
                                            while(
    $resultsetpics mysql_fetch_array($resultpics)){
                                                echo 
    "<li><img src=\"thumbs/$resultsetpics[name]\" alt=\"\" onClick=\"doAction1()\"/></li>";
                                                
                                            }
                                            
    ?>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
                <div class="block"></div>
            </section>
        </div>
        <!-- footer -->
        <?php
        
    include "footer.php";
        
    ?>  
      <script type="text/javascript" src="js/cufon-replace.js"></script>
      <script type="text/javascript" src="js/Century_Gothic_400.font.js"></script>
    </body>
    </html>

  • #9
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    treeleaf20:

    Use this instead. Note the <div> surrounding the photo gallery.
    Code:
    <!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 {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: 500px; 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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •