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

Have an idea of how I can do this?

 

 

<div id="imgholder" style="position:absolute;right:0px;top:0px;display:none;

 background-color: #000000;"

title="Click to close">

<img name="pic" id="pic" src="images/blank.gif" alt="" style="position:relative" />

</div>

    <asp:FormView ID="FormView4" runat="server" DataSourceID="AccessDataSource1">

  <ItemTemplate>

<img id="ThumbnailPath"  src='<%# Bind("ThumbnailPath") %>'

    runat="server"  alt=""  onclick="newWin(0)" />

     </ItemTemplate>

       </asp:FormView>

<script type="text/javascript">

<!--

// Jeff

// www.huntingground.freeserve.co.uk

 

myImages=new Array() // large images

myImages[0]="images/Pages/FullSize1.gif"      <- instead load the path to that image from my DB 

 

 

preloadImages=new Array()

for(var i=0;i<myImages.length;i++){

preloadImages[i]=new Image()

preloadImages[i].src=myImages[i]

}

</script>

0
DannyDep
1/19/2007 7:55:15 PM
asp.net.getting-started 91979 articles. 4 followers. Follow

10 Replies
1104 Views

Similar Articles

[PageSpeed] 46

Hey,

I would do the same thing that you are doing to figure out what the thumbnail image is:

<ItemTemplate>
   <img id="ThumbnailPath"  src='<%# Bind("ThumbnailPath") %>' 
    runat="server"  alt=""  onclick="showFullImage('<%# Eval("FullImagePath")%>')" />
</ItemTemplate>

and use it with a similar javascript function:

<script>
    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>
 

 


Robert Kafarski,

Aure Entuluva!
- Day shall come again!
0
fafar
1/19/2007 10:08:32 PM

Thanks for your reply Robert.

When I tried your code I get the following runtime error:

A call to Bind must be assigned to a property of a control inside a template.      

 

<ItemTemplate>
<img id="ThumbnailPath"  src='<%# Bind("ThumbnailPath") %>' 
    runat="server"  alt=""  onclick="showFullImage('<%# Eval("FullImagePath")%>')" />
</ItemTemplate>

 

 
0
DannyDep
1/22/2007 3:45:29 PM

Bump.

Anyone have any ideas on this one?

thx, 

0
DannyDep
1/23/2007 4:28:40 AM

Hi,

Just use <%# Eval("") %>  instead of <%# Bind("") %>

Thanks

Pronov 

0
pronov
1/23/2007 6:21:52 AM

Hi Pronov,

Tried it but am getting the following parser error:  (Also tried this format and got same results.  

src='<%= Eval("PubThumbnailPath") %>'

Description: An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately.

Parser Error Message: The server tag is not well formed.

Source Error:

 
Line 61:     <asp:FormView ID="FormView4" runat="server" DataSourceID="AccessDataSource1">
Line 62:   <ItemTemplate>
Line 63: <img id="ThumbnailPath"  src='<%# Eval("ThumbnailPath") %>' 
Line 64:     runat="server"  alt=""  onclick="showFullImage('<%# Eval("FullImagePath")%>')" /> 
Line 65:      </ItemTemplate>

0
DannyDep
1/24/2007 12:53:03 AM

Correction...

(Also tried this format and got same results.  

src='<%= Eval("ThumbnailPath") %>'

Is there anyway I can Click on an Image on a webpage and get the full size Image to appear in a popup given that I have both the paths to the thumbnail and fullsize images in my DB?

HELP!

0
DannyDep
1/24/2007 6:15:02 PM

Here is an interesting tidbit.

If I remove the onclick parm from the <img control,  the Bind error goes away.  And when I load the page, it does find the path to the thumbnail and renders the page and image correctly.

But obviously,  I want to be able to now click on the image and popup a full size image.  

Does any of this make sense?

0
DannyDep
1/24/2007 6:43:09 PM

Hi Danny,
I think this would sure work for you

<ItemTemplate>
       <a href="JavaScript: showFullImage('<%# Eval("FullImagePath")%>')" style="text-decoration=none;" >
                 <img id="ThumbnailPath"  src='<%# Eval("ThumbnailPath") %>'
runat="server"  alt="" border="0"/>
   </a>
</ItemTemplate>

0
pronov
1/25/2007 5:11:21 AM

I believe the server tag is not well formed is referring to the onclick attribute rather than the src attribute.  The unformed tag is actually referring to this, even though it is pointing to the line with the src tag because it just points to the start of the tag with the problem.  I think you are looking for (I always get mixed up with the quotes because I actually don't use ASP.NET nearly as much as I post here):

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


Picky
0
pickyh3d
1/25/2007 6:07:23 AM

Thanks for the reply.

I have actually continued this topic in the appropriate forum  (Client Side Web Development ) under

http://forums.asp.net/thread/1547070.aspx

0
DannyDep
1/25/2007 7:58:54 PM
Reply:

Similar Artilces:

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?  ...

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...

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 ...

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...

How to get large image when clicked on Thumbnail image
Hi, I am working on Repeater control which has image button within it. I want to fire image button click event to display the image in a large view. Can anyone help me   Best Regards, Rajesh Hi,check thishttp://www.codeproject.com/aspnet/NetPix.asphttp://www.codeproject.com/aspnet/CatalogViewPhotoGallery.asphttp://www.codeproject.com/aspnet/thumbnailer.asphttp://www.codeproject.com/useritems/ThumbViewerControl.asp Mehedi HasanMark as answer if the post meets your requirement! Hi Rajest, what about this idea <asp:HyperLink ID="ImageButton1" NavigateUrl='<%# Da...

Web resources about - Thumbnail image to popup Fullsize image (image paths from a database) - asp.net.getting-started

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 Adds Names To Friend Thumbnails In Timeline For Profiles
Facebook made a change to the friends box on timeline for profiles , adding users’ friends’ names to the eight thumbnail images that appear in ...

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. ...

YouTube now uses deep neural networks to pick better video thumbnails
... the site processes each frame individually and passes them through an algorithm to try and find a few of the best to be your video's thumbnail. ...

Gmail for iOS app updated with bigger image thumbnails, better integration with Google Drive & Google+ ...
Google has updated its Gmail for iOS app to version 2.4, offering larger image thumbnails, better photo-handling and better integration with ...

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 ...

Maps v9.13 Rolls Out With Street View Thumbnails And A Shortcut To Add Businesses, Likely To Integrate ...
If you felt like Google clubbed you over the head with tons of announcements and releases last week, you're not alone. Between giving out the ...

Resources last updated: 12/1/2015 5:05:45 AM