www.webdeveloper.com
Results 1 to 2 of 2

Thread: Lightbox - am I doing something wrong?

Hybrid View

  1. #1
    Join Date
    Oct 2011
    Posts
    33

    Lightbox - am I doing something wrong?

    Greetings,
    I have a website that includes several simple (jquery) tools that I've gathered across the Internet. An image gallery (lightbox, "image opener") is by far the most complicated one. I am just getting familiar with javascript and believe I could make my own scripts for those simplistic needs (and get rid of all those third party implementations, and jquery as well). I haven't encountered a specific problem I could not handle, but I would appreciate someone taking a look at what I've done so far, point out my mistakes and direct me on the right track.
    Please note that this is a simplified version of a lightbox stripped off some functionalities.

    Thank you for your time.

    html
    HTML Code:
    <div id="content">
       <div onclick="openUp(1,4)">
          <img id="img1" src="images/1x.jpg">
       </div>
       <div onclick="openUp(5,4)">
          <img id="img5" src="images/5x.jpg">
       </div>
    </div>
    
    <div id="overlay" onclick="removeOverlay()"></div>
    <div id="imgHolder">
     <img id="mainImg">
     <div id="imgText"></div>            
    </div>
    
    
    <style>
    #overlay 
    {
    	position: fixed;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    	z-index: 10;
    	display: none;
    }
    #imgHolder
    {
    	width: 0;
    	height: 0;
    	z-index: 11;
    	display: none;
    }
    #imgHolder img#mainImg
    {
    	min-height: 300px;
    }
    #imgNav
    {
    	height: 80px;
    }
    #imgNav img 
    {
    	margin: 5px 2px;
    	max-height: 70px;
    }
    </style>

    javascript (please follow the link on jsfiddle at the end of the post)
    Code:
    var resizeBool,
    navHeight=0,
    
    overlay=document.getElementById("overlay"),
    imgHolder=document.getElementById("imgHolder"), 
    img=document.getElementById("mainImg"),
    imgNav;
    
    function openUp(firstImage, numberOfImages)
    {
    	resizeBool=true;
    	img.src="images/"+firstImage+".jpg";	//i guess we call this preloading?
    	img.onload=function()
    	{
    		overlay.style.display="block";
    		imgHolder.style.display="block";
    		if(numberOfImages>1)	//if there are multiple images, their navigation will be appended
    		{
    			navHeight=85;	//navigation has a fixed height, so this will be used later
    			imgNav=document.createElement("div");
    			imgNav.id="imgNav";
    /* this part here worries me the most, will it slow things down when images are bigger? I tested it with a 2.5 mb image, which gets loaded twice (once as a big image, and once for navigation) and the whole site is lagging like hell. There won't be any images of such sizes, but still */
    			var imgsLinks=[], imgs=[];
    			for(var i=0, n; i<numberOfImages; i++)
    			{
    				n=firstImage+i;
    				imgs[i]=new Image();
    				imgs[i].src="images/"+n+".jpg";
    				imgsLinks[i]=document.createElement("a");
    				imgsLinks[i].href="#";
    /* imgsLinks[] exist for storing the onclick event (number of the image from navigation to get), though its perhaps achievable simply by stripping the image src. in any case, this part is not finished yet :p but i don't see it as a problem */
    			//	imgsLinks[i].onclick=replaceImage(actual(n));	
    				imgsLinks[i].appendChild(imgs[i]);
    				imgNav.appendChild(imgsLinks[i]);
    			}
    		}
    		else
    		{
    			navHeight=0;
    		}
    		resize();
    		brighten(imgHolder, 0, 0.1, numberOfImages);
    		window.onresize=function(){resize();};	//will this get called every time an image is opened? will it slow things down?
    	}
    }
    
    function resize()	//gets called once on image load, and later on window resize
    {
    	if(resizeBool==true)
    	{
    		img.style.maxHeight=(window.innerHeight || document.documentElement.clientHeight)-navHeight+"px";	//fit the image on screen
    		setTimeout(function(){				//this instant timeout allows the above maxHeight to take effect
    			imgHolder.style.width=img.width+"px";	//scale the imgHolder div to img size
    			imgHolder.style.height=(navHeight+img.height)+"px";
    			if(img.height>300)	//if its big enough fix and center it
    			{
    				imgHolder.style.position="fixed";
    				imgHolder.style.top="50%";
    				imgHolder.style.left="50%";
    				imgHolder.style.marginTop="-"+(imgHolder.offsetHeight/2)+"px";
    				imgHolder.style.marginLeft="-"+(imgHolder.offsetWidth/2)+"px";
    			}
    			else			//and if not, display it at current position as absolute (min-height: 300px; in css allows for the image not to go smaller than that
    			{
    				imgHolder.style.position="absolute";
    				imgHolder.style.top=(document.body.scrollTop)+"px";
    				imgHolder.style.left=(document.body.scrollLeft+((window.innerWidth || document.documentElement.clientWidth)-imgHolder.offsetWidth)/2)+"px";
    				imgHolder.style.marginTop="0px";
    				imgHolder.style.marginLeft="0px";
    			}
    		},0);
    	}
    }
    
    /* this here is an apppearing effect function which I wasn't going to put here, however it could be affecting performance so its here. It gets called on image load. It first displays the imgHolder div, and then the navigation (I noticed things were faster this way) */
    function brighten(what, op, step, numberOfImages)	
    {
    	if(op>=1)
    	{
    		if(numberOfImages>1)	
    		{
    			imgHolder.appendChild(imgNav);
    			brighten(imgNav, 0, 0.2, 0);
    		}
    		return;
    	}
    	op+=step;
    	what.style.opacity=op;
    	window.setTimeout(brighten, 20, what, op, step, numberOfImages);
    }
    
    function removeOverlay()	//gets called when overlay is clicked
    {
    	if(navHeight>0)
    	{	
    		imgHolder.removeChild(imgNav);	//also increasing performance
    	}
    	resizeBool=false;
    	darken(1, 0.1);
    }
    function darken(op, step)
    {
    	if(op<=0)
    	{
    		imgHolder.style.display="none";
    		overlay.style.display="none";
    		img.src="";
    		return;
    	}
    	op-=step;
    	imgHolder.style.opacity=op;
    	window.setTimeout(darken, 20, op, step);
    }
    edit: I believe it will be much easier to read the code HERE. I am sorry for not making a working example, but too much editing would be required (especially due to image numbering).
    edit: And HERE is an image to give you a rough idea of what it looks like.
    Last edited by janje; 05-17-2013 at 04:09 PM.

  2. #2
    Join Date
    Oct 2011
    Posts
    33
    I guess I've reached my editing quota... Here is a jsfiddle with more explanations: http://jsfiddle.net/Qg7kB/4/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles