Javascript Gallery Code Help

#1
Howdy_McGee

Posted 14 June 2010 - 10:27 PM

Programmer

Members
135 posts

Ok, I don't know javascript very well and im programming a gallery. The images from the gallery fade in, but use whatever the images default width is. I need to set in javascript some kind of max-width and min-width, but I don't know where to put it. Was hoping someone here could help me out.

also, this hunting ground is a great place to find useful pre-made scripts

//Jeff

//www.huntingground.freeserve.co.uk

 

ig1cfbArr=[

 

['images/booknow.gif','Image 1','Text That Goes w/ Image'],

['images/C2A.jpg','Image 2','Text That Goes w/ Image','Text Class/ID'],

['images/LinkIn.gif','Image 3','Text That Goes w/ Image','Text Class/ID'],

['images/NewsLetterIcon.gif','Image 4','Text That Goes w/ Image','Text Class/ID'],

['images/send.gif','Image 5','Text That Goes w/ Image','Text Class/ID'],

['images/STLGreen.gif','Image 6','Text That Goes w/ Image','Text Class/ID'],

['images/TriLeaf.jpg','Image 7','Text That Goes w/ Image','Text Class/ID'],

['images/TwitterIcon.gif','Image 8','Text That Goes w/ Image','Text Class/ID'],

['images/unsubscribe2.gif','Image 9','Text That Goes w/ Image','Text Class/ID'],

['images/trileaflogoemail.gif','Image 10','Text That Goes w/ Image','Text Class/ID'],

['images/mail.gif','Image 11','Text That Goes w/ Image','Text Class/ID'],

['images/followUs.gif','Image 12','Text That Goes w/ Image','Text Class/ID'],

['images/Facebook.gif','Image 13','Text That Goes w/ Image','Text Class/ID'],

['images/clickme.gif','Image 14','Text That Goes w/ Image','Text Class/ID'],

['images/BlogIcon.gif','Image 15','Text That Goes w/ Image','Text Class/ID'],

['images/arrowTopLight.gif','Image 16','Text That Goes w/ Image','Text Class/ID']		// no comma at the end of the last line

 

]

 

dualFade=1 // 0 = fades in, 1 = fades out then in

 

preload=new Array()

for(var i=0;i<ig1cfbArr.length;i++){

preload[i]=new Image()

preload[i].src=ig1cfbArr[i][0]

}

 

thumbMaxOpac=100

thumbMinOpac=30

thumbStepUp=10

thumbStepDown=3

 

function initObjectsAndEvents(){

imgEl = document.getElementsByTagName("img")

 

i = 0

arrIndex=0

while(i<imgEl.length){

 

applyFade=true

 

if(imgEl[i].className!="fademe"){applyFade=false}

 

if(applyFade){

 

imgEl[i].i=i

imgEl[i].arrIndex=arrIndex

 

window["myThumb"+imgEl[i].i]=new thumbFade(imgEl[i])

 

imgEl[i].onmouseover=function(){window["myThumb"+this.i].chkStatus(this.i,'d_in')}

imgEl[i].onmouseout=function(){window["myThumb"+this.i].chkStatus(this.i,'d_out')}

imgEl[i].onclick=function(){nextIG1cfbPic(this.arrIndex)}

 

if(imgEl[i].filters){imgEl[i].style.filter="alpha(opacity="+thumbMinOpac+")"}

else{imgEl[i].style.opacity = thumbMinOpac/100}

 

arrIndex++

}

 

i++

 

}

 

}

 

function thumbFade(obj){

 

this.obj=obj

this.timer=null

this.running=0

this.opac=thumbMinOpac

 

this.chkStatus=function(num,d){

this.dir=d

if(this.dir=="d_out"){this.running=0}

if(this.dir=="d_in"&&this.running==1){return}

this.running=1

window["myThumb"+num].animate('myThumb'+num)

}

 

this.animate=function(mythumb){

if(this.dir=="d_in"){this.opac+=thumbStepUp}

else{this.opac-=thumbStepDown}

this.timer=setTimeout(mythumb+".animate('"+mythumb+"')",50)

 

if(this.dir=="d_in"&&this.opac>thumbMaxOpac){

this.running=0

this.opac=thumbMaxOpac

clearTimeout(this.timer)

}

 

if(this.dir=="d_out"&&this.opac<thumbMinOpac){

this.running=0

this.opac=thumbMinOpac

clearTimeout(this.timer)

}

 

if(this.obj.filters){this.obj.filters.alpha.opacity=this.opac}

else{this.obj.style.opacity=(this.opac/100)-0.01}

}

 

}

 

fadeStep = 3

fadeSpeed=10

minFadeValue=0

lastN=null

fading=0

 

function nextIG1cfbPic(num){

displayEl=document.getElementById("imgholder")

if(displayEl.filters&&!window.opera){

startOpac=displayEl.filters.alpha.opacity

}

else{

startOpac=displayEl.opacity

}

 

if(lastN==num||fading==1){return}

 

if(dualFade==0||startOpac==0){fadeValue=0}

else{fadeValue=100}

 

picNum=num

lastN=num

 

fadeIG1cfbPic()

 

}

 

function fadeIG1cfbPic(){

 

fading=1

fadeValue -= fadeStep

 

fadeTimer=setTimeout("fadeIG1cfbPic()",fadeSpeed)

 

if(displayEl.filters&&!window.opera){displayEl.filters.alpha.opacity=fadeValue;}

else{displayEl.style.opacity=(fadeValue/100)-0.1}

 

if(fadeValue<minFadeValue){ // for fade out first

fadeValue=minFadeValue

fadeStep= -fadeStep

showIG1cfbPic(picNum)

}

 

if(fadeValue>=100){ // fade in

fadeValue=100

fadeStep= -fadeStep

fading=0

clearTimeout(fadeTimer)

}

 

}

 

function showIG1cfbPic(num){

document.images["pic"].style.visibility="visible"

document.images["pic"].src=ig1cfbArr[num][0]

document.images["pic"].alt=ig1cfbArr[num][1]

document.getElementById("imgtxt").innerHTML=ig1cfbArr[num][2]

document.getElementById("imgtxt").style.width=preload[num].width+"px"

 

if(ig1cfbArr[num][3]){

document.getElementById("imgtxt").className=ig1cfbArr[num][3]

}

else if(ig1cfbArr[num][2]==""){

document.getElementById("imgtxt").className=""

}

else{

document.getElementById("imgtxt").className="defaultstyle"

}

 

}

 

// add  onload="initObjectsAndEvents()" to the opening BODY tag

 

// -->

#2
NastyDevil

Posted 15 June 2010 - 08:39 AM

Learning Programmer

Members
90 posts

From what I can tell you can edit this line:
document.getElementById("imgtxt").style.width=preload[num].width+"px"

to have a fixed width for any image like so:
document.getElementById("imgtxt").style.width=300px;

But to be sure as to what should be edited can you post the html piece that will call this function?

#3
Howdy_McGee

Posted 15 June 2010 - 12:28 PM

Programmer

Members
135 posts

HTML

<html> 
<head> 
	<title>Fade To Image Gallery</title> 
	
	<link href="test.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="test.js"></script>
 
</head> 
<body onload="initObjectsAndEvents()"> 
<h1><span>Fade To Gallery</span></h1> 
 
	<div id="imgholder"> 
		<img name="pic" id="pic" src="blank.gif" alt="" style="visibility:hidden"> 	<!--Where the image shows up on screen-->
		<div id="imgtxt"></div> 
	</div> 
  
	<div id="thumbs"> 
		<img src="images/booknow.gif" alt="" class="fademe"> 
		<img src="images/C2A.jpg" alt="" class="fademe"> 
		<img src="images/LinkIn.gif" alt="" class="fademe"> 
		<img src="images/NewsLetterIcon.gif" alt="" class="fademe"><br />
		<img src="images/send.gif" alt="" class="fademe">
		<img src="images/STLGreen.gif" alt="" class="fademe">
		<img src="images/TriLeaf.jpg" alt="" class="fademe">
		<img src="images/TwitterIcon.gif" alt="" class="fademe"><br />
		<img src="images/unsubscribe2.gif" alt="" class="fademe">
		<img src="images/trileaflogoemail.gif" alt="" class="fademe">
		<img src="images/mail.gif" alt="" class="fademe">
		<img src="images/followUs.gif" alt="" class="fademe"><br />
		<img src="images/Facebook.gif" alt="" class="fademe">
		<img src="images/clickme.gif" alt="" class="fademe">
		<img src="images/BlogIcon.gif" alt="" class="fademe">
		<img src="images/arrowTopLight.gif" alt="" class="fademe">
	</div> 
</body> 
</html>

CSS

body
{
	font-size:14px;
	font-family:times new roman;
}

a
{
	color:#000;
	text-decoration:none;
	border-bottom:1px dashed #000;
}

a:hover
{
	color:#b13507;
	border-bottom:1px solid #b13507;
}

a:active
{
	color:#e4682a;
}

h1
{
	width:100%;
	height:38px;
	font-size:30px;
	color:#b13507;
	font-style:italic;
	text-align:center;
}

h1 span
{
	line-height:40px;
	border-bottom:4px solid #b13507;
}

h1, h3
{
	color:#b13507;
}

div hr
{
	width:50%;
	height:2px;
	color:#8e8462;
	margin:10px auto 10px auto
}

#imgHolder
{
	float: right;
	text-align: center;
	border: 1px solid blue;
	width: 800px;
	height: 470px;
}

#pic, #imgtxt
{
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	margin-bottom: auto;
}	

#thumbs
{
	border: 4px solid black;
	width: 500px;
	height: 470px;
	text-align: center;
}

#thumbs img
{
	width: 100px;
	height: 100px;
	border: 2px solid blue;
	margin: 5px;
}

I tried doing that but the whole script crashed and didnt work at all.