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 7 of 7
  1. #1
    Banned
    Join Date
    Sep 2011
    Posts
    140
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Making a simple photo gallery with HTML/CSS only

    I am looking at making a simple photo gallery with HTML/CSS only, that looks like this:
    http://i56.tinypic.com/29aurzm.png

    Does anyone know a good way going about it?

  • #2
    Mr.
    Mr. is offline
    Regular Coder
    Join Date
    Feb 2011
    Posts
    112
    Thanks
    8
    Thanked 4 Times in 4 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Photo Gallery</title>
    
    
    <script>
    
    clickMenu = function(menu) {
    	var getEls = document.getElementById(menu).getElementsByTagName("LI");
    	var getAgn = getEls;
    
    	for (var i=0; i<getEls.length; i++) {
    			getEls[i].onclick=function() {
    				for (var x=0; x<getAgn.length; x++) {
    				getAgn[x].className=getAgn[x].className.replace("click", "");
    				}
    				this.className+=" click";
    				}
    			}
    		}
    </script>
    
    
    <style>
    
    #gallery {width:750px; height:360px; position:relative; border:1px solid #ddd; background:#f8f8f8;}
    #gallery ul {list-style:none; padding:5px; margin:0; width:195px; float:right; height:219px; overflow:auto;}
    #gallery ul li {display:inline; width:50px; height:50px; float:left; margin:0 4px 4px 0; border:1px solid #444; cursor:pointer;}
    #gallery ul li img {display:block; width:50px; height:50px;}
    #gallery ul li span {display:none; position:absolute; left:547px; top:235px; width:200px;font-family:verdana, arial, sans-serif; color:#06a; font-size:11px; line-height:15px; text-align:justify;}
    #gallery ul li span b {color:#444;}
    
    /* required for IE5.x and IE6 to display the start image size correctly */
    #gallery ul li.click i img.default {margin:5px auto 0 auto; width:320px; height:240px; border:1px solid #fff;}
    
    #gallery ul li.off {display:none;}
    
    #gallery ul li.click {border-color:#fc0; background:#f8f8f8; cursor:default;}
    
    #gallery ul li.click i {position:absolute; left:0; top:0; width:545px; height:355px;}
    
    #gallery ul li.click i img {margin:5px auto 0 auto; width:auto; height:auto; border:1px solid #fff;}
    
    #gallery ul li.click span {display:block;}
    
    
    </style>
    
    
    
    </head>
    
    <body onload="clickMenu('gallery')">
    <h1>Photo Gallery</h1>
    <h2>Simple photo click gallery</h2>
    <h3>17th Sep 2011</h3>
    
    <div id="gallery">
    <ul>
    	<li><i><img src="../images/trees/t1.jpg" title="" alt="" /></i><span><b>Lorem ipsum mea.</b><br />Ut posse discere omittam, et pro maluisset evertitur incorrupte, quo modus etiam euismod ne. Id vel postulant periculis, graeco minimum no sit.</span></li>
    	<li><i><img src="../images/trees/t2.jpg" title="" alt="" /></i><span><b>Ne eam invidunt.</b><br /> Suavitate cotidieque, has veniam audiam senserit ad. Vocent ornatus vim eu, duo laudem ignota appetere ea.</span></li>
    	<li><i><img src="../images/trees/t3.jpg" title="" alt="" /></i><span><b>Mea hinc eirmod.</b><br />Petentium ex. No iisque corpora pri, vix et fugit voluptaria, discere nominati eu vel.</span></li>
    	<li><i><img src="../images/trees/t4.jpg" title="" alt="" /></i><span><b>At sea equidem.</b><br />Maluisset, tamquam menandri honestatis qui at.</span></li>
    	<li><i><img src="../images/trees/t5.jpg" title="" alt="" /></i><span><b>Ad quot aeque.</b><br />Pri nemore aliquip no eum. Ea nec temporibus delicatissimi. Regione dolores legendos id qui.</span></li>
    	<li><i><img src="../images/trees/t6.jpg" title="" alt="" /></i><span><b>Eu vel legimus.</b><br />Inimicus maiestatis, laoreet invidunt ut ius, usu veri suscipit no.</span></li>
    	<li><i><img src="../images/trees/t7.jpg" title="" alt="" /></i><span><b>Deserunt senserit.</b><br />Pro ea, ea ius unum diceret tractatos, eum maiorum albucius ex. Nonummy forensibus vel ne, nisl cotidieque pri at.</span></li>
    	<li><i><img src="../images/trees/t8.jpg" title="" alt="" /></i><span><b>Sanctus noluisse.</b><br />Interesset ad quo, vidisse graecis concludaturque in quo, idque expetendis in quo.</span></li>
    	<li><i><img src="../images/trees/t9.jpg" title="" alt="" /></i><span><b>Inani percipit.</b><br />Legendos eu sea. An fastidii voluptua has. Ei mei saperet appellantur adversarium.</span></li>
    	<li><i><img src="../images/trees/t10.jpg" title="" alt="" /></i><span><b>His ei tation.</b><br />Albucius, prima solet democritum cum no, ut numquam voluptatum nec.</span></li>
    	<li><i><img src="../images/trees/t11.jpg" title="" alt="" /></i><span><b>Ut sonet.</b><br />Adipisci ius, debet sententiae elaboraret ei est. Vis nostro consectetuer ea, no pri magna alterum.</span></li>
    	<li><i><img src="../images/trees/t12.jpg" title="" alt="" /></i><span><b>His puto mentitum.</b><br />Persequeris cu, utamur legendos id sea. Prompta vituperata qui cu. Idque postulant id mei.</span></li>
    	<li><i><img src="../images/trees/t13.jpg" title="" alt="" /></i><span><b>Affert explicari.</b><br />Ei eam, ei has vidisse petentium consetetur. Amet modus an mea, adhuc imperdiet et has.</span></li>
    	<li><i><img src="../images/trees/t14.jpg" title="" alt="" /></i><span><b>Ea has labore.</b><br />Debitis pertinax, ad vis idque impedit volutpat, id qui alterum constituto.</span></li>
    	<li><i><img src="../images/trees/t15.jpg" title="" alt="" /></i><span><b>Augue graeco.</b><br />Insolens ei vel. Eu vix nostro erroribus, duis omnis utamur est ut.</span></li>
    	<li><i><img src="../images/trees/t16.jpg" title="" alt="" /></i><span><b>His suas dicta cu.</b><br />Sit at summo omnium deterruisset. Ex rebum altera gloriatur duo, ex eam aliquam bonorum.</span></li>
    	<li><i><img src="../images/trees/t17.jpg" title="" alt="" /></i><span><b>Eos dicat summo.</b><br />Graecis at, vix in liber dolor facilisis, usu ea possim atomorum efficiantur.</span></li>
    	<li><i><img src="../images/trees/t18.jpg" title="" alt="" /></i><span><b>Eos dicat summo.</b><br />Graecis at, vix in liber dolor facilisis, usu ea possim atomorum efficiantur.</span></li>
    	<li class="click"><i><img class="default" src="../images/trees/t19.jpg" title="" alt="" /></i><span><b>Default text.</b><br />Iudico petentium ullamcorper mei id. Sed an illum sonet quando, ei inciderint signiferumque pri, te duo omnis malis aeterno.</span></li>
    </ul>
    </div>
    <p>&copy; 2011 Photo Gallery</p>
    </body>
    </html>
    This uses very little script.

  • #3
    New Coder
    Join Date
    Jul 2011
    Location
    Australia
    Posts
    47
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Best way would be to use divs ... well I believe the best way for most layouts is to take advantage of div's wherever logical.

    Basically, the simple soloution is to see this as needing to make 5 different div templates with CSS.

    1) A div to contain everything inside of,
    2) A div to hold the top row of boxes in,
    3) A div to hold the bottom box in,
    4) A div template for the top boxes,
    5) Finally, the div for your biggest box,

    Then the next step would be to assign each div template the appropriate paddings and/or margins so they sit properly where you want them to.

    I've made a quick example for you... I've color-coded everything so you can see the individual div's:

    CSS Code

    Code:
    body
    {
    width:1000px;
    height:744px;
    margin:0px;
    padding:12px;
    }
    
    #container
    {
    width:1000px;
    height:744px;
    margin:0px;
    background-color:#000000;
    }
    
    #toprow
    {
    width:950px;
    height:150px;
    padding-top:25px;
    padding-bottom:25px;
    padding-right:50px;
    background-color:#CCCCCC;
    float:left;
    }
    
    #maincontent
    {
    width:1000px;
    height:544px;
    background-color:#E6E6E6;
    float:left;
    }
    
    .toprowbox
    {
    width:150px;
    height:150px;
    margin:0px 20px 0px 20px;
    float:right;
    background-color:#0000FF;
    }
    
    #contentbox
    {
    width:300px;
    height:300px;
    margin:20px 0px 0px 50px;
    background-color:#0000FF;
    }
    HTML Code
    Code:
    <body>
    
    <div id="container">
    
     <div id="toprow">
      
      <div class="toprowbox">
      </div>
      
      <div class="toprowbox">
      </div>
      
      <div class="toprowbox">
      </div>
      
     </div>
     
     <div id="maincontent">
     
      <div id="contentbox">
      </div>
     
     </div>
    
    </div>
    
    </body>
    As you can see, after specifying how big to make the page to work on, I've gone and made the 5 div templates.

    #container will hold 'everything' inside it,

    #toprow is set inside the container and will be used to hold the small blue boxes,
    #maincontent will hold the large blue box

    .toprowbox are the small blue boxes... they go inside the #toprow. Note, I have deliberatly made this a "class" not an "id" (with a dot not a hash) as you will need to use this more than once. "id"s only get called on once.
    #contentbox is the large blue box that will go inside #maincontent,

    Everything else is just a matter of adjusting the margins or paddings to position the div's in relation to each other.

    Of course this is just an example, you will want to make your own to size and style.
    I hope this answers your question!

    Asher
    “Opinion is the medium between knowledge and ignorance.”
    “The old believe everything; the middle aged suspect everything: the young know everything.”

  • #4
    New Coder
    Join Date
    Jul 2011
    Location
    Australia
    Posts
    47
    Thanks
    1
    Thanked 3 Times in 3 Posts
    I almost thought I posted a reply a few minutes to late as somebody else had... however I might note that while the example/solution "Mr." posted works very well for a simple gallery, it does include JavaScript, not just HTML/CSS only.

    Although, if you can learn JavaScript, it would probably be a good idea as it broadens the the limits of what you are able to do.
    “Opinion is the medium between knowledge and ignorance.”
    “The old believe everything; the middle aged suspect everything: the young know everything.”

  • #5
    Banned
    Join Date
    Sep 2011
    Posts
    140
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Hey Asher01,

    Thanks for your code. Unfortunately, it does not have any functionality in it and merely serves as a layout template for an image gallery. What I'm after is a method to use for changing images so they show on bigger box.

  • #6
    Banned
    Join Date
    Sep 2011
    Posts
    140
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Mr.
    I have taken up your offer on that code you gave me.
    Last edited by Democrazy; 09-18-2011 at 01:57 PM.

  • #7
    Banned
    Join Date
    Sep 2011
    Posts
    140
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Mr,

    I have cleaned up your script, made it standard compliant and tailored it to my need, and I am wondering if you know how I can make it so the thumbnail of the image being viewed does not dissapear when selected?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    
            "http://www.w3.org/TR/html4/strict.dtd">
    
    <TITLE></TITLE>
    
    <META content="charset=windows-1252;text/html" http-equiv="content-type">
    
    <SCRIPT  type="text/javascript">
    	clickMenu = function(menu) {
    		var getEls = document.getElementById(menu).getElementsByTagName("LI");
    		var getAgn = getEls;
    		for (var i=0; i<getEls.length; i++) {
    			getEls[i].onclick=function() {
    				for (var x=0; x<getAgn.length; x++) {
    					getAgn[x].className=getAgn[x].className.replace("click", "");
    				}
    				this.className+=" click";
    			}
    		}
    	}
    </SCRIPT>
    <STYLE type="text/css">
    
    	#gallery ul {
    		float:right;
    		overflow:auto
    	}
    	#gallery ul li {
    		display:inline;
    		width:50px;
    		height:50px;
    		float:left;
    		margin:0 4px 4px 0;
    		border:1px solid #444;
    		cursor:pointer
    	}
    	#gallery ul li img {
    		display:block;
    		height:50px
    	}
    	#gallery ul li span {
    		display:none;
    		position:absolute;
    		left:447px;
    		top:235px;
    		font-family:verdana;
    		color:#06a
    	}
    	#gallery ul li.click {
    		border-color:#fc0;
    		cursor:default
    	}
    	#gallery ul li.click i {
    		position:absolute;
    		left:0;
    		width:545px
    	}
    	#gallery ul li.click i img {
    		margin:5px auto 0 auto;
    		height:auto
    	}
    	#gallery ul li.click span {
    	display:block
    	}
    
    </STYLE>
    
    <BODY onload="clickMenu('gallery')">
    
    	<DIV id="gallery">
    		<UL>
    			<LI><I><IMG src="1.png" title="" alt=""></I><SPAN>Front</SPAN></LI>
    			<LI><I><IMG src="2.png" title="" alt=""></I><SPAN>Back</SPAN></LI>
    		</UL>
    
    	</DIV>
    </BODY>


  •  

    Posting Permissions

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