Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript Gallery Help

    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:
    Code:
    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:
    Code:
    <!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!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,542
    Thanks
    77
    Thanked 4,382 Times in 4,347 Posts
    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).

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,542
    Thanks
    77
    Thanked 4,382 Times in 4,347 Posts
    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:
    Code:
    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.??

  • #4
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Regular Coder
    Join Date
    Dec 2008
    Location
    Tannhäuser Gate
    Posts
    286
    Thanks
    7
    Thanked 58 Times in 57 Posts
    In the folder with your images, put the following PHP file:
    getfiles.php
    Code:
    <?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]
    Code:
    <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
    Last edited by freedom_razor; 03-13-2009 at 01:16 PM. Reason: Added note about overwriting old files.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •