smordue Posted December 29, 2009 Share Posted December 29, 2009 I am working on a new idea with highslide, I am wanting to create a popup box of thumbnails that when clicked, instead of opening a full sized image, I want them to run my pic-switcher. basically I need to create a list of files like: <a class='highslide' href='../images/thumbstrip11.jpg' onclick="return hs.expand(this)"> <img src='../images/thumbstrip11.thumb.png' alt='Two cabins'/></a> I have quite a few and was trying this: <?php $files = scandir('../images/siteimgs'); sort($files); foreach($files as $file) { if ($file == '.' || $file == '..') { continue; } $file_x = substr($file, 0, -4); $file_y = explode("-", $file_x); $thelist .= '<a class='highslide' href='.file.' onclick='picture-switcher.php?picture='.$file_x.''><img src='.$file.'</a>'; } ?> <?php echo $thelist; ?> With no luck. I am not sure if the onclick will even work. Quote Link to comment Share on other sites More sharing options...
jonsjava Posted December 30, 2009 Share Posted December 30, 2009 This isn't really a php issue. I'd recommend that you go javascript. Here's an example (I may be way off base here, but if this is the kind of thing you are wanting, javascript would be a better route) <html> <head> <script type="text/javascript"> function changeImage(){ document.getElementById('image').innerHTML = "<img src='http://baltimorewlu.files.wordpress.com/2009/09/golf.jpg'>" } </script> </head> <body> <div id="image"><img src="http://bohora.com/golf/wp-content/uploads/2009/04/golf-review.jpg"></div> <input type="submit" onclick="changeImage();" value="Change Image"> </body> </html> Quote Link to comment Share on other sites More sharing options...
jonsjava Posted December 30, 2009 Share Posted December 30, 2009 being the kind of guy I am, I refused to stop until I had a decent version. <html> <head> <script type="text/javascript"> function changeImage(count){ myimages = new Array(); myimages[0] = "http://baltimorewlu.files.wordpress.com/2009/09/golf.jpg"; myimages[1] = "http://www.karlovy-vary.cz/images/foto/golf_resort01.jpg"; myimages[2] = "http://www.timesharebuzz.com/wp-content/uploads/images/golf.jpg"; myimages[3] = "http://www.aerospaceweb.org/question/aerodynamics/sports/golf-ball.jpg"; if (myimages[count] != null){ var maincount = count; } else{ var maincount = 0; } theImage = document.getElementById('image'); var newcount=maincount+1; var image_button = document.getElementById('image_button'); theImage.innerHTML = "<img src='"+myimages[maincount]+"'>"; image_button.onclick=function() {changeImage(newcount);}; } </script> </head> <body> <div id="image"><img src="http://bohora.com/golf/wp-content/uploads/2009/04/golf-review.jpg"></div><br /> <div id="sub_button"><input type="submit" id="image_button" onclick="changeImage(0);" value="Change Image"></div> </body> </html> Quote Link to comment Share on other sites More sharing options...
smordue Posted December 30, 2009 Author Share Posted December 30, 2009 Thanks for you replies jonsjava, but I don't know if javascript will do what I need. I am trying to create a popup thumbnail gallery as an image switching source. Right now I am using a dropdown list, but I have so many images it is too cumbersome for my users to have to select each one by name to see what the images are. I was trying to convert this to a popup of thumbnails that when selected, instead of showing a full-size image, it would activate the image-switcher.php ( that functions fine with the dropdown), and change the image. I am messing around with the "highslide" jquery plugin, but I am not sure if that will get me where I am trying to go. The code above grabs whatever images are in the folder so I don't have to keep updating some list of images. Is there a better way to accomplish this? Or have you seen this done on a site anywhere that I can go dissect? Steve Quote Link to comment Share on other sites More sharing options...
jonsjava Posted December 30, 2009 Share Posted December 30, 2009 could you explain/link to an example of what your pic-switcher does? Here's how I'm understanding the problem: you want a table of all the images. When someone clicks on an image, it opens some file. What does this file do, exactly? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.