Click here to Skip to main content
15,941,973 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have a image scroll web part in SharePoint 2010, how do i enlarge the image, when a user clicks on the image.(Something like, when you google a image, and when you click on particular image, the image gets enlarged and the page becomes blurred.

the images are coming from the sharepoint picture lib.

here is what i am using for image scroll.

What I have tried:

<div style="width:auto; height:400px; overflow:hidden; ">
   
   <marquee style="height:350px;overflow:hidden"  direction="up" >
        
        <asp:Literal ID="ltrImage" runat="server">        
</marquee>
</div>


code behind:
using (SPSite site = new SPSite(SPContext.Current.Web.Url))
            {
                using (SPWeb web = site.OpenWeb())
                {
                    SPList PicLib = web.Lists.TryGetList("ImageScroll");
                    string Image = "<table>";
                                        SPListItemCollection listcol = PicLib.Items;
                    foreach (SPListItem item in listcol)
                    {

                       
                        Image += "<tr><td><img src='" + web.Url + "/" + item.Url + "' style='height:auto;width:350px;'/></td></tr>";

                    
                    }

                    //Title1 += "</table>";
                    Image += "";
                    ltrImage.Text = Image;


                }
            }
Posted
Updated 26-Mar-16 12:51pm
v2

1 solution

After your loop you are setting Image back to an empty string before you assign it to your ltrImage.Text. What you should be doing is adding your table to the innerHTML of a div tag instead of the text property. Have a look below at the changes to your code and markup.

<div style="width:auto; height:400px; overflow:hidden; ">
   
   <marquee style="height:350px;overflow:hidden"  direction="up" >
        
        <div id="ltrImage" runat="server"></div>     
</marquee>
</div> 

using (SPSite site = new SPSite(SPContext.Current.Web.Url))
            {
                using (SPWeb web = site.OpenWeb())
                {
                    SPList PicLib = web.Lists.TryGetList("ImageScroll");
                    string Image = "<table>";
                                        SPListItemCollection listcol = PicLib.Items;
                    foreach (SPListItem item in listcol)
                    {                        
                        Image += "<tr><td><img src="" + web.Url + "/" +      item.Url + "" style="height:auto;width:350px;" /></td></tr>                    
                    }                    
                    ltrImage.innerHTML = Image; 
                }
            }</table>

Also notice how I closed the tag at the end. There is a better way to code that, but this should at least get you going.
 
Share this answer
 
Comments
Richard C Bishop 26-Mar-16 18:57pm    
I clearly submitted that in error. The extra "pre" tag and "b" tags should be gone and the "</table>" should be after the "</tr>" in the html string.
Member 12253249 29-Mar-16 8:57am    
image scroling is working fine. how do i open it up in a pop-up?
Richard C Bishop 9-May-16 11:16am    
Just use some jQuery. Create an html structure that the jQuery popup you choose calls for and place your content inside it.

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900