PDA

View Full Version : can somebody troubleshoot my new gallery?



capecodlilly
11-28-2013, 01:18 AM
I made a photo gallery a while ago with Vic Phillip's help, and it came out very well.
I want to make a new one and I just cant get it to work.
I do not want to use jQuery or any of the new code that is so long and involved that I cannot understand it.
Just want to have a simple and nice gallery similar to what Vic helped me with.
Its here,
http://www.jcdouglass.net/gallery/gallery3.html

Hopefully Vic will be here, but his site comes up a 404 for me now.
But maybe somebody can help and troubleshoot my gallery, I will post it soon, if there is anybody who can.
Thank you,
Jane


By the way, I had extreme trouble reseting my password which I had forgotten.

ajfmrf
11-28-2013, 01:57 AM
Well,using firefox 26.0, it works.

I mouse over an image along the top and the image changes below to that image.there is also a caption when first mousing over an image along the top row.

vwphillips
11-28-2013, 04:44 AM
you have the line I have corrected and marked in red in the wrong position


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Mouseover album, thanks to Vic</title>
<meta name="robots" content="noindex,nofollow,noarchive">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">


<style type="text/css">
/*<![CDATA[*/

.gallery {
width:300px;border:solid red 1px;
}

.gallery IMG{
width:150px;float:left;
}


#mseDIV{
position:absolute;overflow:hidden;left:400px;top:300px;width:431px;height:570px;border:groove green 8px;
}

body {
background-color: #b5d0ec; /*vry lgt blue*/
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #115147; /*dark greenish-blue*/
font-size: 100%;
background-image: url(pattern51.jpg);
}

h1 {
font-family: 'Comic Sans MS', 'Arial Narrow', sans-serif;
color: #0d937b; /*greenish*/
font-size: 200%;
text-align: center;
/*background-color: transparent;*/
}

/* Here are my favourite link styles and colors, will keep them this way for lesson 5 */


a:link {
color: #0033ff;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #5f08b6;
}
a:hover {
text-decoration: underline;
color: #00cc00;
}
a:active {
text-decoration: none;
color: #cc3399;
background-color: #ed962e;
}

/*]]>*/
</style>

</head>

<body>
<h1>Another Gallery.</h1>


<div id="mseDIV" style="" >
</div>
<div id="gal1" class="gallery" >
<img src="http://www.jcdouglass.net/gallery/IMG_6464.jpg" alt="img" title="Galley and Lilly"/>
<img src="http://www.jcdouglass.net/gallery/IMG_6467.jpg" alt="img" title="Lilly" />
<img src="http://www.jcdouglass.net/gallery/IMG_6469.jpg" alt="img" title="Black Beach" />
<img src="http://www.jcdouglass.net/gallery/IMG_6473.jpg" alt="img" title="Low Tide" />
<img src="http://www.jcdouglass.net/gallery/IMG_6476.jpg" alt="img" title="Susie giving treats"/>
<img src="http://www.jcdouglass.net/gallery/IMG_6478.jpg" alt="img" title="Cousins" />
<img src="http://www.jcdouglass.net/gallery/IMG_6485.jpg" alt="img" title="Let go o my tail" />
<img src="http://www.jcdouglass.net/gallery/IMG_6487.jpg" alt="img" title="Sippewisset Marsh" />
<img src="http://www.jcdouglass.net/gallery/IMG_6490.jpg" alt="img" title="Chilly day"/>
<img src="http://www.jcdouglass.net/gallery/IMG_6493.jpg" alt="img" title="Wet Dogs" />

</div>

<script type="text/javascript">
/*<![CDATA[*/

var zxcMouseFade={

init:function(o){
var id=o.MouseOverID,ms=o.AnimateDuration,g=document.getElementById(o.GalleryID),d=document.getElementById(id),imgs=g.getElementsByTagName('IMG'),img=document.creat eElement('IMG'),ary=[],o,z0=0;
img.style.position='absolute';
img.style.visibility='hidden';
img.style.width=d.offsetWidth+'px';
img.style.height=d.offsetHeight+'px';
for (;z0<imgs.length;z0++){
img=img.cloneNode(false);
img.src=imgs[z0].src;
d.appendChild(img);
ary[z0]=[img,0];
this.addevt(imgs[z0],'mouseover','mse',id,z0,true);
this.addevt(imgs[z0],'mouseout','mse',id,z0,false);
}
img=img.cloneNode(false);
img.style.position='absolute';
img.style.visibility='hidden';
img.style.width=d.offsetWidth+'px';
img.style.height=d.offsetHeight+'px';
img.style.zIndex='101';
d.appendChild(img);
o=zxcMouseFade['zxc'+id]={
ary:ary,
ms:typeof(ms)=='number'?ms:1000,
lst:ary[0]
}
},

mse:function(id,nu,ud){
var o=zxcMouseFade['zxc'+id],t;
if (o&&o.ary[nu]){
o.lst[0].style.zIndex='0';
clearTimeout(o.lst[2]);
this.animate(o,o.lst,o.lst[1],0,new Date(),o.ms*Math.abs((0-o.ary[nu][1])/100)+10);
o.ary[nu][0].style.visibility='visible';
clearTimeout(o.ary[nu][2]);
t=ud?100:0;
o.ary[nu][0].style.zIndex='2';
this.animate(o,o.ary[nu],o.ary[nu][1],t,new Date(),o.ms*Math.abs((t-o.ary[nu][1])/100)+10);
o.lst=o.ary[nu];
}
},

animate:function(o,ary,f,t,srt,mS){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
ary[1]=now;
oop.opc(ary[0],now);
}
if (ms<mS){
ary[2]=setTimeout(function(){ oop.animate(o,ary,f,t,srt,mS); },10);
}
else {
ary[1]=t;
oop.opc(ary[0],t);
if (t==0){
ary[0].style.visibility='hidden';
}
}
},

opc:function(o,n){
o.style.filter='alpha(opacity='+n+')';
o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
},

addevt:function(o,t,f,p,p1,p2){
var oop=this;
if (o.addEventListener){
o.addEventListener(t,function(e){ return oop[f](p,p1,p2);}, false);
}
else if (o.attachEvent){
o.attachEvent('on'+t,function(e){ return oop[f](p,p1,p2); });
}
}


}

zxcMouseFade.init({
MouseOverID:'mseDIV',
GalleryID:'gal1',
AnimateDuration:1000 //(optional) the animation speed in milli seconds. (number, default = no animation)
});

zxcMouseFade.mse('mseDIV',0,true)

/*]]>*/
</script>

</body>

</html>

capecodlilly2
11-28-2013, 01:45 PM
Thank you!
I think I fixed it.

Here is the next one that I am having trouble with, my classmates got theirs to work with this tiny js file, but mine just wont go to the next photo like theirs do.
Im pretty new at coding, so I am hoping that you can troubleshoot it, here is the URL,
http://www.jcdouglass.net/gallery2013/puppy.html
see how I have to back the browser up to get to the next picture. I want it to work like the previous one using Vic's code.
(And picture five shows picture four, when it should show 5.)

function swapPhoto(photoSRC) {
document.images.imgPhoto.src=photoSRC;
}
is the js I am using, my classmates got it to work, but they had this, but I dont use extra assets/images folders, I just put everything in one folder, its easier for a beginner like me. I wonder if that is my problem.
This below is what my classmates used and it worked OK.

function swapPhoto(photoSRC) {
document.images.imgPhoto.src="assets/images/"+photoSRC;
}

Thank you!

capecodlilly2
11-28-2013, 02:06 PM
function swapPhoto(photoSRC) {
document.images.imgPhoto.src=" maybe something should be put in here to fix it? "photoSRC;
}

another thought? Obviously I dont know what Im doing with javascript, but sooner or later, we will get this working with your help. Happy Thanksgiving anyway.

vwphillips
11-28-2013, 04:04 PM
you have




<a href="one.jpg" title="puppy" onClick="swapPhoto(‘one.jpg');return false;">
<img src="one-tn.jpg" alt="puppy" width="120" height="90" /></a>



the charactor in red is wrong


you should have


<a href="one.jpg" title="puppy" onClick="swapPhoto('one.jpg');return false;">
<img src="one-tn.jpg" alt="puppy" width="120" height="90" /></a>



on on all your links

capecodlilly2
11-28-2013, 04:59 PM
Thank you!!!

I dont know where they come from, as they are not on my keyboard(Mac). But you sure spotted those offending little wrong marks and I put the new ones in from my keyboard.
And it works nicely now!

http://www.jcdouglass.net/gallery2013/puppy.html


Its interesting that this tiny little couple lines of code will do what other galleries do with pages and pages of code!
I love learning this!