I'm dynamically loading my image urls from database.
Here is my current code for the repeater to load the images
<asp:Repeater ID="Repeater1" runat="server" Visible="True">
<ItemTemplate>
<a><asp:Image ID="Image1" runat="server" Width="1200" Height="300" ImageURL='<%#Eval("ThumbnailPath")%>' class="slide" /></a>
</ItemTemplate>
</asp:Repeater>
That is my .ASPX page where the image comes out but it only shows my images vertically stacked how do I make it into slideshow?
Here is my code To load the pictures to the repeater
GallerySTR = ConfigurationManager.ConnectionStrings["PPDB"].ConnectionString;
GalleryCN = new SqlConnection(GallerySTR);
string LoginQuery = "SELECT * FROM Albums";
GalleryCN.Open();
GalleryCMD = new SqlCommand(LoginQuery, GalleryCN);
GalleryDA = new SqlDataAdapter(GalleryCMD);
GalleryDS = new DataSet();
GalleryDA.Fill(GalleryDS);
Repeater1.DataSource = GalleryDS;
Repeater1.DataBind();
I can perfectly load the pictures but I can't seem to make it into slideshow. some javascript perhaps? or some technique or codes?
Go get this
jQuery Slideshow
This will go in your aspx designer
<div class="slideshow" data-transition="crossfade" data-loop="true" data-skip="false">
<ul class="carousel">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<li class="slide">
<img src='<%# DataBinder.Eval (Container.DataItem, "ImageUrl") %>' alt="" width="440" height="200" />
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
Bind your code to this repeater, and don't forget to include the script includes in the aspx page.
UPDATE
Add your required css files link in the head section of the html page. You will need to adapt to your project.
<link href="Content/Slideshow.css" rel="stylesheet">
And at the end of the body tag, you will add the js scripts
<script type="text/javascript" src="Scripts/Slideshow.js"></script>
Related
I have a page where i am displaying videos with their title above them. I am currently using a Repeater which renders out a div with the video title and a div with the video iframe html. Everything is coming from a database table where i store the video title and video iframe html.
<asp:Repeater ID="RptVideos" runat="server" OnItemDataBound="RptVideos_ItemDataBound">
<ItemTemplate>
<div class="TrainingVideosVideoContainer">
<div class="Title">
<asp:Label ID="LblVideoTitle" runat="server" />
</div>
<div class="Video">
<asp:Literal ID="LitYoutubeVideo" runat="server" />
</div>
</div>
</ItemTemplate>
My problem being this renders them out one below the other in a list format. I wish to render my videos out in almost a grid format, so two side by side etc. How is best to go about this? HTML Rendering? Repeater? GridVIew?
I found that #Crowcoder was correct in this suggestion to use a DataList control. With this i was able to specify the layout being in a table format with the RepeatColumns being set to 2
<asp:DataList ID="DltVideos" runat="server" OnItemDataBound="DltVideos_ItemDataBound"
RepeatColumns="2" RepeatLayout="Table" Width="100%">
<ItemTemplate>
<div class="TrainingVideosVideoContainer">
<div class="Title">
<asp:Label ID="LblVideoTitle" runat="server" />
</div>
<div class="Video">
<asp:Literal ID="LitYoutubeVideo" runat="server" />
</div>
</div>
</ItemTemplate>
</asp:DataList>
I want to make a slideshow with divs in repeater items. there are two divs with different classes and cannot show page properly with it. Could you help me please to fix the problem?
Design cs is like this:
<div id="wowslider-container1">
<asp:Repeater ID="rpSlideshow" runat="server" >
<ItemTemplate>
<div class="ws_images">
<ul>
<li id="<%# Container.ItemIndex + 1 %>">
<img src="Yazar/data1/images/<%#Eval("Resmi") %>" alt="<%#Eval("AdSoyad") %>" title="<%#Eval("AdSoyad") %>"
id="<%#Eval("SlideID") %>" />
</li>
</ul>
</div>
<div class="ws_bullets">
<div>
<a href="#" title="<%#Eval("SlideID") %>"><span>
<img src="Yazar/data1/tooltips/<%#Eval("Resmi") %>" alt="<%#Eval("AdSoyad") %>" /><%#Eval("SlideID") %></span></a>
</div>
</div>
<div class="ws_shadow">
</div>
</ItemTemplate>
</asp:Repeater>
</div>
PS: I tried to combine divisions like below but it did not work proper.
((HtmlGenericControl)(e.Item.FindControl("myDiv"))).
Attributes["class"] = "id" + indexi++;
You need runat="server" attribute, if you want to access it at code behind.
<div id="myDiv" runat="server">...</div>
TIP: For that purpose, we normally use Panel server control which basically renders html div tag. The advantage is you can use strongly type CssClass property.
<asp:Panel id="MyPanel" runat="server">...</asp:Panel>
Usage: ((Panel)e.Item.FindControl("MyPanel")).CssClass = "id" + indexi++;
Please note that I rename the control id to MyPanel.
I am using ASP.NET repeater and I want to display simply heading
like this:
<body>
<form id="form1" runat="server">
<h3>Example1</h3>
<asp:Repeater ID="rp1" runat="server" OnItemCommand="rp1_ItemCommand">
<ItemTemplate>
<h4>Repeater Data</h4>
</ItemTemplate>
</asp:Repeater>
</form>
</body>
But when I run my code its shows only heading and avoid inner heading. I know Its quiet simple to solve this but believe me I googling after an hours but not found any solution. Kindly help me.
ItemTemplate is shown only when Repeater has data.
What you want to use is HeaderTemplate instead, which is also visible when no data is present.
In your previous ItemTemplate include only the data you want to display per item.
<asp:Repeater ID="rp1" runat="server">
<HeaderTemplate>
<h4>Repeater Data</h4>
</HeaderTemplate>
<ItemTemplate>
...
</ItemTemplate>
</asp:Repeater>
Below is my label code under a repeater with image:
<asp:Repeater ID="innerRep" runat="server">
<ItemTemplate>
<li>
<img src=' <%#Eval("ImageName") %>' alt='<%#Eval("ImgUrl") %>' width="100" height="60" onclick = "ChangeImage(this)" style="cursor:pointer;" />
<br /> <asp:Label ID="Label1" runat="server" Text='<%#Bind("VideoName") %>' ></asp:Label>
</li>
</ItemTemplate>
</asp:Repeater>
When I click the particular image using image onclick, then the video will start playing in I frame, as well as I need video name should come below I frame in a label.
For that I used one label2 for displaying the video name below the video player.
Alter the img tag within repeater to:
<img src=' <%#Eval("ImageName") %>' alt='<%#Eval("ImgUrl") %>' width="100" height="60" onclick = "ChangeImage(this,'<%#Eval("VideoName")' )" style="cursor:pointer;" />
I assume that you keep a html span(id=spnPlayingVideoName) for brevity, below the iframe
then within javascript you can do something like:
<script language="javascript">
function ChangeImage(getID, playingVideoName)
{
//Set label value in JavaScript
//document.getElementById("spnPlayingVideoName").value=playingVideoName;
//Set label value in jQuery
$("#spnPlayingVideoName").text(playingVideoName);
var targetID = document.getElementById("centralImage");
targetID.src=getID.alt;
}
</script>
This code is not tested thoroughly, but provided for a quick idea.
Note: Make sure that adding extra parameter to "ChangeImage(...)" function does not break other code.
If it break some other code, you may write a separate function(Eg: UpdateVideoLabel(...)) and call that as well from "onclick" event of img tag.
$(function(){
$('img').click(function(){
//make a variable with the value of a label1 based on the selected img - in your given code you can achieve this by the example bellow or using $(this).next().next().text() - > <br /> is element as well.
var videoname = $(this).parent().find("label1").text();
$('label2').text(videoname);
});
});
Ok so for some reason my div prints out the way it should in Firefox and Chrome but then when I go to IE it doesnt work. It only prints out one page of the div then the header and footer. I have tried adding some new code to see if I can get it to work better but still having issues. The current code does print out fine but doesnt inherit the divs styling that they had on the page and not in an external style sheet. The commented out code below is what they had there before. Does anyone have any help?
function buildPrint() {
var sourceDiv = document.getElementById("display_div");
var WindowObject = window.open('', 'print_div', 'width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes');
WindowObject.document.writeln(sourceDiv.innerHTML);
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();
WindowObject.close();
//document.getElementById("print_div").innerHTML = sourceDiv.innerHTML;
//window.print();
}
<asp:Content ID="Content3" ContentPlaceHolderID="BodyPlaceHolder" runat="server">
<div id="display_div">
<asp:CheckBox ID="showAllOptionals" runat="server" Text="Show All Optionals" AutoPostBack="true" />
<asp:Literal ID="mainTable" runat="server" />
</div>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PrintContent" runat="server">
<div id="print_div" style="page-break-after:avoid;">
</div>
</input><input onclick=\"buildPrint();\" id=\"printBtn\" type=\"button\" value=\"Print\">
I got the solution, I had to add different CSS to it so the div overflowed and printed. Thanks for all the help