Problems with a thumbnail image to popup Full-size image (image paths from a database)

I am hoping to get more feedback from entering this in perhaps a more appropriate forum.

 

Please refer to post   http://forums.asp.net/thread/1540002.aspx

 

I think I’ve explained what I would like to do but can’t figure out how to successfully code it.

 

I found it interesting that if I removed the Onclick event, my Bind error goes away.

 

And changing the Bind to an Eval traded the Bind error for a parser error.

 

How can I pass the path of the Full size image from my DB to the javascript so that ASP and Java both are OK with the coding?

 

I’ve seen a lot of Posts with similar problems but haven’t been able to find a solution yet.

Thx.

0
DannyDep
1/24/2007 8:42:52 PM
asp.net.client-side 24353 articles. 2 followers. Follow

12 Replies
1031 Views

Similar Articles

[PageSpeed] 53

Your problem is the use of double quotes. It gets confused because it thinks that the onClick statement is: "showFullImage('<%# Eval("

onclick="showFullImage('<%# Eval("FullImagePath")%>')" />

Try:

onclick='showFullImage("<%# Eval("FullImagePath")%>")' />


** Hope this helps!

DennyDotNet.com
Social42.com
0
SuperGhost
1/24/2007 9:43:27 PM

Thanks SuperGhost,

Now at least I get the page to recognize the thumbnail.  But when I try to click on the image, nothing happens.  I don't get a popup of the full image. 

Here is my javascript and code.  See anything wrong with it?  Thx

<script type="text/javascript">
    function showFullImage(path)
    {
        features = 'width=400,height=200,toolbar=yes, location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,copyhistory=yes, resizable=yes';
        window.open(path,'FullImage',features);
    }
</script>
<asp:FormView ID="FormView4"  runat="server" DataSourceID="AccessDataSource1">
  <ItemTemplate>
      <img id="ThumbnailPath"  src='<%# Eval("ThumbnailPath") %>' 
    runat="server"  alt=""  onclick='showFullImage("<%# Eval("Figure1Path")%>")' />
     </ItemTemplate>
       </asp:FormView>
  

 

0
DannyDep
1/25/2007 5:15:04 AM

Hmm... I just tried running the javascript and it worked fine.

So... what does the rendered HTML show? Check and make sure that the onClick is showing up for the image.

It could also be a pop-up blocker.


** Hope this helps!

DennyDotNet.com
Social42.com
0
SuperGhost
1/25/2007 5:31:05 AM

Sorry I'm a newbie.  By rendered HTML, I am assuming you are talking about the source?

When I view the source here is what is there.

<script type="text/javascript">

    function showFullImage(path)

    {

        features = 'width=400,height=200,toolbar=yes, location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,copyhistory=yes, resizable=yes';

        window.open(path,'FullImage',features);

    }

</script>

    <table cellspacing="0" border="0" id="ctl00_ContentPlaceHolder3_FormView4" style="border-collapse:collapse;">

            <tr>

                        <td colspan="2">

      <img src="images/Page1/109PageOneThumb.gif" id="ctl00_ContentPlaceHolder3_FormView4_ThumbnailPath" onclick="showFullImage(&quot;&lt;%# Eval(&quot;Figure1Path&quot;)%>&quot;)" />

     </td>

...................................

How can I check that the onClick is showing up for the Image?

Not a popup blocker as I tested by hard coded images first and am allowing popups.

FYI,  when I run with IE6, within localhost testing from VWD, I get a runtime error on line 159:  expected: ')'.  But the total # of lines in this webpage is 141.

Also,  I am using MasterPages.  There are plenty of other javascripts running on this page as i am using CA's tabstrip as well as Google's Search which also uses javascript.

???

Thx again.

0
DannyDep
1/25/2007 7:52:40 PM

Perhaps this info will also help to solve this problem.  Now I see where line 159 was coming from.

when I ran the debugger within VWD, here are lines, starting at 159, in the problem page. (NOTE: I underlined img as this was shown as a possible problem, although no errors are seen within  VWD for this page.

......................................

<table cellspacing="0" border="0" id="ctl00_ContentPlaceHolder3_FormView4" style="border-collapse:collapse;">

      <tr>

            <td colspan="2">

      <img src="images/Page1/109PageOneThumb.gif" id="ctl00_ContentPlaceHolder3_FormView4_ThumbnailPath" onclick="showFullImage(&quot;&lt;%# Eval(&quot; Figure1Path&quot;)%>&quot;)" />

     </td>

      </tr>

</table>

 

0
DannyDep
1/25/2007 8:42:59 PM

Looks like .NET is encoding the onClick statement. Notice the &quot and the &lt

Lets try switching the double quotes to the outside:

onClick="showFullImage('<%# Eval('Figure1Path') %>');"


** Hope this helps!

DennyDotNet.com
Social42.com
0
SuperGhost
1/26/2007 4:42:40 PM

Hi SuperGhost,

Thanks for looking at this.

Here is the result from your suggestion.

 

Code: onclick="showFullImage('<%# Eval('PubFigure1Path') %>');"

View Source: onclick="showFullImage('&lt;%# Eval('PubFigure1Path') %>');"

 

 

 

I’ve been trying a few different relations between the single and double quotes on this and how found the following.

The last example actually runs the Javascript but with a 400 Bad Request. 

Can anyone see how I can make this a good request?

Thx,

 

 

Code: onclick='showFullImage(<%# Eval(Figure1Path)%>)'

View Source: onclick="showFullImage(&lt;%# Eval(Figure1Path)%>)"

 

- - - - - - - - - - - - - - - - -

 

Code: onclick='showFullImage("<"%# Eval(Figure1Path)%>)'

 

View Source: onclick="showFullImage(&quot;&lt;&quot;%# Eval(Figure1Path)%>)"
 
-  - - - - - - - - - - - - - - - - 
 
Code: onclick='showFullImage('<'%# Eval(Figure1Path)%>)'
 
parser error
 
 
- - - - - - - - - - - - - - - - 
Code: onclick='showFullImage("<%# Eval(Figure1Path)%>")'
 
View Source: onclick="showFullImage(&quot;&lt;%# Eval(Figure1Path)%>&quot;)"
 

Opens the popup but with

HTTP Error 400 - Bad Request.

0
DannyDep
1/26/2007 4:56:05 PM

Yea, ASP.NET is not binding the Eval function, instead it thinks its a literal string. It's probably encoding the onClick event before the compiler gets to it. Lets try something else

<img id="ThumbnailPath"  src='<%# Eval("ThumbnailPath") %>' 
    runat="server"  alt=""  onclick="showFullImage(&quot;<%# Eval('Figure1Path')%>&quot;)" />


** Hope this helps!

DennyDotNet.com
Social42.com
0
SuperGhost
1/26/2007 5:27:04 PM

OK.  I tried this.

onclick="showFullImage(&quot;<%# Eval('Figure1Path')%>&quot;)" 

 

Same results with a 400 Error - Bad Request.

Here is the URL that was formed in the popup page. 

http://localhost:2446/WebSite/<%# Eval('Figure1Path')%>

 

Still not able to fine the path. 

 

Perhaps the code that was suggested to me in the javascript could also have something to do with the problem?

 

0
DannyDep
1/26/2007 7:09:26 PM

Sorry, here is the source from the last attempt.

onclick="showFullImage(&quot;&lt;%# Eval('Figure1Path')%>&quot;)"

0
DannyDep
1/26/2007 8:00:54 PM

Well I can't seem to get around ASP.NET encoding the javascript call. Basically what's happening is that .NET is probably calling an HtmlEncode function on the onClick before the databinding happens. That's why you see the &quot, etc... So by the time the databinding should occur it finds onClick and only sees the encoded string. It never finds the server tags <%# - because it's encoded. That is why you stil lsee the Eval function after the page is rendered. .NET never gets a chance to parse it. Your javascript is fine.

So the only way to get around this is to remove the runat="server" from the image tag.  just tried it myself and it works fine.

Like so:

<img id="ThumbnailPath" src='<%# Eval("ThumbnailPath") %>' alt="" onclick='showFullImage("<%# Eval("Figure1Path")%>");' />


** Hope this helps!

DennyDotNet.com
Social42.com
0
SuperGhost
1/26/2007 8:32:54 PM

Eurika!!

That worked SuperGhost.  Thank  you.

There is one, hopefully small, problem.

The Fullsize Image has text in it.

In Firefox (2.0.0.1) and Opera (8.5.1) the text in the popup full size image is very clear and readable.

However in IE (6.0..) the text in the popup full size image is not clear.

In fact, if I try to overlay both popup windows, they are almost exactly the same width, but the Firefox popup window is approx. 15 % higher.

Also, the image (height and width) in Firefox is approx. 15 % larger, hence the clearer text.

Not knowing anything about Javascript, can I set width and height parms to something like “auto” to allow each browser to do it own best fit, or is this just wishful thinking on my part?

P.S. The popup image sizes in Firefox and Safari are exactly the same.

I am hoping a solution works in Safari and IE7 as well.

Thx.

 

Here is what is coded in the javascript

<script type="text/javascript">

    function showFullImage(path)

    {

        features = 'width=615,height=796,toolbar=yes, location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,copyhistory=yes, resizable=yes';

        window.open(path,'FullImage',features);

    }

</script>

0
DannyDep
1/26/2007 9:09:38 PM
Reply:

Similar Artilces:

Thumbnail image to popup Fullsize image (image paths from a database)
I am trying to modify an example of code from http://www.huntingground.freeserve.co.uk/main/mainfram.htm  - - >  Image Scripts - - > Image Gallery 7 (Reusing popup for large image)   where instead of using the hardcoded image in the example javascript, I can reference the path to that image which is loaded in my Access DB.   I was able to modify the HTML img to find the src of the thumbnail path. So too is the path to the full image located in my Access DB.   Is there a way I can load the path to the full image in the javascript or does anyone ...

Save Image Path into Database, Retrieve Image Path by Particular Image ID and Display Image through Gridview
Hi All, Currently, I have a file upload control in my aspx page to allow user to upload images. When the user clicks the SAVE button, the image will be saved in a particular folder named 'PMap' that located within the website. What I am trying to do here is to direct all uploaded images into a common image folder (in this case 'PMap') and then, retrieve the images and displayed it through a Gridview according to its respective image id. I have managed to store all uploaded images into a common image folder, PMap. However, I hope advice can be given on my following pro...

Creating Thumbnail Images
Hi all, I have a script that uploads an image and creates a thumbnail for it. Ideally this thumbnail would be a smaller filesize but this is not what is happening. I have just uploaded a few images one of which was 378x521px and 11.3Kb. The thumbnail image created from this was 145x200 and 55.5Kb! Can anyone please tell me what I am doing wrong. I am using the GetThumbnailImage method as such:  System.Drawing.Image myThumbnail = myBitmap.GetThumbnailImage(intThumbWidth, intThumbHeight, myCallBack, IntPtr.Zero);myThumbnail.Save (Server.MapPath(sSavePath + sThumbFile)); Many thank...

Image on Image
I am trying to display a page that has image of a map on it. The user can then place other images of red thumbtacks on the image at different locations. Then when these thumb tacks are clicked on, they open a folder of pics related to the area. I saw a method in the imageButton class that returns the (x,y) of the location where the user clicked. I thought I could use this information to place another, smaller image button, on that area. My problem is that i can't seem to get the bottom imageButton to be transparent so I can see the smaller one. Am i on the right track with this. Any advi...

Imaging, but not imaging
We multicasted to 43 machines. Updated the image on the master. Multicasted the updated image to 36 machines. (the other 7 wouldn't join the session for some unknown reason). I visually verified that all 36 were imaging. One of the 8 which didn't rename appears to not even have been imaged. The problems with the previous image were still there. It's as though the machine didn't image even though I saw it take part in the session and the temp bar going across the screen. What the heck's going on here? AlaN As a try, what happens if you boot either to PXE ...

image and image
// create an image object, using the filename we just retrieved System.Drawing.Image image = System.Drawing.Image.FromFile(Server.MapPath(file)); // create the actual thumbnail imageSystem.Drawing.Image thumbnailImage = image.GetThumbnailImage(64, 64, new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback), IntPtr.Zero);   now my question is how to display this image in my image1 control in asp.net (version 1.1) the below line of code is not working.  Image1.ImageUrl=thumbnailImage.ToString();Mark As Answer If my reply helped you. Hi, you can save t...

Image in image
Hi, I have a project where clients viewing my website can buy t-shirts. They can choose from a number of t-shirt colors and shapes which are their plain colour. They can also choose a number of prints to be placed on the t-shirt. These will be graphics stored in a database. My problem is on how I can displaty the t-shirt with the graphics or logo they chose on te t-shirt. It would be something like drawing text on an image but instead drawing an existing image on the base image. Any Ideas? (I am using visual studio 2005 and vb.NET)   RegardsMerovingian you 1. You can create a...

Are images stored in database or the path of the images is stored in database
In Ibuyspy store. Are images stored in database or the path of the images is stored in database ?HighOnCodingWanna get high! The image name is stored in the database e.g cart.gif. If I have seen further than others, it is by standing upon the shoulders of giants. Isaac Newton Hi, Is this a good idea to save the image name in the Database and the image in the Server's Folder. HighOnCodingWanna get high!  azamsharp wrote:Hi, Is this a good idea to save the image name in the Database and the image in the Server's Folder.Of course.It's a good idea.Otherwise the speed of&...

retrving image from the image path in the database.
hi . i am storing the image path in the database.i have 2 colums id, path1 D:\project\bank\adsai.jpg2 D:\project\bank\ads34ai.jpg3 D:\project\bank\a4ai.jpgnow i need retrive image . once the user enter 2 he needs to get that image for the id 2. ans so on...how to retrive the image and display in an imagecontrol prince5: hi . i am storing the image path in the database.i have 2 colums id, path1 D:\project\bank\adsai.jpg2 D:\project\bank\ads34ai.jpg3 D:\project\bank\a4ai.jpgnow i need retrive image . once the user enter 2 he needs to get that image for the id 2. ans so on...how to retrive...

Displaying image from database(image datatype) to image control
Hie all...I'm a newbie at asp.net. I m currently using asp.net 2.0.I m having a problem with displaying images on my web form. Have tried looking thru all codes but i can't find a step by step tutorial for doing so. I understand that in asp.net 1.1, the detailsview can automatically be linked to the image field and display the image. But this is not possible now. So, i have decided to just display the image in an image control.from my understanding, 1. retrieve image from database and convert it to temporary image file in a file path. 2. use the image control's imageurl to point to the file....

Possible for Image in database Visible only if image path exists in database?
I have an Access Database and i am using C#. I have a datagrid for a restaurant website that is populated by menu items. One of the Items is an image but not every item on the menu has an image. The ones that dont though come up with the little image placeholder like an image is supposed to be there. Does anybody know how I can make the image visible only if there is an image path stored in the database? //By the way, there are only 3 columns in the datagrid- the center column is populated by the Image, the Menu Item, and the Description of the Menu Item check out for 'helper functi...

Storing images in SQL database vs storing images in seperate folder and using URL image path
Hi allCan you store images in a sql database and if so, does it store the images as an image file or does it store it in a binary format reducing the size of the image. If it can be stored in an sql database as a image or a binary format what are the advantages/disadvantages or is it better to store the url in the database and then bind the image holder to the url link in the database. Hi, These two ways are both ok. My suggestion is to store images into sql database if there are no much more images, otherwise, it's better store them into file system because you can store them no mat...

display image in a image image button
hi   i have to display an image in image button while uploading mycode Image1.ImageUrl = Upload.PostedFile.FileName; is not working thanks Hi You need to save the PostedFile to the disk on the server and then assign it to ImageUrl. Take a look at the following links for more infoprmation on how to do this.  http://www.codeproject.com/KB/aspnet/netimageupload.aspx http://www.stardeveloper.com/articles/display.html?article=2003022601&page=1Reza Nassabehwww.professionalcsharp.comDon't forget to click "Mark as Answer" on the post that helped you. That way ...

Image Url
 I have a Image control which will display the selected image from the client File system(ie : the image is not been uploaded untill the user press save button)When the user browers a image which contains space in the image path(eg:C:\Documents and Settings\user\Desktop1.jpg), then that image is not been displayed <script runat="server"> protected void btnShowP_Click(object sender, EventArgs e) { Image1.ImageUrl = FileUpload1.PostedFile.FileName; } protected void btnSave_Click(object sender, EventArgs e) { Sys...

ADO.net problem: i can not view image data for the rest of my table rows except the image for the first row but i can read all the other non image fields for all rows.
Hi i have a table with the following fields imgid............int imgdata........image imgtitle.........varchar(max) imgType........varchar(max) imgLength.....bigint incident_id.....int i have no problem with uploading the image but viewing the uploaded image(s) in a gridview has caused me great pain. The probelm is i have two pages. page1 grabs the image to display and page2 has a gridview that displays the grabed image. I wanted to have an sql statement like SELECT * FROM mytable WHERE incident_id=someValue. IF i have 5 records in this table and i view page2 ...

Showing Thumbnail Images From Large Images Stored To Database!
hi everybody!notice: I am a beginner!This is my Q:I want to show uploaded images(that stored to SQL database as binary file) in thumnail size in a image control(as a repeater ItemTemplate). I can fetch Images from database by a generic handler(GetImageFromDB.ashx) and it works, but I want show it as a Thumbnail Image. I created another handler file(as GetThumbnail.ashx) and in this new handler I used following code:    string    ImagePath = string .Format ("~/GetImageFromDB.ashx?ID={0}",context.Request["id"]);        LargeImage...

Display image on page using full path of image
I am attempting to display an image in my Repeater control.  At run-time, I have only the full path of the image. (eg: c:\somedir\somedir\imagename.gif) The images are not located in the directory that the web application is running in. Is it possible to display the image?-Craig U-Sports.net - Taking Fantasy Football to School Yes you can. i.e.  "Repeater1" runat="server" DataSourceID="SqlDataSource1"> "Image" runat="server" ImageUrl="C:/myImage.gif" /> <%# Eval("fldTitle") %> ...

Show Full image in popup on mouse over event of same image
hi all, In my project i am using repeater and having image in that, i want to show the image with full size in pop up on mouse over event of same image. so please help me to solve this problem. Thanks i think u need thumnail images http://www.google.com.pk/search?hl=en&sa=X&oi=spell&resnum=0&ct=result&cd=1&q=thumbnail+site%3Aforums.asp.net&spell=1We All move to our original place.Don't forget.Imran Baloch This can be accomplished with CSS.  I use the same image but change the size in the html, instead of having 2 separate images for the same thing...

Problem making image
I have a Dell Latitude 131L that I am trying to make an image of, but it seems that imaging engine somehow cant find the partition with the OS, so I only get an image with 4k size. Anyone have any ideas to what might cause it, and posible solutions? On Fri, 27 Apr 2007 10:44:28 GMT, Thor wrote: > Anyone have any ideas to what might cause it, and posible solutions? it can't find the hd, which patchlevel are you running? -- If you have already compiled drivers or have linux.2 please put them on http://forge.novell.com/modules/xfmod/project/?zfdimgdrv Live BootCd and...

How to retrieve path of an image which is stored as image data in database.
Hi there, Is there anyone who can solve my problem? I need to use SlideshowExtender for photo album. As all know, to achieve this, there is a class called "Slide" in "AjaxControlToolkit" namespace, and "Slide" class takes (imagePath As String, name As String, description As String). I am uploading images as a binary data type in database and i am able to achieve those images as image object. Now my problem is how to pass "imagePath" in "Slide" class. Can anyone help?  Thanks in advance - Prachi Friend, I would recommend yo...

How to link image on the client side not using image control
Hello: I need to link my image on the client side code, but not use image control. Is anyway like ASP to use: img src="../image/photo.gif" ?  Thanks    You meant  without adding image control you wanted to add an image and give the link for that? please give more details... Don't forget to click (Mark as Answer) on the post that helped to solve your problem. Yes. In ASP, you specify the image path: img src="../image/photo.gif". I put image in the folder image. How to specify this path and find image without using image contro...

convert image into thumbnail image
I have tried by this code,  to convert a image into thumbnail but a error ocurred as Out of Memory on the denoted line.protected void button1_Click(object sender, EventArgs e)        {            string ImageName = "Zee.jpg";            //FileUpload1.SaveAs(Server.MapPath("Photos\\") + ImageName);            string ThumbnailPath = ("f:\\Solution\\Test\\TestProject\...

Save Image in Database and read image from database
Hi, I've got a problem.I save a image in a database and try to read it again.It works great, but its very slow. Right now i know why, i make a small image from 100x75 pixels, but its still 3.1 MB !!!So thats why its kinda slow ;) But i don't know why its so slow?Can anyone help me? I get it from the database with this link:getImage.aspx?ID=34&thumbnail=110&p=hWith thumbnail i say he should be 110 pixels, and with p i say the height should be 110 ore the width should be 110, in the last case the h should be a w. My code for getImage.aspx:   System.Data.Sq...

Image size
I m getting Image URL from Other Server. I have to get the size of Image URL with out saving .Is It Possible? Please Help Me. please elaborate...Chinna_sv... alagarm:I m getting Image URL from Other Server. I have to get the size of Image URL with out saving .Is It Possible? Hi,I'm not really sure If I follow you but if you wan't to resize the image before saving it then this article below should help you:Resize image BEFORE saving to server Regards,Vinz"Code, Beer and Music" that's my way of being a programmer!How to get your Forum Question Answered | Blog | CodeASP.NET I have Image URL from other sever . For Ex: http://forums.asp.net/Themes/FAN/style/i/logo_mix.png I need to Find the Size of the above Image. Please Help Me     alagarm:I have Image URL from other sever . For Ex: http://forums.asp.net/Themes/FAN/style/i/logo_mix.png I need to Find the Size of the above Image. Please Help Me You need to upload the image first so that you can get the size of the actual image.. Regards,Vinz"Code, Beer and Music" that's my way of being a programmer!How to get your Forum Question Answered | Blog | CodeASP.NET alagarm: I m getting Image URL from Other Server. I have to get the size of Image URL with out saving .Is It Possible? Please Help Me. what did you mean by size? like 100px * 100px, or like 200kb?     if it is 100px * 100px, you can follow this way <img src='url' dis...

Web resources about - Problems with a thumbnail image to popup Full-size image (image paths from a database) - asp.net.client-side

Thumbnail - Wikipedia, the free encyclopedia
Thumbnails are reduced-size versions of pictures , used to help in recognizing and organizing them, serving the same role for images as a normal ...

Facebook News Feed Posts Move Thumbnails Around
We’re trying to figure out whether this is a test feature or a bug of some sort: Some news feed posts today display the poster’s thumbnail image ...

Facebook Tests Using Profile Picture Thumbnails in More Feeds Stories
Users are seeing more faces than ever in their feeds as Facebook complements more stories with multiple profile picture thumbnails. Friendship ...

Google Video Thumbnails - Flickr - Photo Sharing!
More at searchengineland.com/070615-133953.php

♪ THUMBNAILS OF BOOBS! ♪ by Matthew Patrick Davis - YouTube
"The YouTube is the new BoobTube and I don't mean TV." Boobs. Boobs. Boobs. Boobs. Oh, did I mention Boobs? Written by Matthew Patrick Davis ...

Thumbnails of the 3 Al-Jazeera journalists jailed by Egypt - CTV News
Three journalists for satellite broadcaster Al-Jazeera English were given heavy prison sentences on Monday. Here is a look at their biographies. ...

Chrome for Android 44 beta experimental New Tab page renders large icons instead of thumbnails
We learned back in March of an experimental feature the Chromium team was testing in its canary channel that replaces the thumbnails of your ...

Tweetbot for iPhone adds Avenir font option, thumbnail and filter toggles, more
... reading more about Apps , Twitter , and Tweetbot at 9to5Mac . What do you think? Discuss "Tweetbot for iPhone adds Avenir font option, thumbnail ...

Google Maps update v1.93: add businesses, Street View thumbnails and more
Have you noticed a new Google Maps update hit your device? It happens to come with some nifty new features. This upgrade takes the Search Giant's ...

Chromium Team Currently Developing Experimental New Tab Page That Renders Large Icons Instead Of Thumbnails ...
Chrome may be one of the most popular web browsers out there, but its new tab page still manages to look like an unfinished product much of time. ...

Resources last updated: 2/22/2016 3:22:35 PM