Hi weezer,

Please download the template list and source code. Attach template list into your site collection and use Visual Studio 2010 to open source code. Open MyAlbum.cs class, replace site url (phong2008/…/Home.aspx) to your site url and then click on AlbumWebPart project and then press F4, change Site URL property to your web application and then right click -> deploy it into your server.

Thanks / Phong Dang.

Hi weezer,

My demo has not supported your requirement. I used jquery plug-in for my demo at this link: vandelaydesign.com/…/jquery-image-galleries. You can download and customize your requirement.

Thanks / Phong Dang.

Hi,

“my picture that upload in piclib is not show in slideshow.” => Piclib just contain image files. You have to create a new item in MyAlbum list which Images field reference to image in piclib. The Images field is created from  “Hyperlink or Picture” Type with Format URL option is Picture. It contain url of the image from your Picture Library. You can see the Images field in my link: community.bamboosolutions.com/…/slide-01.png. It will be showwed in slide album as community.bamboosolutions.com/…/slide-02.png

Hi DasPB,

My post is just a WebPart Demo, I had hard-code for something sin my solution so after download it, you need to change them for compatible running it in your site.

Using Visual Studio 2010 and open AlbumWebPart solution.

   1. Open file MyAlbum.cs and change the site url from “phong2008/…/Home.aspx” to this.Context.Request.Url.ToString().

   2. Please check PicLibrary and MyAlbum list to make sure they exist on your site.

   3. And then, right click on AlbumWebPart project to deploy it into your site.

“..import hyperlink from another field..” does it mean you want to insert a new field into MyAlbum list? If yes, you will change some code in the project. Otherwise, let’s edit any item and change hyperlink that you like.

Hi Snibe,

How to deploy resources in sandboxed solutions?

Please change something in AlbumWebPart project:

 1. Move AlbumWebPart folder out Layout folder and delete Layout folder.

 2. Change Build Action property of files (next.png, jquery.js…etc.) from Content to Embedded Resource.

 3. Open the project package designer expanding the Package folder, and double-clicking the Package.package project item.

 4. On the bottom of the designer, click the Advanced tab.

 5. Click the Add > Add Existing Assembly command.

 6. Select an AlbumWebPart assembly to add to the Package. (Source Path: “binDebugAlbumWebPart.dll” and Location: “AlbumWebPart.dll”).

 7. Accept the default GlobalAssemblyCache deployment target.

 8. Click OK to finish.

 9. Build AlbumWebPart project again.

 10. Go to bin folder, get the AlbumWebPart.wsp file and then upload it into Solutions in Site Settings.

Hi Arunkumar/ Jtbob74,

I fixed your issue. Please override MyAlbum.cs class.

Here are code:

public class MyAlbum : WebPart

   {

       protected override void CreateChildControls()

       {

           //Photo

           Panel photos = new Panel();

           photos.ID = “photos”;

           photos.CssClass = “galleryview_” + this.ClientID;

           this.Controls.Add(photos);

           //Panel

           Panel panel, overLay;

           Image img;

           using (SPSite site = new SPSite(” your site url “))

           {

               using (SPWeb web = site.OpenWeb())

               {

                   SPList list = web.Lists[“MyAlbum”];

                   SPFieldUrlValue value = null;

                   SPField text = null;

                   string description = string.Empty;

                   foreach (SPListItem item in list.Items)

                   {

                       panel = new Panel();

                       panel.CssClass = “panel”;

                       //Img

                       value = new SPFieldUrlValue(item[“Images”].ToString());

                       img = new Image();

                       img.ImageUrl = value.Url;

                       panel.Controls.Add(img);

                       //Panel

                       overLay = new Panel();

                       overLay.CssClass = “panel-overlay”;

                       text = list.Fields[“Description”];

                       description = item[“Description”].ToString();

                       overLay.Controls.Add(new LiteralControl(text.GetFieldValueAsHtml(description)));

                       panel.Controls.Add(overLay);

                       photos.Controls.Add(panel);

                   }

                   //Make Iframe

                   HtmlGenericControl ul = new HtmlGenericControl(“ul”);

                   ul.Attributes.Add(“class”, “filmstrip”);

                   photos.Controls.Add(ul);

                   HtmlGenericControl li;

                   foreach (SPListItem item in list.Items)

                   {

                       li = new HtmlGenericControl(“li”);

                       img = new Image();

                       text = list.Fields[“Description”];

                       description = item[“Description”].ToString();

                       img.AlternateText = text.GetFieldValueAsText(description);

                       img.ToolTip = text.GetFieldValueAsText(description);

                       value = new SPFieldUrlValue(item[“Images”].ToString());

                       img.ImageUrl = value.Url;

                       li.Controls.Add(img);

                       ul.Controls.Add(li);

                   }

               }

           }

       }

       protected override void OnPreRender(EventArgs e)

       {

           base.OnPreRender(e);

           RegisterScriptAndCSS();

       }

       private void RegisterScriptAndCSS()

       {

           StringBuilder codesScript = new StringBuilder();

           codesScript.Append(@”

                          <link type=’text/css’ rel=’stylesheet’ href=’_layouts/AlbumWebPart/style/album.css’ />

                          <script type=’text/javascript’ src=’_layouts/AlbumWebPart/jquery.js’></script>

                          <script type=’text/javascript’ src=’_layouts/AlbumWebPart/script/Jgalleryview.js’></script>

                          <script type=’text/javascript’ src=’_layouts/AlbumWebPart/script/Jtimers.js’></script>

                          <script type=’text/javascript’>

                              $(document).ready(function() {

                                  $(‘.filmstrip’).css({ ‘display’ : ‘block’});

                                  $(‘.galleryview_” + this.ClientID + @”‘).galleryView({

                                        panel_width: 800,

                                        panel_height: 300,

                                        frame_width: 100,

                                        frame_height: 100,

                                        img_path: ‘_layouts/AlbumWebPart/images’

                                  });

                              });

                         </script>”);

           if (!this.Page.ClientScript.IsStartupScriptRegistered(“MyAlbummWebPart” + this.ID))

           {

               this.Page.ClientScript.RegisterStartupScript(this.GetType(), “MyAlbummWebPart” + this.ID, codesScript.ToString());

           }

       }

   }

Hi,

I cannot post the stylesheet code in comment so your webpart display incorrectly. Please update RegisterScriptAndCSS method and replace character “[” to “<“.

Here are code:

private void RegisterScriptAndCSS()

       {

           StringBuilder codesScript = new StringBuilder();

           codesScript.Append(@”[style type=’text/css’]

                               .galleryview_” + this.ClientID + @” {

                               font-size: 12px;

                               font-family: Arial, Helvetica, sans-serif;

                               }

                               .panel

                               {

                                   display:none;

                               }

                               UL.filmstrip

                               {

                                   display:none;

                               }

                          [/style]

                          [link type=’text/css’ rel=’stylesheet’ href=’_layouts/AlbumWebPart/style/album.css’ /]

                          [script type=’text/javascript’ src=’_layouts/AlbumWebPart/jquery.js’][/script]

                          [script type=’text/javascript’ src=’_layouts/AlbumWebPart/script/Jgalleryview.js’][/script]

                          [script type=’text/javascript’ src=’_layouts/AlbumWebPart/script/Jtimers.js’][/script]

                          [script type=’text/javascript’]

                              $(document).ready(function() {

                                  $(‘.filmstrip’).css({ ‘display’ : ‘block’});

                                  $(‘.galleryview_” + this.ClientID + @”‘).galleryView({

                                        panel_width: 800,

                                        panel_height: 300,

                                        frame_width: 100,

                                        frame_height: 100,

                                        img_path: ‘_layouts/AlbumWebPart/images’

                                  });

                              });

                         [/script]”);

           if (!this.Page.ClientScript.IsStartupScriptRegistered(“MyAlbummWebPart” + this.ID))

           {

               this.Page.ClientScript.RegisterStartupScript(this.GetType(), “MyAlbummWebPart” + this.ID, codesScript.ToString());

           }

       }

Thanks / Phong Dang.