Jump to content

Advice needed: Display image gallery and allow user to choose one


Karny

Recommended Posts

Hi there

 

I'm brand new to the site and a fairly new PHP coder...

 

I'm looking to build a simple system which will allow non-technical users to build HTML emails. It's incredibly basic and only allows them to add content to a variety of pre-defined sections. That much I've got completely under control!

 

However, some of the elements would allow them to select an image for each section from an image library and I'm wondering what the best way to approach this would be. Essentially I'd like to present the user with some thumbnails of the available images, which when clicked would add the image path to a form field.

 

I don't want to spend too much time building somethign from scratch when I'm sure there's already a variety of things out there that do basically what I'm looking for - I'm probably not searching for the right thing!

 

I guess my question is... does anyone know of something which could do what I'm looking for, or maybe point me in the direction of a tutorial on building something like that? Or even suggest a decent search term?

 

Thanks in advance.

That is fairly simple to do with javascript. Try this little example I have written.

<html>
<head>
<title>Test</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
	$('.image_select').click(function() { 
		$('input[name="image"]').val($(this).attr('data-url'));
		return false;
	});
});
</script>
</head>
<body>
<p>
<img src="http://www.publicdomainpictures.net/pictures/10000/nahled/red-rose-28061277749457y4Rq.jpg" width="150">
<br>
<a class="image_select" href="#" data-url="http://www.publicdomainpictures.net/pictures/10000/nahled/red-rose-28061277749457y4Rq.jpg">Select Image</a>
</p>
<p>
<img src="http://www.publicdomainpictures.net/pictures/20000/nahled/beaches.jpg" width="150">
<br>
<a class="image_select" href="#" data-url="http://www.publicdomainpictures.net/pictures/20000/nahled/beaches.jpg">Select Image</a>
</p>
<p>
<img src="http://www.publicdomainpictures.net/pictures/10000/nahled/1-1229635950dOuv.jpg" width="150">
<br>
<a class="image_select" href="#" data-url="http://www.publicdomainpictures.net/pictures/10000/nahled/1-1229635950dOuv.jpg">Select Image</a>
</p>

<form>
<p>Selected Image</p>
<p><input type="text" name="image" size="100" readonly></p>
</form>
</body>
</html>

Just save it as test.html or whatever

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.