?
Solved

Image previews with dropdown

Posted on 2008-10-08
14
Medium Priority
?
445 Views
Last Modified: 2010-04-16
I'm trying to piece together some code to get image previews to work with my existing php site. For my site to work, the option values in the selects are the id numbers of the images, not the path of the image. The image preview code I've found needs the option value to be the path of the image instead of the id. Can I just add an id for the image preview function to look at instead? This is what I have so far:

Does not work:
<select name="centerphoto" onchange="document.getElementById('img_preview').src=this.options[this.selectedIndex].value; document.getElementById('img_preview').style.display='';">
<?php
foreach($artwork['centerphotos'] AS $centerphoto)
{
   echo <<<HTMLOUT
<option value="$centerphoto[id]">$centerphoto[name]</option>
HTMLOUT;
}
?>
</select>
<img id='img_preview' style='display:none'>
0
Comment
Question by:Russelauto
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 5
14 Comments
 
LVL 8

Expert Comment

by:fcardinaux
ID: 22675081
Given the image ID, is there a way build the image path?

If yes, do something like:

... document.getElementById('img_preview').src='/path/to/image' + this.options[this.selectedIndex].value + '.gif'; ...
0
 
LVL 8

Expert Comment

by:fcardinaux
ID: 22675151
If no, and if the url is stored in your array, you may do something like this:
<?php
foreach($artwork['centerphotos'] as $centerphoto)
{
   echo '<input type="hidden" id="url_' . $centerphoto['id'] . '" name="url_' . $centerphoto['id'] . '" value="' . $centerphoto['url'] . '">';
}
?>
<select name="centerphoto" onchange="document.getElementById('img_preview').src=document.getElementById('url_' + this.options[this.selectedIndex].value).value; document.getElementById('img_preview').style.display='';">
<?php
foreach($artwork['centerphotos'] as $centerphoto)
{
   echo '<option value="' . $centerphoto['id'] . '">' . {$centerphoto['name'] . '</option>';
}
?>
</select>
<img id="img_preview" name="img_preview" style="display:none">

Open in new window

0
 
LVL 8

Expert Comment

by:fcardinaux
ID: 22675171
In my previous comment I mean by "url" the image path. I assume that there is a $centerphoto['url'] beside each $centerphoto['id'] and $centerphoto['name'] that contains the image path.
0
Not sure which OpenStack Certification to get?

So you’ve realized you might want to get certified in OpenStack, but you’re not sure what the benefits might be or even which one you should take. You know there are several certification courses you can choose from, but how do you know which one is right for you?

 
LVL 8

Expert Comment

by:fcardinaux
ID: 22675242
Here is a tested solution. Just replace the URLs by image locations you know:
<?php
$artwork = array('centerphotos' => array(
    array('id' => 1, 'name' => 'sun',  'url' => 'relative/path/to/image_of_the_sun.jpg'), 
    array('id' => 2, 'name' => 'moon', 'url' => 'relative/path/to/image_of_the_moon.jpg')
));
foreach($artwork['centerphotos'] as $centerphoto)
{
   echo '<input type="hidden" id="url_' . $centerphoto['id'] . '" name="url_' . $centerphoto['id'] . '" value="' . $centerphoto['url'] . '">';
}
?>
<select name="centerphoto" onchange="document.getElementById('img_preview').src=document.getElementById('url_' + this.options[this.selectedIndex].value).value; document.getElementById('img_preview').style.display='';">
<?php
foreach($artwork['centerphotos'] as $centerphoto)
{
   echo '<option value="' . $centerphoto['id'] . '">' . $centerphoto['name'] . '</option>';
}
?>
</select>
<img id="img_preview" name="img_preview" style="display:none">

Open in new window

0
 
LVL 13

Accepted Solution

by:
MasonWolf earned 1800 total points
ID: 22675466
I'm sure you have a way to get the image path names somehow, be it from a database or whatever. You can use a different attribute to store the path property. It's a little unorthodox, but as a quick and dirty fix, it might be just what you want.


<select name="centerphoto" onchange="document.getElementById('img_preview').src=this.options[this.selectedIndex].href; document.getElementById('img_preview').style.display='';">
 
<?php
foreach($artwork['centerphotos'] AS $centerphoto)
{
   echo <<<HTMLOUT
<option value="$centerphoto[id]" href="$centerphoto[path]">$centerphoto[name]</option>
HTMLOUT;
}
?>
</select>
<img id='img_preview' style='display:none'>

Open in new window

0
 

Author Comment

by:Russelauto
ID: 22675519
Hey fcardinaux, I apologize if my level of understanding isn't good enough to fix any small issues.. the result from your code was ' . $centerphoto['id'] or something like that, appeared in the dropdown with no image.

Mason,
Your example almost worked. The dropdown was populated correctly and I got a red x for the image. The image referenced the url like so...  http://mywebsite.com/home/jaenguar/sig_images/army/centerphotos/acu.png
I'm trying to reference matching thumbnails in the images/army/centerphotos/ directory. I just need to figure out how to correct the path but I think you're solution works...
0
 

Author Comment

by:Russelauto
ID: 22675641
So I just need to cut off the first part and make this:

http://mywebsite.com/home/jaenguar/sig_images/army/centerphotos/acu.png

into this:

images/army/centerphotos/acu.png
0
 
LVL 8

Assisted Solution

by:fcardinaux
fcardinaux earned 200 total points
ID: 22675695
Where is the string "acu.png" stored? Or is it the same as $centerphoto['name'] in your script?
0
 

Author Comment

by:Russelauto
ID: 22675714
I tried

id="images/army/centerphotos/$centerphoto[name].png

but it comes back with the name of the drop down option, not the file name. So flag.png gets spit out as US%20Flag

The images are stored in a database. The true path can't be referenced throug a web server. Only the webserver can reference the files (theyre protected) but there are matching thumbnails in the images directory accessible from a url.
0
 
LVL 8

Expert Comment

by:fcardinaux
ID: 22675715
If "acu.png" is stored in $centerphoto['name'], do this:

<?php
$artwork = array('centerphotos' => array(
    array('id' => 1, 'name' => 'acu.png'), 
    array('id' => 2, 'name' => 'other_image.png')));
foreach($artwork['centerphotos'] as $centerphoto)
{
   echo '<input type="hidden" id="image_' . $centerphoto['id'] . '" name="image_' . $centerphoto['id'] . '" value="' . $centerphoto['name'] . '">';
}
?>
<select name="centerphoto" onchange="document.getElementById('img_preview').src='images/army/centerphotos/' + document.getElementById('image_' + this.options[this.selectedIndex].value).value; document.getElementById('img_preview').style.display='';">
<option value="">please select the image</option>
<?php
foreach($artwork['centerphotos'] as $centerphoto)
{
   echo '<option value="' . $centerphoto['id'] . '">' . $centerphoto['name'] . '</option>';
}
?>
</select>
<img id="img_preview" name="img_preview" style="display:none">

Open in new window

0
 
LVL 8

Expert Comment

by:fcardinaux
ID: 22675735
Oops, we posted our comments at the same time...

You write "The images are stored in a database". You probably mean the file names. In this case, why can't your web server read them in the database?
0
 

Author Comment

by:Russelauto
ID: 22675780
Ok I got it. The truth is Mason code worked. It was easier for me to dicipher it. However, you pointed me to look at the database and from there I filled in the blanks..

This works:
<select name="centerphoto" onchange="document.getElementById('img_preview').src=this.options[this.selectedIndex].id; document.getElementById('img_preview').style.display='';">
 images/army/centerphotos
<?php
foreach($artwork['centerphotos'] AS $centerphoto)
{
   echo <<<HTMLOUT
<option value="$centerphoto[id]" id="$centerphoto[thumb]">$centerphoto[name]</option>
HTMLOUT;
}
?>
</select>

In fairness, it's Mason's solution so I owe him the majority of the points.

I'm going to start a new question, because the default image doesn't appear. I want to fix that..
0
 
LVL 8

Expert Comment

by:fcardinaux
ID: 22675892
You wrote "In fairness, it's Mason's solution so I owe him the majority of the points."

Giving me only 10% of the points is clearly unfair, on the contrary. My comment posted 1 hour before Mason's accepted solution did work with less changes. As I wrote, I had tested it. Furthermore, the HREF attribute used by Mason in an OPTION element is not standard-compliant: http://www.w3.org/TR/html401/interact/forms.html#h-17.6.

Not to speak of the time spent asking you where or how to find the image path. When an expert makes true and efficient efforts to answer a question, he deserves a fair part of the points.
0
 

Author Comment

by:Russelauto
ID: 22683112
Hey fcardinaux, I appreciate your answers, but the end result was Mason's solution worked. I explained the results I got when using your code. Again, I aplogize if my lack of knowlege on the subject prevented me from adapting your code to make it work with my scenario. I'll try to be more descriptive in the future.
0

Featured Post

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to count occurrences of each item in an array.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

801 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question