I have some bulk images inside DIV tag and If I click an image inside this DIV tag I need to display that Image in Image control.
Here is my response where I am displaying all the bulk images:
<script>
$('#showfilelist').append("<div id=" + file.id + " class='thumb'><a href='uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "' target='_blank' rel='gallery'><img src='uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "' width='50' height='50'/></a></div>");
</script>
Now If I click an image inside the above DIV the selected image should be displayed inside this Image control
<asp:Image ID="Image1" runat="server" BackColor="#0099CC" BorderStyle="None"
Height="624px" Width="500px" />
I guess you're creating a kind of Gallery application, or something like that, and AMAIK from your post, you want to show the large image, on click on its thumbnail.
Then my suggestion is to set the src attribute of the Image control at client-side, so that browser sends an HTTP GET request to get the image.
So, I recommend that you follow these steps:
For each thumbnail, add a custom attribute like data-large-image-url and set its value to the link to the large image of the thumbnail.
See what is the rendered result of ASP.NET's Image control and find it using jQuery (you can use ClientIDMode='Static' to be more productive)
On click of each thumbnail, simply set the src attribute of the value of large image to the data-large-image-url attribute.
$('#thumbnails').click(function(){
$('#large-image').attr('src', $(this).attr('data-large-image-url'));
});
If you are truly creating a gallery, don't reinvent the wheel and use a tried and true plug-in. I recommend Lightbox2.
Related
I have a plugin that let you add text over an image. If you add the URL of the image into a field it loads the image on the left side and let you add some text over it..
what i really want is to display an image gallery so when i click over an image it will copy the source to into a field and loads the image automatically..
I'm getting the image source into input field when i click over the image with the script below but its not loading the image on the left side...
This is the plugin www.chistesdominicanos.com/editordememe ... if you click the image of the guy with the bottle at the bottom of the page it will copy the image source into the URL field but its not loading the image on the left... If you do it manually Copy/Paste the URL its going to work.. can you please tell me what im doing wrong?
<script type="text/javascript">
function clicked(address) {
document.getElementById('meme-image-url-0').value = address.src;
document.getElementById('meme-top-text-0').focus();
}
<form>
<label for="copy_img">Image</label>
<input type="text" name="meme-image-url-0" id="meme-image-url-0" />
</form>
<li><img src="http://www.iltlaugh.com/wp-content/uploads/2012/10/437273.jpg" onclick="clicked(this)"/></li>
</ul>
I show image thumbnails on page, Now I want when i click on image thumbnail the big images related to that thumbnail open in IamgeDispData.aspx page where i created a data entry form in that page to enter data related to that picture. How can I do this? With help of query string or else??
Query String is a good option.
What you can do put your image inside a asp:hyperlink
Set the URL of asp:hyper link with querysting
And in your detail page get it from url
Note that you can only pass the filepath in the url
And you will have to show it from the physical location
With help of query string ??
Yes, you can use it. Just surround your image with <a> anchor tag or use asp:hyperlink server side tag.
It can be something like
Content/Thumbnails/page.aspx?imageName="your image name"
e.g.
<a href="http://www.espn.com" target="_blank">
<img src="ahman.gif" />
</a>
Ref:
html - image links
Hyperlink image
How to control the image size of a Hyperlink?
example code snippet:
<asp:HyperLink runat="server" ID="hlThumbnail" NavigateUrl='<%# Eval("Url") %>'
Target="_blank" Style="height: 66px;">
<asp:Image runat="server" ID="imgThumbnail" Height="66px"
ImageUrl='<%# Eval("Thumbnail") %>' />
</asp:HyperLink>
In case you have no issue in showing Id to user , it will be the best solution. In case you have some issue in showing Id , you can encrypt it and then use it as Id. You can also validate then user again in the ImageDispData.aspx if he has the permission to enter the data or not for the image.
I am giving way to use using querystring and javascript.
You can use window.open function of JavaScript to open in new window or tab. When you are generating the thumbnail image , create them with url like : yourBigimage.aspx?photoId=10 , open this url using jquery onclick event of image and use window.open
Is it possible to place a button on top of an Image control in a custom control ?
You can take Image button
like this
<asp:ImageButton runat="server" ID="imgButton" ImageUrl="~/images/asc.gif" />
set your image url , this image button work same as normal asp button,
You can also get server side Click event of this button.
In sql server database, I have column name Image which has urls like http://www.xyz.com/1009/image1.jpg
Now I want to display it on my datalist. But it is not showing any image. It is might be the case because it is expecting the Image URL to be ~/Folder/abc.jpg
Then how to show the image on the asp.net page when I have image URL, which control I need to use and how?
Do you see little red X instead of an image?
If so, right click it --> Properties (IE) to see the URL it's referring to.
Might give us hint on what's going on. :)
If you are getting the image from the database in for the form xzy.com/1009/image1.jpg but want to add the http:// then your code should be
<asp:Image ID="imgmain" runat="server" ImageUrl='<%#String.Format("http://{0}", Eval("Image"))%>' Width="80" Height="80" />
I am working on a ASP.NET app and i have a need to post back to the server after a file is chosen in a FileUpload control without having to have the user explicitly click a 'submit' button. Is this possible? and if so, how?
I'm assuming you want to make the upload start right away. If so, you should react to the change event in JavaScript, and simply make it submit the form.
<!-- HTML code --->
<input
type="file"
onchange="if (confirm('Upload ' + this.value + '?')) this.form.submit();"
>
Asking the users for confirmation is recommendable, so they stay in control of the process and can cancel if they chose the wrong file by accident.
The first answer had the right javascript, but ASP.NET does not necessarily expose the input control directly, so it is better to put the onchange event on the FileUpload control.
<asp:FileUpload ID="myFileUpload" onchange="if (confirm('Upload ' + this.value + '?')) this.form.submit();" runat="server" />
Another route to go is to provide rich uploading via flash/silverlight/ajax. A great component for this can be found at Ajax Uploader for about $100