Dynamic Image Viewer/Selector
A very cool 'Image Viewer/Selector' that incorporates the ability for a user/admin to upload their own photos/images, include those in my 'Viewer/Selector' automatically, and then allows them to select that image for use in their article. In creating dynamic and self-updateable websites for many businesses and organizations, one issue that I had always stumbled on was a way for users to have the ability to select images to go along with the news articles they were creating. So I created a very cool 'Image Viewer/Selector' that gave them that flexibilty. Once I tackled that issue, I realized I had a workable solution but it still required me adding images by hand to that 'Selector'. To truly make this dynamic I would need to incorporate the ability for the user/admin to upload their own photos/images, include those in my 'Viewer/Selector' automatically, and then allow them to select that image for use in their article.
Dynamic Image Viewer/Selector
(Page Four)
STEP THREE: Making The Viewer Images Links
So far we have our form to add images to our website and the 'Viewer' page that lets the user/admin see what images have been uploaded. Our final goal is to have a 'popup' page (view_images.asp) which allows the user to see the images, then simply click on their choice and have its path automatically added to a 'News Creation' form.
Now lets make that viewer page a little more dynamic with some hand-edited code allowing us to make those images become links containing their path/location. We'll also add a 'Close' command so that when the user/admin selects the image the popup page will automatically close leaving only the form.
MAKE EACH IMAGE A LINK WITH ITS PATH
1.) DO NOT USE DREAMWEAVER FOR THIS NEXT PART - (It seems to have some trouble with the hand-coded areas and acts very odd with this) Open up our ASP page titled view_images.asp using NotePad.
2.) First we are going to add a variable which we will set to the value of 'Image_Path'. This will enable us to use that variable several times, where using only DW default data source only allows us a single instance.
Here is the default DW code for the Image/Title area:
<td width="102">
<img src="<%=(rsImages.Fields.Item("Image_Path").Value)%>">
</td>
<td width="136">
<%=(rsImages.Fields.Item("Image_Title").Value)%>
</td>
Let's add the following variable above it, some JavaScript span tags around it, and a close command:
<% varImagePath = rsImages.Fields.Item("Image_Path").Value %>
<td width="102">
<span onClick="ImageName('<%= varImagePath %>')">
<img src="<%= varImagePath %>" onClick="self.close()">
</span>
</td>
<td width="136">
<%=(rsImages.Fields.Item("Image_Title").Value)%>
</td>
Now we need to add some JavaScript after the head of this page which will control sending the information back to the news creation page:
<script LANGUAGE=javascript>
function ImageName(sPath){ //alert(sPath);
window.opener.window.document.NewsFormName.ImageTextBoxName.value = sPath;}
</script>
NewsFormName = Needs to be whatever the title of your news creation form is.
ImageTextBoxName = Needs to be whatever the title of your image path text box is.
Now we have a popup window which will close and submit back the information for whichever image the user/admin selected to the news form.
SEE A WORKING EXAMPLE (Click on 'News Create/Display')
All that is left is to add a small image or text link to your news creation form which opens the view_images.asp page. Now you have a fully functioning upload form, display, and dynamic selction tool.
Not too bad, huh? Let me know how you liked this tutorial by emailing me from my website's Contact form.
(Page Four)
STEP THREE: Making The Viewer Images Links
So far we have our form to add images to our website and the 'Viewer' page that lets the user/admin see what images have been uploaded. Our final goal is to have a 'popup' page (view_images.asp) which allows the user to see the images, then simply click on their choice and have its path automatically added to a 'News Creation' form.
Now lets make that viewer page a little more dynamic with some hand-edited code allowing us to make those images become links containing their path/location. We'll also add a 'Close' command so that when the user/admin selects the image the popup page will automatically close leaving only the form.
MAKE EACH IMAGE A LINK WITH ITS PATH
1.) DO NOT USE DREAMWEAVER FOR THIS NEXT PART - (It seems to have some trouble with the hand-coded areas and acts very odd with this) Open up our ASP page titled view_images.asp using NotePad.
2.) First we are going to add a variable which we will set to the value of 'Image_Path'. This will enable us to use that variable several times, where using only DW default data source only allows us a single instance.
Here is the default DW code for the Image/Title area:
<td width="102">
<img src="<%=(rsImages.Fields.Item("Image_Path").Value)%>">
</td>
<td width="136">
<%=(rsImages.Fields.Item("Image_Title").Value)%>
</td>
Let's add the following variable above it, some JavaScript span tags around it, and a close command:
<% varImagePath = rsImages.Fields.Item("Image_Path").Value %>
<td width="102">
<span onClick="ImageName('<%= varImagePath %>')">
<img src="<%= varImagePath %>" onClick="self.close()">
</span>
</td>
<td width="136">
<%=(rsImages.Fields.Item("Image_Title").Value)%>
</td>
Now we need to add some JavaScript after the head of this page which will control sending the information back to the news creation page:
<script LANGUAGE=javascript>
function ImageName(sPath){ //alert(sPath);
window.opener.window.document.NewsFormName.ImageTextBoxName.value = sPath;}
</script>
NewsFormName = Needs to be whatever the title of your news creation form is.
ImageTextBoxName = Needs to be whatever the title of your image path text box is.
Now we have a popup window which will close and submit back the information for whichever image the user/admin selected to the news form.
SEE A WORKING EXAMPLE (Click on 'News Create/Display')
All that is left is to add a small image or text link to your news creation form which opens the view_images.asp page. Now you have a fully functioning upload form, display, and dynamic selction tool.
Not too bad, huh? Let me know how you liked this tutorial by emailing me from my website's Contact form.
Jeremy Conn
Jeremy Conn has been involved in web development and graphic design since 1995. Interested in art & music all his life, Jeremy was drawn into web design after being given a copy of the original Dreamweaver product. Since that time, Jeremy has started Conn Creative Media, a design agency that he runs with his beautiful wife, Andrea, from Portland, Oregon. "I learned much of what I know about DW development from sites like DMXZone, so I feel strongly about giving back and doing my part to keep this amazing community running. Much thanks to George Petrov and the whole DMXZone team." - Jeremy
Comments
Comments
RE: Comments
RE: Comments
Great tutorial!! Where did you get all your images from for your demo? There's a great variety, and obviously they need to be royalty-free. Again- Great job!
-Justin
RE: RE: Comments
You must me logged in to write a comment.