Click Through Gallery

[son]

I use the following script to click through photos on a web page (and see all photos as thumbs if overview graphic is clicked):<script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">// init varsvar imageGallery = "1";var imageTotal;var imageNo;var aniRunning = false;var slideRunning = true;var imageDir = "images";var imageArray = new Array();var imageWidth;var slideInterval;$(document).ready(function() { getTotal();});// FUNCTIONS BELOW// get image totalfunction getTotal(){ $.get(imageDir + "/thumb/files.php?galID=1", function(data){ imageArray = data.split("|"); imageArray.pop(); imageTotal = imageArray.length; imageNo = 1; loadNavi(); // load thumbnails loadThumbs(); });}function loadNavi(){ $('#thumbs-li').prepend('<li><a class="prev-btn" href="#" onclick="prevClick();return false;"></a></li>'); $('#thumbs-li').append('<li><a class="thumbs-btn" href="#" onclick="thumbsClick();return false;"></a></li>'); $('#thumbs-li').append('<li><a class="next-btn" href="#" onclick="nextClick();return false;"></a></li>'); loadImage();}function thumbsClick(){ if($("#imageHolder").is(":visible") == true){ // fadeout image $('#imageHolder').fadeOut('slow', function() { // fade in thumbs $('#thumbHolder').fadeIn('slow', function() { // Animation complete }); }); } else { // fadeout thumbs $('#thumbHolder').fadeOut('slow', function() { // fade in image $('#imageHolder').fadeIn('slow', function() { // Animation complete }); }); }}function loadThumbs(){ for(var i = 1; i <= imageTotal; i++){ thumbPath = '<a id="' + i + '" href="#" onclick="thumbClick(this.id);return false;"><img src="' + imageDir + '/thumb/' + i + '.jpg" alt=" Photography" /></a>'; $('#thumbnails').append(thumbPath); }}function thumbClick(imageID){ imageNo = imageID; fadeOutImage();}function prevClick(){ if(imageNo > 1){ imageNo--; } else { imageNo = imageTotal; } fadeOutImage();}function nextClick(){ if(imageNo < imageTotal){ imageNo++; } else { imageNo = 1; } fadeOutImage();}// fade out imagefunction fadeOutImage(){ // check if image is showing if($("#imageHolder").is(":visible") == true){ // fadeout previous image $('#imageHolder').fadeOut('slow', function() { $("#imageHolder img").remove(); loadImage(); }); } else { // fadeout thumbs $('#thumbHolder').fadeOut('slow', function() { $("#imageHolder img").remove(); loadImage(); }); }}// load imagefunction loadImage(){ $("#imageHolder img").remove(); imagePath = '<img src="' + imageDir + '/main/' + imageNo + '.jpg" id="image" />'; $('#imageHolder').prepend(imagePath); $("#imageHolder img").load(function(){ var imageHeight = "100%"; $("#imageHolder img").css("height", imageHeight ); // fade in div fadeInImage(); });}// fade in imagefunction fadeInImage(){ $('#imageHolder').fadeIn('slow', function() { // Animation complete });}function wipeInImage(){ var pic = $("#fullImage"); imageWidth = $("#fullImage img").width(); var imageX = 0 - imageWidth; pic.css("left", imageX ); pic.stop().animate({"left": "+=" + imageWidth + "px"}, "medium", function(){ // Animation complete aniRunning = false; if(slideRunning == true){ // slideshow slideInterval = setInterval("slideShow()", 5000); } });}function prevNext(shID){ // pause slideshow $('.pauseBtn').css("display", "none" ); $('.playBtn').css("display", "inline" ); slideRunning = false; clearInterval(slideInterval); if(shID == "prev") { if(aniRunning == false){ aniRunning = true; if(imageNo > 1){ imageNo--; } else { imageNo = imageTotal; } wipeOutImage(); } } else { if(aniRunning == false){ aniRunning = true; if(imageNo < imageTotal){ imageNo++; } else { imageNo = 1; } wipeOutImage(); } }}// slideshowfunction slideShow(){ clearInterval(slideInterval); if(aniRunning == false){ aniRunning = true; if(imageNo < imageTotal){ imageNo++; } else { imageNo = 1; } wipeOutImage(); }}function playPause(shID) { if(shID == "pause"){ // pause slideshow $('.pauseBtn').css("display", "none" ); $('.playBtn').css("display", "inline" ); slideRunning = false; clearInterval(slideInterval); } else { // play slideshow $('.pauseBtn').css("display", "inline" ); $('.playBtn').css("display", "none" ); slideRunning = true; slideInterval = setInterval("slideShow()", 5000); }}</script> This is all nice as long the photos have numerical names and are all jpgs (and no gaps in between the numbers also). Therefore files.php needs to be as1.jpg|2.jpg|3.jpg|for example. Is there a way to customise script, so I could havephotoWinter.jpg|imageFromSpace.gif|notThereYet.png|for example? I really like the way the script works, but for this new website where photos could have any names (and could be gif, jpg or png) this would not work... Son

[Ingolme]

If you can use PHP, the scandir() function will give you a list of files in a directory. You'll have to ignore anything that's not an image file. Then print out a Javascript array with the file names.

[son]

I have used scandir before, but am not sure how to fit this (or anything else) in with the existing script. Son

[Ingolme]

You create a Javascript array out of the files that are extracted from the scandir() function.

<?php $image_dir = 'images/';// Tell Javascript where the image directory isecho 'var imageDir = "' . $image_dir . '"';// Create the Javascript files arrayecho 'var files = [];';$files = scandir('images/');$i = 0;foreach($files as $file) {  if( preg_match('/\.(jpg|gif|png)$/', $file) ) {    echo "files[{$i}] = '$file';";    $i++  }}?>// Now we have a files array in Javascript. Example usage:for(i=0; i < files.length; i++) {  // files[i] is the current file  thumbPath = '<a id="image' + i + '" href="#" onclick="thumbClick(this.id);return false;"><img src="' + imageDir + '/thumb/' + files[i] + '" alt="Photography" /></a>';}

[son]

As I am still lost read now the complete JavaScript beginners section and started to play around with simple things as:<script type="text/javascript">var i;var files = new Array();files[0] = "png_lower.png";files[1] = "jpg_lower.jpg";files[2] = "gif_lower.gif";</script></head> <body><script type="text/javascript">// Now we have a files array in Javascript. Example usage:for(i=0; i < files.length; i++) { // files is the current filedocument.write('<img src="images/thumb/' + files + '" alt="Photography" />');}</script>which shows up fine. So far , so good. Think to get files with php into array (I can actually get data from db) should be ok. The problem now remains to bring this in to the existing script. It does not work what I am trying. I changed the following:function loadThumbs(){ for(var i = 1; i <= imageTotal; i++){ thumbPath = '<a id="' + i + '" href="#" onclick="thumbClick(this.id);return false;"><img src="' + imageDir + '/thumb/' + files + '" alt="Photography" /></a>'; $('#thumbnails').append(thumbPath); }}...function loadImage(){ $("#imageHolder img").remove(); imagePath = '<img src="' + imageDir + '/main/' + files + '" id="image" />'; $('#imageHolder').prepend(imagePath); $("#imageHolder img").load(function(){ var imageHeight = "100%"; $("#imageHolder img").css("height", imageHeight ); // fade in div fadeInImage(); });}but<script type="text/javascript">document.write(imageArray);</script>or<script type="text/javascript">document.write(files);</script>produces only an empty page. I have a feeling that this comes fromfunction getTotal(){ $.get(imageDir + "/thumb/files.php?galID=1", function(data){ imageArray = data.split("|"); imageArray.pop(); imageTotal = imageArray.length; imageNo = 1; loadNavi(); // load thumbnails loadThumbs(); });}as we won't need most of this stuff anymore (I can also get total via PHP). However, need definitely loadNavi() and loadThumbs(), so am not sure how to go ahead with this... In addition, although we removed 'imageNo' from the functions loadThumbs() and loadImage() there is still reference everywhere in other bits of script. How do I get the relevant array numbers of the array I created to be used as 'imageNo'? Think this should solve this... Any ideas? Son