Jump to content

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

Karny

By Karny
in PHP Coding Help

 Share
Go to solution Solved by JonnoTheDev,

Recommended Posts

Karny Newbie

Karny

Posted
Posted

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.

Link to comment
Share on other sites
  • Solution
JonnoTheDev Regular Member

JonnoTheDev

Posted
  • Solution
Posted

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

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • 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.