Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
I am integrating this photoalbum into my asp.net website. I am able to fetch the photos into the album from database(urls) but now the problem i am facing is that there is just one album at the moment. I want to generate multiple albums depending upon the number of albums in the database.
 
<pre lang="xml"><asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
 
    <link rel="stylesheet" href="css/reset.css" media="screen">
<link rel="stylesheet" href="css/style.css" media="screen">
<style type="text/css">
ul#pics li {/*css style for the single photo only **/
    background: none repeat scroll 0 0 #FFFFFF;
    box-shadow: 1px 1px 1px #999999;
    display: inline-block;
    width: 153px;
    height:157px;
 -webkit-transition: all .2s ease-in-out;
 -moz-transition: all .2s ease-in-out;
 -o-transition: all .2s ease-in-out;
 -ms-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
}
ul#pics li img {/*css style for the single photo only **/
    width: 150px;
    height:150px;
    display: block;
}
ul#pics li:hover {/*css style for the single photo only **/
    -moz-transform: scale(1.1) rotate(0deg);
    -webkit-transform: scale(1.1) rotate(0deg);
    -o-transform: scale(1.1) rotate(0deg);
    -ms-transform: scale(1.1) rotate(0deg);
    transform: scale(1.1) rotate(0deg);
}
.single_photo {/*css style for the single photo only **/
    margin-top : 80px;
    margin-left:100px;
 
    margin-top:65px;
}
h3 {
    margin:25px;
}
a, a:visited, a:hover {
    color: #54A6DE;
    outline: medium none;
    text-decoration: none;
}
#footer { /* demo footer text */
    font-size:9px;
    margin-top:300px;
    margin-left: 250px;
    color: #888888;
}
#text {
    margin-top:10px;
    margin-left:10px;
    color: #DD4B39;
    font-type: arial, sans-serif;
    font-size:17px;
}
</style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" ></script>
    <script src="Scripts/jquery.min.js" type="text/javascript" ></script>
 
<script src="Scripts/app.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="btnsave" runat="server" Text="Upload" onclick="btnsave_Click" />
</div>
&nbsp; AlbumName
    <asp:TextBox ID="txtAlbumName" runat="server"></asp:TextBox>
<div>
 

 
    <br />
    <div id="page_wrap" runat="server">
        <div id="text">
            Google Plus Album Photo</div>
 

 <div class="image_stack" style="margin-left:300px" runat="server" >
 

 <img  id="photo1" class="stackphotos"  runat="server" clientidmode="static" >
    <img  id="photo2" class="stackphotos"  runat="server" clientidmode="static">
     <img   id="photo3" class="stackphotos"  runat="server" clientidmode="static" >
 
     </div>
 

 
    </div>
 

 
</asp:Content>
 

public DataTable dt = new DataTable();
dboperation dbo = new dboperation();
 
protected void Page_Load(object sender, EventArgs e)
{
 
string q = "select photourl ,AlbumName from PhotoAlbum where UserId=42";
dt = dbo.Getdt(q);
string a = dt.Rows[0]["photourl"].ToString();
string b = dt.Rows[1]["photourl"].ToString();
string c = dt.Rows[2]["photourl"].ToString();
 
photo1.Src = a.Substring(1, a.Length - 1);
photo2.Src = b.Substring(1, b.Length - 1);
photo3.Src = c.Substring(1, c.Length - 1);
 
q = " select PhotoAlbum.AlbumId,PhotoAlbum.AlbumName from PhotoAlbum where UserId=42";

dt = dbo.Getdt(q);
drpalbum.DataSource = dt;
drpalbum.DataTextField = "albumname";
drpalbum.DataValueField = "albumid";
drpalbum.DataBind();
}
 

protected void btnsave_Click(object sender, EventArgs e)
{
string imgName = txtAlbumName.Text.ToString();
SqlConnection con = new SqlConnection(@"Data Source=INFOKONN_SUMIT; Initial Catalog=SLIITComDB; Integrated Security = true;");
 
con.Open();
SqlCommand command = new SqlCommand("select Max(albumid)+1 as PhotoID from PhotoAlbum", con);
SqlDataReader dr = command.ExecuteReader();
dr.Read();
//string albumid = dr["albumid"].ToString();
 

 
//random alphanumeric number
Guid g = Guid.NewGuid();
string random = g.ToString();
string ran= (random.Substring(0, 8));
 

 
string filename = ran + System.IO.Path.GetExtension(FileUpload1.FileName);
string location = "/Images/" + filename;
FileUpload1.SaveAs(Server.MapPath(".") + location);
dr.Close();
 
command = new SqlCommand("INSERT INTO PhotoAlbum (Albumname,photourl,userid,Date) VALUES ( @Albumname, @photourl,@userid,@Date)", con);
SqlParameter param0 = new SqlParameter("@Albumname", SqlDbType.VarChar, 50);
param0.Value = imgName;
command.Parameters.Add(param0);
 
SqlParameter param1 = new SqlParameter("@photourl", SqlDbType.VarChar);
param1.Value = location;
command.Parameters.Add(param1);
 

SqlParameter param2 = new SqlParameter("@userid", SqlDbType.Int);
param2.Value = Session["userid"].ToString(); ;
command.Parameters.Add(param2);
 
SqlParameter param3 = new SqlParameter("@Date", SqlDbType.DateTime);
param3.Value = DateTime.Now;
command.Parameters.Add(param3);
 
int numRowsAffected = command.ExecuteNonQuery();
 
con.Close();
}
 
protected void Button1_Click(object sender, EventArgs e)
{
int albumnid = Convert.ToInt32( drpalbum.SelectedValue);
string imgName = txtAlbumName.Text.ToString();

//random alphanumeric number
Guid g = Guid.NewGuid();
string random = g.ToString();
string ran= (random.Substring(0, 8));
 
string filename = ran + System.IO.Path.GetExtension(FileUpload1.FileName);
string location = "/Images/" + filename;
FileUpload1.SaveAs(Server.MapPath(".") + location);
string q = "insert into photos (Name,imageurl,albumid,date) values('blah','"+location+"','"+albumnid+"','"+DateTime.Now+"')";
dbo.insert(q);
}
Posted 28-Mar-13 21:55pm
Edited 29-Mar-13 0:45am
v3
Comments
Bryian Tan at 29-Mar-13 10:34am
   
Take a look at this SlideShow http://www.codeproject.com/Articles/43680/ASP-NET-Slideshow-Control-with-jQuery-and-XML . I wouldn't say that your solution but at least you might get some idea from there.

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

use loop method.
 
<% for(int i = 0; i < dt.Rows.Count; i++)
{
string a = dt.Rows[i]["photourl"].ToString(); %>
<img id="<%Response.Write(i+1);%>" class="stackphotos" src="<%Response.Write(a.Substring(1, a.Length - 1));%>" />;
<% } %>
  Permalink  
v3
Comments
arbaaz jalil at 29-Mar-13 5:41am
   
I guess i need to generate the div itself dynamically.
<div class="image_stack" style="margin-left:300px" runat="server" >
 

<img id="photo1" class="stackphotos" runat="server" clientidmode="static" >
<img id="photo2" class="stackphotos" runat="server" clientidmode="static">
<img id="photo3" class="stackphotos" runat="server" clientidmode="static" >
 

 


 

</div>
Subhabrata Bose at 29-Mar-13 12:15pm
   
yap, the same thing... i have provided you the code and you are telling me the logic...
arbaaz jalil at 29-Mar-13 15:33pm
   
the thing is i want the css, jquery etc to work on each of the dynamically generated div. Even if generate the div and its three img tags how am i supposed to make css etc work?
here is a link to the photo album i am trying to integrate.
http://youhack.me/2011/07/15/google-plus-photo-stack-animation-using-jquery-and-css3/

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 240
1 Kamal Rocks 184
2 BillWoodruff 173
3 Sergey Alexandrovich Kryukov 170
4 PIEBALDconsult 160
0 OriginalGriff 5,695
1 DamithSL 4,506
2 Maciej Los 4,007
3 Kornfeld Eliyahu Peter 3,480
4 Sergey Alexandrovich Kryukov 3,180


Advertise | Privacy | Mobile
Web01 | 2.8.141216.1 | Last Updated 29 Mar 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100