Menu
Hello –
I’m very new to handcoding and javascript. I’m programming a site for a photographer, and am working on one of her portfolio pages. I’ve taken source code from another photographer’s site and have modified it for my own purposes, but none of the javascript events are working.
I’ve gone over the code for days now…any help is greatly appreciated.
The page I’m wanting to imitate (behaviourally) is [URL=”http://www.sarahsmall.com/portfolio/”]http:www.sarahsmall.com/portfolio/
The code for my portfolio page (with full url links) is below. Thank you , JavaScript experts!
[code=html]<!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”>
<head>
<title>Jacqueline Truong Photography</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″ />
<link rel=”stylesheet” href=”http://www.jacquelinetruong.com/html/jacquelinetruong.css” type=”text/css” media=”all” />
<link rel=”icon” href=”/favicon.ico” type=”image/x-icon” />
<link rel=”shortcut icon” href=”http://www.jacquelinetruong.com/html/favicon.ico” type=”image/x-icon” />
<script type=”text/javascript” src=”http://www.jacquelinetruong.com/html/mootools.v1.00.js”></script>
<script type=”text/javascript”><!–
function nextPhoto () {
if (curPhoto < totalPhotos) {
curPhoto++;
renderCurPhoto ();
if (curPhoto < totalPhotos) {
theNextPhoto = curPhoto + 1;
preloadPhoto ();
}
if (safariJunk) {
safariJunk = false;
} else {
scrollerJump ();
}
}
}
function prevPhoto () {
if (curPhoto > 1) {
curPhoto–;
renderCurPhoto ();
if (curPhoto > 2) {
theNextPhoto = curPhoto – 1;
preloadPhoto ();
}
scrollerJump ();
}
}
function jumpToPhoto (newPhoto) {
if (newPhoto == 1) return true;
curPhoto = newPhoto;
renderCurPhoto ();
}
function renderCurPhoto () {
hires = ‘http://www.jacquelinetruong.com/html/photos/celebrations/hires/’ + myPhotos[curPhoto];
$(‘realPhoto’).src = hires;
if (loadedPhotos[curPhoto] != true) {
$(‘realPhoto’).className = ‘photoFade’;
$(‘loadingBox’).style.display = ‘block’;
eval (‘img’ + curPhoto + ‘ = new Image();’);
eval (‘img’ + curPhoto + ‘.src = hires;’);
$(‘realPhoto’).onload = showPhoto;
}
}
function preloadPhoto () {
if (loadedPhotos[theNextPhoto] != true) {
eval (‘img’ + theNextPhoto + ‘ = new Image();’);
eval (‘img’ + theNextPhoto + ‘.src = “http://www.jacquelinetruong.com/html/photos/celebrations/hires/’ + myPhotos[theNextPhoto] ‘”;’);
eval (‘img’ + theNextPhoto + ‘.onload = addToLoadedArray;’);
}
}
function addToLoadedArray() {
loadedPhotos[theNextPhoto] = true;
}
function showPhoto () {
$(‘realPhoto’).className = ”;
$(‘loadingBox’).style.display = ‘none’;
loadedPhotos[curPhoto] = true;
}
function scrollerJump () {
//move scrollbar
midPhoto = curPhoto – 4;
if (midPhoto < 0) midPhoto = 0;
newX = ((midPhoto * 72) * -1;
if (newX < right) newX = right;
pb.style.left = newX + ‘px’;
newScroll = Math.round((windowWidth – 70) * (newX / (scrollWidth – windowWidth))) * -1;
$(‘sliderButton’).style.left = newScroll + ‘px’;
}
var loadedPhotos = new Array();
var myPhotos = new Array();
myPhotos[1] = ‘celebrate1_lg.jpg’;
myPhotos[2] = ‘celebrate2_lg.jpg’;
myPhotos[3] = ‘celebrate3_lg.jpg’;
myPhotos[4] = ‘celebrate4_lg.jpg’;
myPhotos[5] = ‘celebrate5_lg.jpg’;
myPhotos[6] = ‘celebrate6_lg.jpg’;
myPhotos[7] = ‘celebrate7_lg.jpg’;
myPhotos[8] = ‘celebrate8_lg.jpg’;
myPhotos[9] = ‘celebrate9_lg.jpg’;
myPhotos[10] = ‘celebrate10_lg.jpg’;
–></script>
<script type=”text/javascript” src=”javascript.js”></script>
</head>
<body>
<div id=”portfolio-outer”></div>
<div id=”container”>
<!– header –>
<img src=”portfolio_pages/portfolio_pages_r1_c1.jpg” border=”0″ align=”left” alt=”Jacqueline Truong” />
<img src=”portfolio_pages/portfolio_pages_r2_c1.jpg” border=”0″ align=”left” alt=”Jacqueline Truong” />
<div id=”portfolioBack”><a href=”http://www.jacquelinetruong.com/html/portfolio.html” onmouseover=”SwapOut()” onmouseout=”SwapBack()”>
<img src=”http://www.jacquelinetruong.com/html/portfolio_pages/portfolio_pages_r2_c2.jpg” name=”Portfolio” width=114 height=51 border=0 alt=”Back to Main”>
</a> </div>
<!– main photo –>
<div id=”realPhotoBox”><a href=”#” onclick=”nextPhoto(); return false” onfocus=”this.blur();”><img src=”photos/celebrations/hires/celebrate1_lg.jpg” width=”975″ height=”575″ id=”realPhoto” border=”no” alt=”” /></a></div>
<div id=”loadingBox”><img src=”images/loading_bg.gif” width=”80″ height=”30″ alt=”” /><div id=”loadingAnimation”><img src=”images/loading.gif” width=”18″ height=”18″ alt=”” /></div></div>
<!– thumbnails –>
<div style=”position: absolute; top: 647px; left: 0px; background-image:url(http://www.jacquelinetruong.com/html/portfolio_pages/portfolio_pages_r4_c1.jpg);”>
<div style=”position: absolute; width: 975px; height: 110px;”></div>
<!– slider –>
<div id=”sliderTrack” style=”position: absolute; top: 100px; left: 0px; width: 975px; height: 10px; background-image:url(http://www.jacquelinetruong.com/html/portfolio_pages/scrollbar_bg.jpg);”><div id=”sliderButton”></div></div>
<div style=”position: absolute; top: 0px; left: 0px; overflow: hidden; width: 975px; height: 100px; background-image:url(http://www.jacquelinetruong.com/html/portfolio_pages/portfolio_pages_r4_c1.jpg);” id=”photoOuter”>
<div style=”position: absolute;” id=”photoBar”><a href=”#” onfocus=”this.blur();” onclick=”jumpToPhoto(1); return false;” class=””><img src=”photos/celebrations/thumbs/celebrate1_sm.jpg” alt=”” width=”150″ height=”100″ hspace=”5″ border=”no” /></a><a href=”#” onfocus=”this.blur();” onclick=”jumpToPhoto(2); return false;” class=””><img src=”photos/celebrations/thumbs/celebrate2_sm.jpg” width=”150″ height=”100″ hspace=”5″ border=”no” alt=””/></a><a href=”#” onfocus=”this.blur();” onclick=”jumpToPhoto(3); return false;” class=””><img src=”photos/celebrations/thumbs/celebrate3_sm.jpg” width=”150″ height=”100″ hspace=”5″ border=”no” alt=”” /></a><a href=”#” onfocus=”this.blur();” onclick=”jumpToPhoto(4); return false;” class=””><img src=”photos/celebrations/thumbs/celebrate4_sm.jpg” width=”150″ height=”100″ hspace=”5″ border=”no” alt=”” /></a><a href=”#” onfocus=”this.blur();” onclick=”jumpToPhoto(5); return false;” class=””><img src=”photos/celebrations/thumbs/celebrate5_sm.jpg” width=”150″ height=”100″ hspace=”5″ border=”no”alt=”” /></a><a href=”#” onfocus=”this.blur();” onclick=”jumpToPhoto(6); return false;” class=””><img src=”photos/celebrations/thumbs/celebrate6_sm.jpg” width=”150″ height=”100″ hspace=”5″ border=”no” alt=”” /></a><a href=”#” onfocus=”this.blur();” onclick=”jumpToPhoto(7); return false;” class=””><img src=”photos/celebrations/thumbs/celebrate7_sm.jpg” width=”150″ height=”100″ hspace=”5″ border=”no” alt=”” /></a> </div>
</div>
<div id=”footer”>
<img src=”portfolio_pages/portfolio_pages_r5_c1.jpg” align=”left”/>
<a href=”http://www.bab****jedeikin.com” target=”_blank”><img src=”portfolio_pages/portfolio_pages_r5_c3.jpg” alt=”bab**** jedeikin” border=”0″ /></a></div>
</div>
</div>
<div id=”debug” style=”position: absolute; top: 0px; left: 0px; color: #333; font-size: 1px;”></div>
<script type=”text/javascript”>
<!–
var curPhoto = 1;
var theNextPhoto = 1;
var totalPhotos = 10;
var pb = $(‘photoBar’);
var windowWidth = 975;
var step = windowWidth;
var scrollWidth = (totalPhotos * 150) -5;
var right = (scrollWidth – windowWidth) * -1;
var slideActive = false;
var newX = 0;
var mouseX = 0;
var dist = 0;
var newScroll = 0;
var xOffset = 0;
setOffset ();
window.onresize = setOffset;
//scrollbar functions
$(‘photoBar’).onmouseover = function() {
slideActive = true;
};
$(‘photoBar’).onmousemove = function(event) {
slideActive = true;
var e = new Event (event);
mouseX = e.page.x – xOffset;
};
$(‘photoBar’).onmouseout = function() {
slideActive = false;
};
function runSlider () {
if (slideActive == true) {
if (mouseX < 350) {
dist = (350 – mouseX /50;
} else if (mouseX > 900) {
dist = (900 – mouseX) /50;
} else {
dist = 0;
}
dist = Math.round (dist);
newX += dist;
if (newX > 0) newX = 0;
if (newX < right) newX = right;
pb.style.left = newX + ‘px’;
//move scrollbar
newScroll = Math.round((windowWidth – 300) * (newX / (scrollWidth – windowWidth))) * -1;
$(‘sliderButton’).style.left = newScroll + ‘px’;
}
$(‘debug’).innerHTML = newX;
}
function findPosX (obj) {
var curleft = 0;
if (obj.offsetParent) {
while (1) {
curleft += obj.offsetLeft;
if (!obj.offsetParent) break;
obj = obj.offsetParent;
}
} else if (obj.x) {
curleft += obj.x;
}
return curleft;
}
function setOffset () {
xOffset = findPosX (document.getElementById(‘photoOuter’));
}
var slider = new Slider ($(‘sliderTrack’), $(‘sliderButton’), {
onChange:function(v) {
newScroll = parseInt($(‘sliderButton’).style.left);
newX = Math.round((scrollWidth – windowWidth) * ((v * -1) / step));
pb.style.left = newX + ‘px’;
},
steps: step,
mode: ‘horizontal’,
wheel: false
});
//start slider
slideInterval = setInterval(“runSlider()”,2);
//preload first two images
preloadPhoto ();
theNextPhoto = 2;
preloadPhoto ();
setTimeout (‘$(“loadingBox”).style.display = “none”‘, 150);
–></script>
</body>
</html>