Ok I have been working on this gallery for some time and I keep getting little tidbits. It is now time to finish it off. I have a datalist which binds to an array of *.aspx image urls that contain a thumbnail id that is sent through the url. I now need to implement an onclick event, that when a user clicks on a photo, it brings them to the actual picture.
example url:
(thumbnail) = ~/UserPages/Photo/GetThumbnail.aspx?id=7
(actualpic) = ~/UserPages/Photo/GetPhoto.aspx?id=7
What I need: How do i get it so that each photo has an onclick event? I tried adding onclick to the imag src but it didn't work. It is difficult because it is not an actual image control, they exist inside a datalist. I also need to know how to extract the thumbnail url when getting clicked so that I can grab the id and redirect to the actual picture. Help please!
<asp:DataList ID="dlImages" runat="server"
RepeatColumns="5"
RepeatDirection="Horizontal"
RepeatLayout="Flow">
<ItemTemplate>
<img src="<%# ResolveUrl((string)Container.DataItem) %>" />
</ItemTemplate>
</asp:DataList>
Code Behind:
dlImages.DataSource = ImageUrls;
dlImages.DataBind();
Can you wrap it in an a tag?
<ItemTemplate>
<img src="<%# ResolveUrl(String.Format("~/UserPages/Photo/GetThumbnail.aspx?id={0}", Container.DataItem)) %>" />
</ItemTemplate>
This assumes your DataItem contains only the ID.
Try:
<ItemTemplate>
<img src="<%# ResolveUrl((string)Container.DataItem) %>" onclick="doSomething(this)" />
</ItemTemplate>
After that you can simply implement a doSomething function that parses the id out of "this.src" and do whatever you want with it.
Related
I want fetch some images from database and show that images through Image slider.
For that purpose I want to use repeater control.
Please can you say what is the easy way to make use of repeater for Image slider.
Here is a way tom implement the repeater for your slider :
<!--Your repeater with the <img /> tags for your slider (can be <li><img /></li> or other pattern)-->
<asp:Repeater ID="RptImages" runat="server" DataSourceID="SqlDataSourceMention">
<ItemTemplate>
<img src='<%# Eval("ImgPath") %>' alt="image-slider" />
</ItemTemplate>
</asp:Repeater>
<!--Your data source using stored procedure for this sample-->
<!--The "ConnectionString" attribute is set in your web.config file-->
<asp:SqlDataSource ID="SqlDataSourceImages" runat="server" ConnectionString="<%$ ConnectionStrings:YourconnectionString %>"
SelectCommand="YourStoredProcedureName" SelectCommandType="StoredProcedure"></asp:SqlDataSource>
This will output a list of tags with the src attribute bound on the "ImgPath" column of your stored procedure result.
I am binding images to datalist. Taking the image name from database and giving the path.
My code is:
<asp:DataList ID="dlImages" runat="server" RepeatColumns="4">
<ItemTemplate>
<asp:ImageButton ID="ImageButton1" Height="200px" Width="200px" ImageUrl='<%# Eval("PageName","D:\Sagar\Kinston\WebSite\ScreenMasterImages\{0}.jpg") %>' runat="server" />
</ItemTemplate>
</asp:DataList>
On .cs page:
ds = gc.GetDataToListBinder("select DISTINCT PageOrderID,PageName from ScreenMaster order by PageOrderID")
dlImages.DataSource = ds.Tables(0)
dlImages.DataBind()
I am facing 2 problems :
When imagename has space in between it adds %20 in between
Eg. if imagename is "API Message", it takes it as: "API%20Message"
I tried On this Problem:
Added ImageUrl='<%#Server.HtmlDecode(Eval("PageName","D:\Sagar\Kinston\WebSite\ScreenMasterImages\{0}.jpg"))'
But I got error:
XML literals and XML properties are not supported in embedded code within ASP.NET
If there is not space Eg.image name is "Charges" , Then also its not showing it in datalist.
When i ran project, and right clicked on it and view source, then its showing me correct path as:
src="D:\Sagar\Kinston\WebSite\ScreenMasterImages\Charges.jpg"
but not showing image.
Please help me with above code.
Where i have made mistake?
What else i should add in it?
Keep it easy and simple.
When trying things like that with URL, to know exactly what to write down, try typing it in your address bar so you'll be able to find the exact syntax needed in order to make it work correctly.
I've done this tons of time and work for me... So you could try something like :
<asp:DataList ID="dlImages" runat="server" RepeatColumns="4">
<ItemTemplate>
<asp:ImageButton ID="ImageButton1" Height="200px" Width="200px"
ImageUrl='<%# String.Format("{0}{1}.jpg", "~\ScreenMasterImages\", Server.HtmlDecode(Eval("PageName"))) %>'
runat="server" />
</ItemTemplate>
</asp:DataList>
In Web application, i am using datalist control to bind the Embed videos to a <div> dynamically. They are coming good, but when we click on video in the datalist they are start to play. I dont want that, I would like to play the particular video in a popup, and make a non action on that video [div which contain embeded video]. I want to make that div enable false.
<asp:DataList ID="DtlstVideos" ToolTip="Click On Video Title" CellPadding="5" CellSpacing="5" runat="server" RepeatColumns="5" RepeatDirection="Horizontal" OnItemCommandXSSCleaned="DtlstVideos_ItemCommand">
<ItemStyle />
<ItemTemplate>
<div id="divVideos" runat="server"><%# Eval("photos") %></div>
<asp:LinkButton ID="lnkVide" CommandName="Click" runat="server" Text='<%# Eval("videotitle") %>' ToolTip="Play" CommandArgument='<%# Eval("id") %>' Font-Bold="true" ForeColor="Blue"></asp:LinkButton>
</ItemTemplate>
</asp:DataList>
This is the current code, when a user clicks on the LinkButton a popup will fire and the video will play, but when click on div the video is playing in datalist only, is there any solution?
Id am not sure if I did understand you correct but I hope this might help.
If you are using youtub, you'll be able to access a preview picture of the movi in different-sizes.
The image is accessble via a certain convention like this:
http://img.youtube.com/vi/VIDEO_ID/#.jpg
Find details here: http://www.reelseo.com/youtube-thumbnail-image/
So what I would do is display only the image in the datalist (maybe with some div overlay which looks like a player)... and then on click pass the movi ID to your popup and then embed and play the movie in that popup...div or new window whatever you want..
HTH
Well, I would not use that <div> as you are using rather I would make use of the ImageButton that will act as the video image as when clicking you can fire your command and hooking up a javascript event on it you can fire up the popup when you want.
Let's imagine that you can use jQuery with this:
<asp:DataList ID="DtlstVideos" ToolTip="Click On Video Title" CellPadding="5" CellSpacing="5" runat="server" RepeatColumns="5" RepeatDirection="Horizontal" OnItemCommandXSSCleaned="DtlstVideos_ItemCommand">
<ItemTemplate>
<asp:ImageButton id="divVideos" CssClass="img-video" runat="server" CommandArgument="<%# Eval("id") %>" data-video-id="<%# Eval("id") %>" CommandName="Click" ImageUrl="<%# Eval("photos") %>" />
<%# Eval("videotitle") %>
</ItemTemplate>
</asp:DataList>
and with jQuery you can simply hook up the click event to fire up your pop up and your command
$(function() {
$(".img-video").on("click", function() {
var url = 'playVideo.aspx?id=' + $(this).attr("data-video-id");
window.open(url, "Video Player","menubar=0,resizable=0,width=650,height=450");
return true; // let the image button fire the command argument
});
});
But I would never let it fire the Command event here and I would hook up always in the playVideo.aspx page as there you do have the video id as well and you can do what you need in that page without needing to fire the command event on the video strip.
I have a gridview and a column of that gridview is displaying images whose path is stored in a database & image is stored in locale folder inside my website. My problem is that I want to use the hyperlink control with the image, so that when the image is clicked it should jump to another page. How can I do that?
Firstly, you should bind data to your grid (in the code-behind):
public override void DataBind()
{
// you implementation of getting data
yourGridId.DataSource = GetData();
yourGridId.DataBind();
}
Then I'd suggest to use template field for your image:
<asp:gridview id="yourGridId"
runat="server">
<columns>
<asp:templatefield headertext="An Image">
<itemtemplate>
<a href="pageWhereToGo.aspx">
<img src='<%# ResolveUrl((string)Eval("ImageUrl"))%>' />
</a>
</itemtemplate>
</asp:templatefield>
</columns>
</asp:gridview>
The code above is assuming that the paths to images in your database are stored as a relative paths from your application (e.g. ~/assets/images/image1.jpg) or as full paths (e.g. http://www.contoso.com/assets/images/image1.jpg). Also assuming that your data source holds a path to image in ImageUrl field.
So the example above is a simplest grid with one asp:templatefield column: here is a clickable image which goes to the pageWhereToGo.aspx page on click event.
More about Gridview Column Fields could be found here.
Instead of using DataBound fields you can also use TemplateFiled within a GridView:
<asp:TemplateField HeaderText="SomeText" >
<ItemTemplate>
// Put any kind of .NET Code in here
// you can access the data bound values like this:
<%# Eval("NameOfPropertyOnDataBoundObject")%>
</ItemTemplate>
<ItemStyle CssClass="tworows"></ItemStyle>
</asp:TemplateField>
The code below works perfect for binding actual urls grabbed from the net. My issue is that it does not work for *.aspx urls that generate an image. If I go to the *.aspx page "~/UserPages/Photo/GetThumbnail.aspx?id=7", an image shows up just fine. However it does not work for the datalist. Any ideas why and how I can solve this issue. Thank you! The string array 'imageurls' consists of many *.aspx image urls.
<asp:DataList ID="dlImages" runat="server"
RepeatColumns="5"
RepeatDirection="Horizontal"
RepeatLayout="Flow">
<ItemTemplate>
<img src="<%# (string)Container.DataItem %>" />
</ItemTemplate>
</asp:DataList>
Code behind
protected void BindImages(string[] imageurls)
{
dlImages.DataSource = imageurls;
dlImages.DataBind();
}
Try
<%# ResolveUrl((string)Container.DataItem) %>