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.
Related
I am using Itemtemplate and headertemplate inside datalist. But in case of headertemplate it is not sending query string value to other page
following is the code of datalist for brandwise.aspx
<asp:DataList ID="DataList2" runat="server" DataSourceID="SqlDataSource2" >
<HeaderTemplate>
<a href='pc1.aspx?<%# Eval("categoryId","cid={0}") %>' style="text-decoration:none">
ALL BRANDS
</a>
</HeaderTemplate>
<ItemTemplate>
<ul>
<li>
<a href='brandwise.aspx?<%# Eval("categoryId","cid={0}") %>&<%# Eval("brandId","bid={0}") %>' style="text-decoration:none">
<%# Eval("brandName", "{0}") %>
</a>
</li>
</ul>
</ItemTemplate>
</asp:DataList>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:DBCS %>" SelectCommand="select distinct b.brandName,p.categoryId,b.brandId from Brand1 b, Category c, Product1 p where b.brandId = p.brandId and p.categoryId = c.categoryId and p.categoryId = #cid;">
<SelectParameters>
<asp:QueryStringParameter DefaultValue="" Name="cid" QueryStringField="cid" />
</SelectParameters>
</asp:SqlDataSource>
The problem is in following header template
<HeaderTemplate>
<a href='pc1.aspx?<%# Eval("categoryId","cid={0}") %>' style="text-decoration:none">
ALL BRANDS
</a>
</HeaderTemplate>
because when it redirect to pc1.aspx in the browser window it displays
http://localhost:3492/pc1.aspx?
Which means it does not take into account query string value and categoryId is the name of the column.
I am basically making an e-commerce website for my project. In this code I am trying to display the brands for a given category as in amazon. For e.g the category maybe "mobile" and brands may be samsung,apple,nokia. So if user clicks on a particular brand it displays mobiles for that brand onlys. AND i also need to include one "ALLBRANDS" option clicking on which displays all the brands. Is there any why i can do so???
Plz dont try to run it. It wont.
HeaderTemplate is common for all elements and is rendered only once for DataList control, it's not tight to data source so I'm afraid your code doesn't make sense.
If you need content of HeaderTemplate be item data related, then you need to put it on ItemTemplate
I've a repeater ASP.NET control that contain an image slider that display 3 images every 10 sec by random from DB.I used a UpdatePanel ASP.NET control to reload this repeater .every things is OK, but I've a problem, when passed 10 seconds page is refresh! and i don't want to refresh page.How to fix this problem?
this is ASP.NET code:
<div id="middleSliderArea">
<div class="pikachoose">
<ul id="pikame">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<li>
<asp:UpdatePanel runat="server" ID="UpdatePanel1">
<ContentTemplate>
<asp:Timer runat="server" ID="Timer1" Interval="10000" OnTick="Timer1_Tick"></asp:Timer>
<a href='<%#"MoreInfo.aspx?id="+Eval("ID") %>'>
<img runat="server" src='<%#Eval("Image") %>' /></a><span><%#Eval("Brief") %></span>
</ContentTemplate>
</asp:UpdatePanel>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
</div>
and you can see this effect here after 10 seconds.
You need to get all images ID's from DB to client Side (you use JSON object) at the beginning , after page load.
Then use "setInterval javascript method" and call another Javascript Method (for examle changeImage() ).
In changeImage() method you select img elements in the repeater than you can change the values and images. I know the explanation is not enought for you right now , if you need more I can help you ..
i am looking for a way that:
If the Gridview contains a result, don't show the result but instead an clickable image that will direct me to a new page with the result(this i guess in the properties of the image).
And if the gridview is empty, then display another image.
I know how to do it if the gridview is empty i use
But i would like to know how to show an image if gridview is not empty.
Any ideas?
Thanks
<a href='<%# String.Format("{0}{1}{2}{3}{4}{5}{6} {7}8}",Eval("CourseName"),"/","Colleges","/",Eval("StateName").ToString().Replace(" ", "-"),"/",Eval("CityName").ToString().Replace(" ", "-"),"/",Eval("CollegeName").ToString().Replace("-", "=").Replace(" ", "-").Replace("..","--")) %>' rel="canonical" title='<%# Eval("CollegeName")%>'>
<img Height="50px" ImageUrl='<%# String.Format("{0}{1}","\\images\\CollegeImages\\" , string.IsNullOrEmpty(Eval("CollegeImage").ToString()) ?"noImageCollege.jpg":Eval("CollegeImage")) %>' Width="50px" alt='<%# Eval("CollegeName") %>' title='<%# Eval("CollegeName") %>' />
</a>
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.
I want to create an ASP:ImageMap with a dynamic number of hot spots. I tried the code below, but it complains about having a repeater nested inside an image map. Any ideas on how to do this?
<asp:ImageMap ID="imgMap" runat="server" ImageUrl="~/circles.png"
HotSpotMode="PostBack">
<asp:Repeater runat="server" id="repeat" DataSource=<%#circles %>>
<asp:CircleHotSpot PostBackValue="<%#name %>"
Radius="<%#r %>"
X="<%#x %>"
Y="<%#y %>" />
</asp:Repeater>
</asp:ImageMap>
(Please ignore problems with databinding. I'll solve those later.)
You can't place a repeater inside another server tag. The way to dynamically add hotspots to an ImageMap is to dynamically add them in the code behind. You should be able to use something similar to this in your page load event:
CircleHotSpot hotSpot = new CircleHotSpot();
hotSpot.PostBackValue = "xxxx";
hotSpot.X = xx;
hotSpot.Y = yy;
hotSpot.radius = r;
imgMap.HotSpots.Add(hotSpot);
Please forgive the fact that the exact syntax is probably a little off as I haven't written this code in a while, but you should get the idea. If you would like to add multiple hotspots you can stick this block of code in a for/foreach loop and iterate over your list of items that you want to turn into hotspots.
Do you need to use a server control or could you do do it in regular HTML?
somthing like this:
<map id="map1">
<asp:Repeater ID="rep" runat="server">
<ItemTemplate>
<div align=center>
<area href="<%# DataBinder.Eval(Container.DataItem,"page")%>"
shape="circle"
coords="<%# DataBinder.Eval(Container.DataItem,"Coords")%>"
alt="area1" />
</ItemTemplate>
</asp:Repeater>
</map>
<img src="Images/HPIM1784.jpg" alt="bajs" usemap="#map1" />