Javascript Image gallery question?

Question

apollokid 0 Newbie Poster

14 Years Ago

Hey All im kinda new with javascript and I have a lil script made but need to add to it but kind of lost on what to do. Its a gallery that works fine but i have a part where there are two images a before and after.
one image shows with the chgimg function when onclick thumb displayed in the gallery.

I believe i need either a switch case or if statement
that says if main_img is after/1.jpg main_img2 is b4/1.jpg

thanks for the help :D

here is the html for eg.

<div class="section" id="section1">
<img src="images/gallery/lg/after/1.jpg" width="465" height="310" id="main_img" />
</div>	
<div class="section" id="section2"><img src="images/gallery/lg/after/1.jpg" width="465" height="310" id="main_img2" /></div>

here is the javascript for better understanding

<script type="text/javascript">
	function chgImg(pic){
				document.getElementById('main_img').src=pic;	
			}
			</script>

<script type="text/javascript">	
d = document;
pictno = 4;
j=0;
pct=new Array;
for (i=pictno;i>0;i--){
	pct[j]=i; j++;
}
curp = d.location.search.substr(1);
if (curp == '') curp=1;
for (i=0; i<pictno;i+=12){
	if (curp == (i/12 + 1)){ 
	}
}
d.write('<table cellspacing="5"><tr>');

currno = Math.floor(curp * 12 -12);  
d.write('<div style="visibility:hidden; overflow:hidden; height:1px;">');
for (i=0;i<currno;i++){
	d.write('<a href="images/gallery/lg/after/'+ pct[i] + '.jpg"><img src="images/gallery/tn/after/' + pct[i] + '.jpg" border="0"></a>\n');
}
d.write('</div>');

iPreload = new Array();

for (i=currno; i< ( pictno < (curp * 12) ? pictno : (curp * 12));i++){
	if ((i % 3) == 0 && i != currno)	{
		d.write ('</tr><tr>');
	}
	iPreload[i] = new Image();
	iPreload[i].src = "images/gallery/lg/after/'+ pct[i] + '.jpg";
	
	d.write ('<td style="padding:5px;"  align="center"><a href="javascript:;" onclick="chgImg(\'images/gallery/lg/after/' + pct[i] + '.jpg\')"><img src="images/gallery/tn/after/' + pct[i] + '.jpg" border="0"></a></td>');
}
d.write ('</tr></table>');
d.write('<div style="visibility:hidden; overflow:hidden; height:1px;">');
for (i= ( pictno < (curp * 3) ? pictno : (curp * 3));i<pictno;i++){
	d.write('<a href="images/gallery/lg/after/'+ pct[i] + '.jpg" ><img src="images/gallery/tn/after/' + pct[i] + '.jpg" border="0"></a><br>');
}
d.write('</div>');

for (i=0; i<pictno;i+=12){
	if (curp == (i/12 + 1)){ 
		d.write ((i/12 + 1) +' ');
	} else {
		d.write ('<a href = gallery.html?' + (i/12 + 1) + '>'+ (i/12 + 1) + '</a> ');
	}
}
			d.write ('<br> My Image Gallery<br><br>');

-->
</script>

javascript

3 Contributors
3 Replies
137 Views
1 Week Discussion Span
Latest Post 14 Years Ago Latest Post by essential

All 3 Replies

essential 84 Posting Shark

14 Years Ago

Hi apollokid,

I've developed a small prototype based image gallery sample, that will easily help me, understanding your needs. Lets say if you have this type of concept, then what are the type of features that you would like to add in as part of this program?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html id="html40L" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Window-target" content="_top">
<title>Free Live Help!</title>
<style type="text/css">
<!--
#main {
   background-color : #f5f5f5;
   color : #778899;
   margin : 0 auto;
   border-top : 2px solid #ccc;
   border-bottom : 2px solid #ccc;
   padding : .500em 0 .500em 0; }

a {
   color : #ccc;
   padding : 4px 0 1px 0;
   border-bottom : 1px solid;
   text-decoration : none;
   display : inline-block;
   clear : both;
   letter-spacing : 3px; }   

img { 
   background-color : #fff;
   color : #ccc; 
   border : 1px solid #ccc;
   height : 120px;
   width : 120px;
   display : block; 
   margin : 0 auto; }

table {
   border : none;
   padding : 0;
   border-collapse : separate;
   margin : 0 auto; }

td, th {
   padding-bottom : 2px;
   border : none;
   vertical-align : middle;
   text-align : center;
   width : auto;
 }
-->
</style>
<script type="text/javascript">
<!--
   var $d = ( document );
   var modern = Boolean((( !!document.getElementById === true ) ? 1 : 0 ));
   var Images = function( imageId ) {
   this.imageId = (( imageId ) ? imageId : undefined );  
   }; Images.prototype = {
img : function() {
 if ( $d.images )
      this.obj = $d.images[ this.imageId ];
   else
      if ( modern )
         this.obj = $d.getElementById( this.imageId );
      else
         try {
            this.obj = $d.all[ this.imageId ];
         } catch( e ) {
            this.obj = $d.layers[ this.imageId ];
         } return (( !!this.obj === true ) ? this.obj : undefined );
   },
path : function( pathToImage ) {
   this.pathToImage = (( pathToImage ) ? pathToImage : 0 );
   return (( this.pathToImage ) ? this.img().src = this.pathToImage : this.img().src );
   },
   element : {
      create : function( Element ) {
      if ( !!$d.createElement === true )
         return $d.createElement( Element );
      else
         return String( "<" + Element + "></" + Element + ">" ).toLowerCase();  
      },
      createTable : function( row, cell, insert ) {
         var count = 0;
         this.row = (( row ) ? row : 1 );
         this.cell = (( cell ) ? cell : 3 );
         this.insert = (( modern ) ? $d.getElementById( insert ) : $d.all[ insert ] );
         if ( !!document.createElement === true ) {
            this.table = this.create("table");
            this.table.width = "100%";

            this.tbody = this.create("tbody");
            
           for ( var x = 0; x < this.row; x++ ) {
              this.tbody.insertRow( x );
               for ( var y = 0; y < this.cell; y++ ) {
               this.iMG = [ ];
               this.iMG[ count ] = new Image();
               this.iMG[ count ].alt = "image0" + count + ".jpg";
               this.iMG[ count ].src = "image0" + count + ".jpg";
               this.iMG[ count ].onmouseover = ( function() {
                  this.style.border = "1px solid #fff";
                  this.style.backgroundColor = "373832";
                  this .onmouseout = ( function() {
                     this.style.border = "1px solid #ccc";
                     this.style.backgroundColor = "#fff";
                  } );
               } );
               this.a = this.create("a");
               this.a.href = this.iMG[ count ].src;
               this.a.appendChild($d.createTextNode( "Image - #" + (( count ) + 1 )));
               this.tbody.rows[ x ].insertCell( y );
               this.tbody.rows[ x ].cells( y ).appendChild( this.iMG[ count ] );
                this.tbody.rows[ x ].cells( y ).appendChild( this.a );
            ++count;   
               }
            } this.table.appendChild( this.tbody );
     this.insert.appendChild( this.table );
         }         
      }
   }
};

window.onload = function() {
var gallery = new Images("image01.jpg");

gallery.element.createTable( 5, 4, "main" ); 
}

// -->
</script>
</head>
<body>
<div id="main"></div>
</body>
</html>

it's not done yet, but if you like this concept, let me know, so that we can start adding new functionality to this javascript sample.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

hengzhe 0 Newbie Poster · Answer 1 · 2009-07-26T10:31:21+00:00

vShow is an easy-to-use configurable dynamic slideshow(gallery),you can use it with simple code as below

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>vShow Examples---Default Config,Minimunm Code Required</title>
<link href="../dist/css/default.css" rel="stylesheet" type="text/css" />
<script src="../dist/bin/vh-base.min.js"></script>
<script src="../dist/lib/jquery-1.3.1.min.js"></script>
<script src="../dist/bin/vShow.jQuery.min.js"></script>
<script src="../dist/bin/vShow.min.js"></script>
<script>
vShow.URL_BASE="../dist/";
vShow.showOnPageLoaded("sample");
</script>
</head>
<body>
<div id="sample"></div>
</body>
</html>

For details,please refer to
http://catalog.viscent.info/vShow/index.htm

essential 84 Posting Shark Featured Poster · Answer 2 · 2009-07-26T11:05:07+00:00

@hengzhe,

And can make you as lazy as it can be. This is a forum that provides solutions that is created with time and dedication, not a referral site. It would've been better if you have give them a tutorial site concerned on their stated issue, that uses pure JavaScript, instead of a framework solution...

Javascript Image gallery question?

Recommended Answers Collapse Answers

All 3 Replies

Recommended Answers