...

View Full Version : Javascript Gallery Help



evanrose
03-13-2009, 01:34 AM
Hi, I am trying to design a a web comic and I have a javascript gallery, however I can't get it to make the picture that shows up the latest image in the folder. Is there any work-around for this?

Javascript:


var slideShow=function(){
var bxs,bxe,fxs,fxe,ys,ye,ta,ia,ie,st,ss,ft,fs,xp,yp,ci,t,tar,tarl;
ta=document.getElementById(thumbid); ia=document.getElementById(imgid);
t=ta.getElementsByTagName('li'); ie=document.all?true:false;
st=3; ss=3; ft=10; fs=5; xp,yp=0;
return{
init:function(){
document.onmousemove=this.pos; window.onresize=function(){setTimeout("slideShow.lim()",500)};
ys=this.toppos(ta); ye=ys+ta.offsetHeight;
len=t.length;tar=[];
for(i=0;i<len;i++){
var id=t[i].value; tar[i]=id;
t[i].onclick=new Function("slideShow.getimg('"+id+"')");
if(i==0){this.getimg(id)}
}
tarl=tar.length;
},
scrl:function(d){
clearInterval(ta.timer);
var l=(d==-1)?0:(t[tarl-1].offsetLeft-(ta.parentNode.offsetWidth-t[tarl-1].offsetWidth)+10)
ta.timer=setInterval(function(){slideShow.mv(d,l)},st);
},
mv:function(d,l){
ta.style.left=ta.style.left||'0px';
var left=ta.style.left.replace('px','');
if(d==1){
if(l-Math.abs(left)<=ss){
this.cncl(ta.id); ta.style.left='-'+l+'px';
}else{ta.style.left=left-ss+'px'}
}else{
if(Math.abs(left)-l<=ss){
this.cncl(ta.id); ta.style.left=l+'px';
}else{ta.style.left=parseInt(left)+ss+'px'}
}
},
cncl:function(){clearTimeout(ta.timer)},
getimg:function(id){
if(auto){clearTimeout(ia.timer)}
if(ci!=null){
var ts,tsl,x;
ts=ia.getElementsByTagName('img'); tsl=ts.length;x=0;
for(x;x<tsl;x++){
if(ci.id!=id){var o=ts[x]; clearInterval(o.timer); o.timer=setInterval(function(){slideShow.fdout(o)},fs)}
}
}
if(!document.getElementById(id)){
var i=document.createElement('img');
ia.appendChild(i);
i.id=id; i.av=0; i.style.opacity=0;
i.style.filter='alpha(opacity=0)';
i.src=imgdir+'/'+id+imgext;
}else{
i=document.getElementById(id); clearInterval(i.timer);
}
i.timer=setInterval(function(){slideShow.fdin(i)},fs);
},
nav:function(d){
var c=0;
for(key in tar){if(tar[key]==ci.id){c=key}}
if(tar[parseInt(c)+d]){
this.getimg(tar[parseInt(c)+d]);
}else{
if(d==1){
this.getimg(tar[0]);
}else{this.getimg(tar[tarl-1])}
}
},
auto:function(){ia.timer=setInterval(function(){slideShow.nav(1)},autodelay*1000)},
fdin:function(i){
if(i.complete){i.av=i.av+fs; i.style.opacity=i.av/100; i.style.filter='alpha(opacity='+i.av+')'}
if(i.av>=100){if(auto){this.auto()}; clearInterval(i.timer); ci=i}
},
fdout:function(i){
i.av=i.av-fs; i.style.opacity=i.av/100;
i.style.filter='alpha(opacity='+i.av+')';
{if(i.parentNode){i.parentNode.removeChild(i)}}
},
lim:function(){
var taw,taa,len; taw=ta.parentNode.offsetWidth; taa=taw/4;
bxs=slideShow.leftpos(ta); bxe=bxs+taa; fxe=bxs+taw; fxs=fxe-taa;
},
pos:function(e){
xp=ie?event.clientX+document.documentElement.scrollLeft:e.pageX;
yp=ie?event.clientY+document.documentElement.scrollTop:e.pageY;
if(xp>bxs&&xp<bxe&&yp>ys&&yp<ye){
slideShow.scrl(-1);
}else if(xp>fxs&&xp<fxe&&yp>ys&&yp<ye){
slideShow.scrl(1);
}else{slideShow.cncl()}
},
leftpos:function(t){
var l=0;
if(t.offsetParent){
while(1){l+=t.offsetLeft; if(!t.offsetParent){break}; t=t.offsetParent}
}else if(t.x){l+=t.x}
return l;
},
toppos:function(t){
var p=0;
if(t.offsetParent){
while(1){p+=t.offsetTop; if(!t.offsetParent){break}; t=t.offsetParent}
}else if(t.y){p+=t.y}
return p;
}
};
}();

window.onload=function(){slideShow.init(); slideShow.lim()};


html:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="Evan Rose - Matt Lawrence" />
<meta name="description" content="likeacrab.com, a daily web comic for crabs." />
<meta name="keywords" content="happycrab, happy crab, crabs, web comic, evan rose, matt lawrence" />
<meta name="DC.title" content="likeacrab.com" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>
LikeACrab.com
</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
</div>
<div id="peek">
</div>
</div>
<div id="main">
<div id="thedaily">
</div>
<div id="shadow">
<div id="imghold">
<div id="image">
<a href="javascript:slideShow.nav(-1)" class="imgnav " id="previmg"></a>
<a href="javascript:slideShow.nav(1)" class="imgnav " id="nextimg"></a>
</div>
</div>
<div id="thumbwrapper">
<div id="thumbarea">
<ul id="thumbs">
<li value="1"></li>
<li value="2"></li>
<li value="3"></li>
<li value="4"></li>
</ul>
</div>
</div>
</div>
<div id="navwrapper">
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Home</a></li>
<li><a href="archives.html">Archives</a></li>
<li><a href="store.html">Store</a></li>
<li><a href="fanart.html">Fan Art</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="stuff.html">Stuff</a></li>
</ul>
</div>
</div>
</div>
<div id="content">
<div id="news">
</div>
<div id="newswrapper">
<div id="newscontent">
Tuesday, March 12, 2009<br>
<p>There appears to be a <a href="http://www.youtube.com/watch?v=T3e6Wy19jbo&NR=1" class="white">Giant Enemy
Crab</a> in the midst!
<br><br>
<p>The ancients believed that if you were born on a certain date, you were protected by a giant sky crab that gave you its powers. This belief was set aside once a twelfth of the population was drowned in butter and found to taste nothing like giant sky crab. Which, by the way, is still a delicacy in some parts of Greece.
<br><br>And thus, happy crab is awesome.
</div>
</div>
</div>
</div>
<div id="footer">
LikeACrab, 2009. All Rights Reserved.
</div>

<script type="text/javascript">
var imgid = 'image';
var imgdir = 'daily';
var imgext = '.jpg';
var thumbid = 'thumbs';
var auto = false;
var autodelay = 0;
</script>
<script type="text/javascript" src="slide.js"></script>

</body>
</html>


The images are stored in "/daily". Thanks in advanced!

Old Pedant
03-13-2009, 02:12 AM
Neither HTML nor JavaScript in the browser *CAN* be aware of the timestamp/last modified/when created/etc. info of a file that is on the SERVER.

You would need to use a server-side system (PHP, ASP, ASP.NET, JSP, etc.) to be able to discover that info.

What you COULD do is perhaps give a name to your comic images that includes the date as part of the name. And then simply look for images starting with today's date. I would *NOT* do this unless you will be adding images at least every two or three days or perhaps on a regular schedule (e.g., once a month would be okay...you'd just look for current month).

Old Pedant
03-13-2009, 02:16 AM
DOH on me!

Another way to do this would be to put a *TEXT* file on your server that had an *INDEX* to all the image files (or perhaps simply put the image file names in that text file in the order you want them displayed). And then you could read that text file via AJAX-style coding. Even easier: If you don't mind having that text file *actually* be a JavaScript file, you could just have it be a JS array of the names. Example:


var imageNames = new Array(
"latestImage.jpg",
"nextToLatest.gif",
....
);

And then you can just include that JS file on your page.

SO...

A lot here depends on HOW you want to manage all this. How automatic does it need to be, etc.??

evanrose
03-13-2009, 02:48 AM
Yeah, I know that you'd have to have a database language to have it just detect. And I don't need that. I can just do it manually every day. At least until I'm better with PHP and mySQL. For now, however, I just want to make it work. So, I would like to do the text file idea, but I don't know the code to do it. I understand the idea though. Thanks for the quick responses by the way.

freedom_razor
03-13-2009, 02:06 PM
In the folder with your images, put the following PHP file:
getfiles.php

<?php
Header("content-type: application/x-javascript");
function filesAR($dirname=".") {
$pattern="(\.jpg$)|(\.png$)|(\.gif$)";
$files = array();
$counter=0;
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){
echo 'files_array['.$counter.']=["'.filemtime($file) .'","'.$file.'"];';
$counter++;
}
}
closedir($handle);
}
return($files);
}
echo 'var files_array=new Array();';
filesAR();
?>
Then in your HTML page, call this PHP file, it will return multidimensional array files_array of files with their last-modified unix timestamps, in Javascript format: [it's an array of 2 element arrays with timestamp at index 0 and filename at 1]

<script src="getfiles.php"></script>
<script type="text/javascript">
var files_sorted=files_array[(files_array.sort(function (a,b){var x=a[0];var y=b[0];return x-y;})).length-1][1];
</script>
To make things easier for you, variable files_sorted in the code above contains the filename of the most recently modified picture file [.gif, .jpg or .png] in the folder where getfile.php is placed, which you can use in your code.

Keep in mind that if you overwrite any of older pictures in the folder, that overwritten picture will be returned by code above. Solution would be to make sure that if you do change any of the old pictures, also overwrite the most recent one as the last thing you do.

Disclaimer: will work well until January 19, 2038 ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum