son Posted August 14, 2008 Share Posted August 14, 2008 I have found lots and lots of JavaScript examples to do all sort of things with photos (pop-ups, photos on sliding bars and what have you got). I am 'only' after one where you can click onto an image to come to next one stored in same folder. And this one with an option to see all images in case someone does not have JavaScript. What is the search term for that or does no one do this any more?Son Link to comment Share on other sites More sharing options...
justsomeguy Posted August 14, 2008 Share Posted August 14, 2008 I'm not sure that Javascript would be the best thing to use for that. Javascript can't read a directory's contents, something like PHP would be needed to do that. The best you could do with Javascript would be pointing to files that have consecutive numbers and hoping they exist. Link to comment Share on other sites More sharing options...
son Posted August 15, 2008 Author Share Posted August 15, 2008 I'm not sure that Javascript would be the best thing to use for that. Javascript can't read a directory's contents, something like PHP would be needed to do that. The best you could do with Javascript would be pointing to files that have consecutive numbers and hoping they exist.I currently use php to read the folder content and get the photos. It is just that the effect I have (thumbnail showing and you click onto it to get the bigger one loaded into dedicated area) is not what I want. My JavaSCript knowledge is not too good and I wondered how I could make it, so that when I click onto first image it goes to second, clicking onto second leads to third etc (main image). My PHP code is:$max_num = 40;$j=0;$narray = array();$dir = "Photos/thumb/"; // name of the folder where the Thumbnail images are stored$full_dir = "Photos/full/"; // name of the folder where the Full-sized images are storedif (is_dir($dir) && (is_dir($full_dir)) ) { $dh= @opendir($dir) or die("Unable to open $path please notify the administrator. Thank you."); // confirm directories exist while (($file = readdir($dh)) !== false) { // read the entire directory if (($file != '.') && ($file != '..') && (stristr($file,'jpg'))) { //jpg files only if (file_exists($full_dir . $file)) { $narray[]=$file; $n++; } } }if ($n < $max_num) { $max_num = $n; // reset the max_num if not enough pictures }shuffle( $narray); while ( $j <= $max_num-1) { echo "\t" . '<li><a href="' . $full_dir . $narray[$j] . '" alt="full-size"><img src="' . $dir . $narray[$j] . '" alt="' . $dir . $narray[$j] . '" ></a></li> ' . "\n\r\t"; $j++; }} else { echo 'There is a problem with the directories. Please Notify the Administrator. Thank You.';} closedir($dh);echo '</ul>'; I am sure I have seen this in the past, but cannot find any examples now...Son Link to comment Share on other sites More sharing options...
justsomeguy Posted August 15, 2008 Share Posted August 15, 2008 If you want to do it in Javascript, you can have PHP write out all of the filenames into a Javascript array and then set up a function in Javascript that starts at the first element in the array and every time they click it uses the next item in the array for the image source. You could also set it up so that when PHP writes the image tag it puts a normal link to the next image. Link to comment Share on other sites More sharing options...
jeffman Posted August 15, 2008 Share Posted August 15, 2008 Let's make it one better. Use PHP to write out an array of image objects. This will give you an indexed list of URLs, but also preload the images, for which your users will thank you. (The following is what the result might look like, not the PHP to get you there.) function () init { my_image = document.getElementById ("my_image_ID"); imgs[i] = new Image(); imgs[i].src = "whatever.jpg"; // repeat as needed}function next_image (i) { // or pass it something you can extract the index from i++; my_image.src = imgs[i].src;}window.onload = init; Link to comment Share on other sites More sharing options...
son Posted August 18, 2008 Author Share Posted August 18, 2008 I will have a go...Thanks a lot,Son Link to comment Share on other sites More sharing options...
son Posted August 18, 2008 Author Share Posted August 18, 2008 I just had a go without the PHP (which should be no problem, JavaScript is my weakest point), but cannot make it work. The code I use is: <!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">function () init { my_image = document.getElementById ("photo"); imgs[i] = new Image(); imgs[i].src = "HK_10.jpg"; // repeat as needed}function next_image (i) { // or pass it something you can extract the index from i++; my_image.src = imgs[i].src;}window.onload = init;</script></head><body><a href="#" onClick="return next_image(i)"><img src="HK_1.jpg" id="photo" /></a></body></html> I also wondered if this solution would be good when someone doesn't have JavaScript installed?Son Link to comment Share on other sites More sharing options...
Kingy Posted August 18, 2008 Share Posted August 18, 2008 Well if someone doesn't have javascript enabled you can always prompt a pop up to say 'Your JavaScript has been disabled! Please enable it." or something like that. Link to comment Share on other sites More sharing options...
Synook Posted August 18, 2008 Share Posted August 18, 2008 Well if someone doesn't have javascript enabled you can always prompt a pop up to say 'Your JavaScript has been disabled! Please enable it." or something like that.How do you make a popup appear without JavaScript? Link to comment Share on other sites More sharing options...
son Posted August 18, 2008 Author Share Posted August 18, 2008 How do you make a popup appear without JavaScript? It would be great if the user will see in any case images, just when he/she has Javascript the presentation is a bit nicer as such... Anyway, does anyone see where I am going wrong in code? I only need help with Javascript (hence the example with only two images), once I understand this I have no problem getting the images from my folder...Son Link to comment Share on other sites More sharing options...
jeffman Posted August 18, 2008 Share Posted August 18, 2008 Okay, let's tart this up a little more. Note that I'm assuming a consistent filenaming system: <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <script type="text/javascript"> function () init { my_image = document.getElementById ("photo"); // THE FOLLOWING COULD ACTUALLY BE BUILT WITH A FOR LOOP imgs[0] = new Image(); imgs[0].src = "HK_0.jpg"; imgs[1] = new Image(); imgs[1].src = "HK_1.jpg"; imgs[2] = new Image(); imgs[2].src = "HK_2.jpg"; imgs[3] = new Image(); imgs[3].src = "HK_3.jpg"; imgs[4] = new Image(); imgs[4].src = "HK_4.jpg"; imgs[5] = new Image(); imgs[5].src = "HK_5.jpg"; imgs[6] = new Image(); imgs[6].src = "HK_6.jpg"; imgs[7] = new Image(); imgs[7].src = "HK_7.jpg"; imgs[8] = new Image(); imgs[8].src = "HK_8.jpg"; imgs[9] = new Image(); imgs[9].src = "HK_9.jpg"; imgs[10] = new Image(); imgs[10].src = "HK_10.jpg"; // LET'S JUST KEEP THE INDEX IN A GLOBAL image_index = 0; } function next_image () { image_index++; if (image_index > 10 ) { image_index = 0; ) my_image.src = imgs[image_index].src; } window.onload = init; </script> </head> <body> <a onclick="next_image(); return false;" href="#"><img id="photo" src="HK_0.jpg"></a> </body></html> I also wondered if this solution would be good when someone doesn't have JavaScript installed?Yes, with adjustments. What you'd want to do then is actually have a real URL in the <a> tag's href. Since the "return false" statement would never get executed, the link would actually work. Obviously, you'd need to link to a real page.This is why generating all this in PHP is a good idea. All you'd need is one file. But give the href URL a query string indicating the next image. Like this, basically:<a onclick="next_image(); return false;" href="my.php?next=<?php if (isset($_GET['next']) echo $_GET['next'] + 1; ?>"><img id="photo" src="HK_<?php if (isset($_GET['next']) echo $_GET['next']; ?>.jpg"></a>If you also want to call my.php without a query string, you'd need to add a couple "else" clauses and echo appropriate values, like "1" and "0," respectively.<a onclick="next_image(); return false;" href="my.php?next=<?php if (isset($_GET['next']) {echo $_GET['next'] + 1;} else {echo '1';} ?>"><img id="photo" src="HK_<?php if (isset($_GET['next']) {echo $_GET['next'];} else {echo '0';} ?>.jpg"></a> Link to comment Share on other sites More sharing options...
son Posted August 18, 2008 Author Share Posted August 18, 2008 Okay, let's tart this up a little more. Note that I'm assuming a consistent filenaming system:<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <script type="text/javascript"> function () init { my_image = document.getElementById ("photo"); // THE FOLLOWING COULD ACTUALLY BE BUILT WITH A FOR LOOP imgs[0] = new Image(); imgs[0].src = "HK_0.jpg"; imgs[1] = new Image(); imgs[1].src = "HK_1.jpg"; imgs[2] = new Image(); imgs[2].src = "HK_2.jpg"; imgs[3] = new Image(); imgs[3].src = "HK_3.jpg"; imgs[4] = new Image(); imgs[4].src = "HK_4.jpg"; imgs[5] = new Image(); imgs[5].src = "HK_5.jpg"; imgs[6] = new Image(); imgs[6].src = "HK_6.jpg"; imgs[7] = new Image(); imgs[7].src = "HK_7.jpg"; imgs[8] = new Image(); imgs[8].src = "HK_8.jpg"; imgs[9] = new Image(); imgs[9].src = "HK_9.jpg"; imgs[10] = new Image(); imgs[10].src = "HK_10.jpg"; // LET'S JUST KEEP THE INDEX IN A GLOBAL image_index = 0; } function next_image () { image_index++; if (image_index > 10 ) { image_index = 0; ) my_image.src = imgs[image_index].src; } window.onload = init; </script> </head> <body> <a onclick="next_image(); return false;" href="#"><img id="photo" src="HK_0.jpg"></a> </body></html> I tried it (without PHP bit to start off with), but it throws two errors:img is not definedimg[0] = new Image();-> before I click onto imageand image_index is not definedimage_index++;-> once I clicked onto imageWhy is that? I copied it exactly as it was (all pics existent)...Son Link to comment Share on other sites More sharing options...
jeffman Posted August 18, 2008 Share Posted August 18, 2008 Yeah. Arrays need to be defined before you can assign values this way. I expect the error blew the whole init function.imgs = []; // ADD THIS LINEimgs[0] = new Image(); Link to comment Share on other sites More sharing options...
son Posted August 18, 2008 Author Share Posted August 18, 2008 Yeah. Arrays need to be defined before you can assign values this way. I expect the error blew the whole init function.function preLoad () {var args = preLoad.arguments;document.imageArray = new Array(args.lenght);for(var i = 0; i < args.lenght; i++) {document.imageArray[i] = new Image;document.imageArray[i].src = args[i]; }}preLoad('HK_1.jpp', 'HK_2.jpp', etc); Could this one be used in your code to make it shorter? Am happy it works, but even more happy to learn a bit more...Son Link to comment Share on other sites More sharing options...
jeffman Posted August 18, 2008 Share Posted August 18, 2008 It'll take up less space, which has some appeal, but the savings in download time will be negligible, and the execution will take the same time, or be negligibly longer, since a for loop still executes the same number of statements, and you now have the trifling overhead of the for loop itself.I really can't think of a non-javascript way of iterating through list of file names without leaving the page in some way. CSS can let you alternate between 2, but that's the limit. That works well for a thumbnail gallery, but not for a slideshow thing like yours.I wouldn't worry about it. Just having a comparable experience for the javascript-disabled users is a big step. There aren't that many of them, really. Link to comment Share on other sites More sharing options...
son Posted August 19, 2008 Author Share Posted August 19, 2008 It'll take up less space, which has some appeal, but the savings in download time will be negligible, and the execution will take the same time, or be negligibly longer, since a for loop still executes the same number of statements, and you now have the trifling overhead of the for loop itself.I really can't think of a non-javascript way of iterating through list of file names without leaving the page in some way. CSS can let you alternate between 2, but that's the limit. That works well for a thumbnail gallery, but not for a slideshow thing like yours.I wouldn't worry about it. Just having a comparable experience for the javascript-disabled users is a big step. There aren't that many of them, really.Thanks a lot for your input!Son Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.