Jump to content

Create list in a format


smordue

Recommended Posts

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.

Link to comment
https://forums.phpfreaks.com/topic/186627-create-list-in-a-format/
Share on other sites

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>

 

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>

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.