www.webdeveloper.com
Results 1 to 9 of 9

Thread: Javascript image gallery

  1. #1
    Join Date
    Feb 2007
    Posts
    19

    Javascript image gallery

    Right. This one should be rather simple, but I'm new to js.
    I have 20 images, all the same size (896x560). I want to create a gallery. The gallery should display the black/white thumbnails of all images. When you rollover, the thumb should be in color. When you click it, the thumbnail gallery should be replaced with the full-size clicked image in the center, the b/w thumb of the previous image to the left, and the b/w thumb of the next image to the right. When you rollover these thumbs you should get the colored thumbs, and when you click them... well, you know
    also, the gallery should loop - meaning that the first image should follow the last one.
    So how do I do that? I only have some basic js knowledge :\
    help?

  2. #2
    Join Date
    Oct 2006
    Location
    Ontario Canada
    Posts
    1,160
    So how do I do that?
    To be honest your asking a lot.
    Its not as simple as it sounds, but it can be done using JS and a server side language.
    I would start off by asking or simply googling:
    'How to do an image rollover'

  3. #3
    Join Date
    Feb 2007
    Posts
    19
    Well, the b/w thing is optional.. I'm pretty sure the rest can be done using only javascript and HTML, I just don't know how :|

  4. #4
    Join Date
    Oct 2006
    Location
    Ontario Canada
    Posts
    1,160
    well there are a lot of free image gallery generators out there.
    Google will show a lot of results.

    If you want a custom one you might have to advance your JS knowledge.

    If there is a 'specific' area you need help with, I am sure you will get the answers you need here quickly.

    Here are some things to consider first.

    1. Do you have a proper naming convention for all the images.
    2. Are the thumbs going to be generated by you, or progamatically.
    3. Does the program read a DIR to get a list of images, or are they predefined in a JavaScript array.
    4. Is there software out there already that will do what I need to do.

    Drew

  5. #5
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,208
    Quote Originally Posted by grmmu
    Right. This one should be rather simple, but I'm new to js.
    I have 20 images, all the same size (896x560). I want to create a gallery. The gallery should display the black/white thumbnails of all images. When you rollover, the thumb should be in color. When you click it, the thumbnail gallery should be replaced with the full-size clicked image in the center, the b/w thumb of the previous image to the left, and the b/w thumb of the next image to the right. When you rollover these thumbs you should get the colored thumbs, and when you click them... well, you know
    also, the gallery should loop - meaning that the first image should follow the last one.
    So how do I do that? I only have some basic js knowledge :\
    help?
    What you want to do will probably be found on the following pages or you might find something you like better to use:

    Gallery Index
    Image Effects

  6. #6
    Join Date
    Jan 2005
    Posts
    3,067
    If you want to pull all images from a server folder then you must use a server side script. After the images are on the page then it is easy. Here is a basic example of what you want:

    Code:
    <html>
    <head>
    <script type="text/javascript">
    var imgs = ['http://www.iam.unibe.ch/~scg/Mirrors/stephane.ducasse.free.fr/FreeBooks/ByExample/byExample.gif','http://www.vi.net/library/images/loadbalance_example1.gif','http://www.netbsd.org/docs/guide/install-4.0/inst-nfs-example.png','http://www.3d-digital-graphic-art.com/example41b.jpg','http://doc.coin3d.org/images/SoLibs/general/sogui-class-example.png'];
    
    function aD(alt){
    var picNum = parseInt(alt);
    var main_image = document.getElementById('main_image');
    main_image.src = imgs[picNum];
    
    var pre = picNum-1;
    if(pre<0)
    pre = imgs.length-1;
    
    var next = picNum+1;
    if(next==imgs.length)
    next = 0;
    
    var left = document.getElementById('left_image');
    left.src = imgs[pre];
    left.alt = pre;
    left.onclick = function(){aD(this.alt);};
    
    
    var right = document.getElementById('right_image');
    right.src = imgs[next];
    right.alt = next;
    right.onclick = function(){aD(this.alt);};
    
    showDiv(1);
    
    return;
    }
    
    function createThumbs(){
    var thumbDiv = document.getElementById('thumbs');
    var myImg;
    
    for(i=0;i<imgs.length;i++){
    myImg = document.createElement('img');
    myImg.src = imgs[i];
    myImg.width = 50;
    myImg.height = 50;
    myImg.alt = i;
    myImg.onclick = function(){aD(this.alt);};
    thumbDiv.appendChild(myImg);
    }
    return;
    }
    
    function showDiv(divID){
    var largeDiv = document.getElementById('large');
    var thumbDiv = document.getElementById('thumbs');
    
    if(divID==0){
    largeDiv.style.display = 'none';
    thumbDiv.style.display = 'block';
    }
    
    else{
    largeDiv.style.display = 'block';
    thumbDiv.style.display = 'none';
    }
    return;
    }
    
    
    </script>
    </head>
    <body onload="createThumbs()">
    <div id="large" style="display:none">
    <img src="#" id="left_image" width=50 height=50><img id="main_image"><img id="right_image" width=50 height=50>
    </div>
    <div id="thumbs">
    </div>
    </body>
    </html>
    That will create the images for you instead of you having to hardcode the images directly onto the page.

  7. #7
    Join Date
    Feb 2007
    Posts
    19
    Brilliant! that's it, loads of thanks to all!

  8. #8
    Join Date
    Jan 2005
    Posts
    3,067
    Glad to have been of help.

  9. #9
    Join Date
    Feb 2007
    Posts
    19
    You've been a great help, thaks a lot. I learned some js and also got what I wanted.
    And now I want to learn more

    here's how I implemented your script:

    Code:
    <html>
    
    	<head>
    		
    		<title>photography</title>
    		
    <style type="text/css">
    
    html, body {
    height: 100%;
    min-height: 100%;
    }
    
    body{
      	margin:0;
      	padding:0;
      	text-align:center;
      	font-family: calibri, arial;
      	font-weight: normal;
      	font-size: 14px;
      	
    }
    
    
    .topmenuul{
    	list-style-type:none;
    	text-align:center;
    
    }
    
    .topmenuli{
    	list-style-type:none;
    	float:left;
    	background: white;
    	text-align:center;
    
    }
    
    .topmenutitle{
    	display:block;
    	width:100px;
    }
    
    
    .submenuul{
    	list-style-type:none;
    	position:absolute;
    	margin: 0;
    	padding:0;
    	display:none;
    
    }
    
    .submenuli a{
    	display:block;
    	width:100px;
    
    }
    
    li:hover ul , li.over ul{
    	display: block;
    
    }
    
    #dmenu li>ul { 
    	top: auto;
    	left: auto;
    }
    
    #dmenu {
    	font-family: calibri, arial;
    	font-size:14px;
    	font-weight: normal;
    		
    }
    
    
    .topmenutitle {
      	color: #999;
    	text-indent: -25px;
    	text-decoration: none;
    	border:0px solid #000000;
    	padding:10px;
    	line-height:5px;
    }
    
    .topmenutitle:hover {
    	text-indent: -25px;
    	text-decoration: none;
    	color: #0099FF;
    	border:0px solid #000000;
    	padding: 10px;
    	line-height: 5px;
    	background: white;
    }
    
    .submenuul {
    	margin-top: 0px;
    }
    
    .submenuli a{
    	padding:0px;
    	text-decoration: none;
    	color: #CCCCCC;
    
    }
    
    .submenuli a:hover{
    	color: #0099FF;
    }
    
    a, a:visited {
      color: #999;
      font-weight: none; 
      font-size: 16px;
      text-decoration: none;
    }
    
    a:hover{
      color: #0099FF;
      font-size: 16px;
    }
    
    #sadrz{
      border: 3px solid #999;
    }
    
    #pics{
      border: 3px solid #999;
    }
    
    #text{
      width: 700px;
      color: #999 ;
      font-weight: none; 
      font-size: 16px;
      text-decoration: none;
    }
    
    #left_image, #right_image{
      border: 2px solid #999;
    }
    #left_image:hover, #right_image:hover{
      border: 2px solid #0099ff;
    }
    
    </style>
    
    <script type="text/javascript">
    var imgs = ['http://dougholtphotography.com/Images/Environmental/Gaudi.jpg','http://dougholtphotography.com/Images/Environmental/Gaudi2.jpg','http://dougholtphotography.com/Images/Environmental/Gaudi.1.jpg','http://dougholtphotography.com/Images/Environmental/bed.1.jpg','http://dougholtphotography.com/Images/Environmental/bed.jpg'];
    
    function aD(alt){
    var picNum = parseInt(alt);
    var main_image = document.getElementById('main_image');
    main_image.src = imgs[picNum];
    
    var pre = picNum-1;
    if(pre<0)
    pre = imgs.length-1;
    
    var next = picNum+1;
    if(next==imgs.length)
    next = 0;
    
    var left = document.getElementById('left_image');
    left.src = imgs[pre];
    left.alt = pre;
    left.onclick = function(){aD(this.alt);};
    
    
    var right = document.getElementById('right_image');
    right.src = imgs[next];
    right.alt = next;
    right.onclick = function(){aD(this.alt);};
    
    showDiv(1);
    
    return;
    }
    
    function createThumbs(){
    var thumbDiv = document.getElementById('thumbs');
    var myImg;
    
    for(i=0;i<imgs.length;i++){
    myImg = document.createElement('img');
    myImg.src = imgs[i];
    myImg.width = 100;
    myImg.height = 63;
    myImg.alt = i;
    myImg.onclick = function(){aD(this.alt);};
    thumbDiv.appendChild(myImg);
    }
    return;
    }
    
    function showDiv(divID){
    var largeDiv = document.getElementById('large');
    var thumbDiv = document.getElementById('thumbs');
    
    if(divID==0){
    largeDiv.style.display = 'none';
    thumbDiv.style.display = 'block';
    }
    
    else{
    largeDiv.style.display = 'block';
    thumbDiv.style.display = 'none';
    }
    return;
    }
    
    
    </script>
    
    	</head>
    
    
    
    
    <body onload="createThumbs()">
    
    <div id="sve">
    
    <a href="index.htm">photography</a>
    <center>
    <table border="0">
    
    	<tr>
    		<td align="center">
    		<div id="navi">
    
    		
    		<ul class="topmenu" id="dmenu">
    		
    			<li class="topmenuli"><a href="#" class="topmenutitle">commercial</a>
    			<ul class="submenuul">
    				<li class="submenuli"><a href="still.htm">still life</a></li>
    				<li class="submenuli"><a href="beauty.htm">beauty</a></li>
    				<li class="submenuli"><a href="fashion.htm">fashion</a></li>
    			</ul>
    			</li>
    
    			<li class="topmenuli"><a href="#" class="topmenutitle">editorial</a>
    			<ul class="submenuul">
    				<li class="submenuli"><a href="travel.htm">travel</a></li>
    				<li class="submenuli"><a href="portraiture.htm">portraiture</a></li>
    				<li class="submenuli"><a href="interiors.htm">interiors</a></li>
    			</ul>
    			</li>
    
    			<li class="topmenuli"><a href="clients.htm" class="topmenutitle">clients</a></li>
    			<li class="topmenuli"><a href="contact.htm" class="topmenutitle">contact</a></li>		
    
    </div>
    </td>
    </tr>
    </table>
    <br />
    
    
    <center>
    <table width="80%" height="600px" border="0" id="pics" cellspacing="1" cellpadding="3" bordercolor="#999">
    
    
    
    <div id="large" style="display:none">
    
    <tr>
    <td><img id="left_image" width=100 height=63></td> 
    <td><div id="thumbs">
    </div><img id="main_image" alt=""></td>
    <td><img id="right_image" width=100 height=63></td>
    </tr>
    
    </div>
    
    
    	
    </table>
    </body>
    </html>
    so here's my next question: the viewing works great, exactly what I wanted. But, is there a way to manipulate the position of the thumbs when no thumb has been clicked yet? like, to add some space between them? also, is it possible to eliminate the borders on the left/right side before any thumbs have been clicked? I don't want to lose 'em while in viewing mode, though. Also also, is it possible to add similar borders in the gallery mode (before clicking)?
    thanks in advance

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