Forums (Obsolete)

Member

jgonzalez-invex - 4/19/2012 6:25:45 PM

Content Slider

Hi,

I'm new about Kentico and I want to use Content Slider web part.

I added the next code to my page:


<%@ Register Src="~/CMSWebParts/Viewers/Effects/ContentSlider.ascx" TagName="ContentSlider" TagPrefix="uc1" %>

<h2>Slider</h2>

<uc1:ContentSlider runat="server" ID="ContentSlider" ClassNames="CMS.File" TransformationName="CMS.File.Lightbox"  StopProcessing="false"     ZeroRowsText="No se han cargo imágenes." JsAutoStart="true" DivWidth="982" DivHeight="265" JsFadeIn="3000" JsFadeOut="3000" JsBreak="5000" />

When I view it through CMSDesk, the page only shows a list of images like a links. It does not show effects, control numbers to move between images, neither start button.

Does someone help me or give me some examples?

Regards

Kentico Developer

kentico_helenag - 4/23/2012 1:44:28 AM

RE:Content Slider

Hello,

1. Where did you place the code exactly? It is an ASPX template, transformation, custom web part or something else?

2. Are there any JS errors on that page?

3. Can you try to use a different non-lightbox transformation (TransformationName)? The control is registered correctly and the code seems to be ok.

Best regards,
Helena Grulichova

Member

jgonzalez-invex - 4/23/2012 12:12:55 PM

RE:Content Slider

Hi, thanks for answering me.

Ok.

1. Yes I do. I have a simple ASPx, here my code:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ContentSlider.aspx.cs" Inherits="CMSTemplates_PortalInvexCom_Test_ContentSlider" %>
<%@ Register Src="~/CMSWebParts/Viewers/Effects/ContentSlider.ascx" TagName="ContentSlider" TagPrefix="uc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Content Slider Test</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="manScript" runat="server" />       

        <uc1:ContentSlider runat="server" ID="ContentSlider" ClassNames="CMS.File" TransformationName="CMS.File.ImageSliderV2" 
        OrderBy="FileName" DivWidth="982" DivHeight="265" JsFadeIn="1000" JsFadeOut="1000" JsAutoStart="true" EnableViewState="false" />
    </form>
</body>
</html>

2. No, it doesn't have any JS errors.

3. Yes, I do. I created another transformation called ImageSliderV2. Here its my code:


<a href="<%# GetFileUrl("FileAttachment") %>" title="<%# Eval("FileName", true) %>">
<img src="<%# GetFileUrl("FileAttachment") %>" alt="<%# Eval("FileName", true) %>" width="100%" height="100%" border="0" />
</a>

Regards

Member

jgonzalez-invex - 4/23/2012 2:22:31 PM

RE:Content Slider

Hi Elena

I've been looking the ContentSlider’s Control code and I found that the “index” variable always has 0 value, it never changes. I think that’s why the control never creates the next code in the OnPreRender event:


#region "Variables"

    string mStyleOptions = null;
    int index = 0;

#endregion

if ((index != 0) && (JsAutoStart))
  {
     jScript += "autoTurnPage(Slider_" + ClientID + ",0," + (JsFadeIn + JsFadeOut + JsBreak) + ", false); \n";
  }

for (int i = 0; i < index; i++)
  {
    jScript += "$('" + ClientID + "_page_" + i + "').addEvent('click',function(){Slider_" + ClientID + ".turnPage(" + i + ",false);});\n";
  }

if (index > 0)
{
    // DIV with links to pages
    bottomDiv += "<div id=\"" + ClientID + "_pager\" class=\"Pager\" style=\"width:" + DivWidth + "px;\">";
    // Page numbers
    for (int p = 0; p < index; p++)
      {
         bottomDiv += "<div class=\"PagerPage\" style=\"width:10px;\"><a id=\"" + ClientID + "_page_" + p + "\" href=\"#\" onclick=\"CurrentPage_" + ClientID + "=" + p + ";document.getElementById('" + ClientID + "_runSlider').style.display='inline';return false;\">" + (p + 1) + "</a></div>";
                    }
         // Add start link
         bottomDiv += "<div style=\"display:none;\" id=\"" + ClientID + "_runSlider\" class=\"Control\"><a href=\"#\" onclick=\"document.getElementById('" + ClientID + "_runSlider').style.display='none';autoTurnPage(Slider_" + ClientID + ",CurrentPage_" + ClientID + "," + (JsFadeIn + JsFadeOut + JsBreak) + ", false); return false;\" >" + ResHelper.GetString("ContentSlider.Start") + "</a></div>";
         bottomDiv += "<div style=\"clear:both;height:0;line-height:0;\"></div></div>";
}

Regards

Kentico Developer

kentico_helenag - 4/24/2012 3:57:13 AM

RE:Content Slider

Hello,

Do you reload the data in the code-behind? Please try to call the ReloadData method in the Page_Load method like this:

ContentSlider.ReloadData();

Unless it works, can you post your code-behind?

I also needed to add <cms:CMSPortalManager ID="CMSPortalManager1" runat="server" EnableViewState="false" /> to your code to make the template work.

Best regards,
Helena Grulichova

Member

jgonzalez-invex - 4/24/2012 12:07:54 PM

RE:Content Slider

Hi Helena,

It doesn't work.

Here, is the HTML page code:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ContentSlider.aspx.cs" Inherits="CMSTemplates_PortalInvexCom_Test_ContentSlider" %>
<%@ Register Src="~/CMSWebParts/Viewers/Effects/ContentSlider.ascx" TagName="ContentSlider" TagPrefix="uc1" %>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Content Slider Test</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="manScript" runat="server" />
        <cms:CMSPortalManager ID="CMSPortalManager1" runat="server" EnableViewState="false" /> 

        <%--<uc1:ContentSlider runat="server" ID="ContentSlider" ClassNames="CMS.News"
        OrderBy="NewsReleaseDate DESC" TransformationName="CMS.News.NewsWithSummaryAndTeasers"
        DivWidth="500" DivHeight="170" JsFadeIn="1000" JsFadeOut="1000" JsAutoStart="true"
        EnableViewState="false" />--%>

        <asp:UpdatePanel ID="updSlider" runat="server">
            <ContentTemplate>
                <uc1:ContentSlider runat="server" ID="Slider" ClassNames="CMS.File" TransformationName="CMS.File.ImageSliderV2" 
                DivWidth="982" DivHeight="265" JsFadeIn="1000" JsFadeOut="1000" JsAutoStart="true" EnableViewState="false" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

Here, its code behind


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class CMSTemplates_PortalInvexCom_Test_ContentSlider : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Slider.ReloadData();            
        }
    }
}

Thanks again.

Regards

Kentico Developer

kentico_helenag - 4/25/2012 1:51:42 AM

RE:Content Slider

Hello,

can you follow this article: Creating a new ASPX page template how to create an ASPX page in Kentico?

I have tested a template:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="slider.aspx.cs" Inherits="CMSTemplates_CorporateSite_slider" %>

<%@ Register Src="~/CMSWebParts/Viewers/Effects/ContentSlider.ascx" TagName="ContentSlider" TagPrefix="uc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">    

<title>Content Slider Test</title></head>

<body>    <form id="form1" runat="server">       
<cms:CMSPortalManager ID="CMSPortalManager1" runat="server" EnableViewState="false" />

 <asp:ScriptManager ID="manScript" runat="server" />       
 
        <uc1:ContentSlider runat="server"  DivWidth="500" DivHeight="170" ID="ContentSlider" ClassNames="CMS.File" TransformationName="CMS.File.ImageSliderV2"   EnableViewState="false"      OrderBy="FileName" JsFadeIn="1000" JsFadeOut="1000" JsAutoStart="true" Path="/Images/%" />   
     
         </form>
         </body>
         </html>

code-behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using CMS.UIControls;

public partial class CMSTemplates_CorporateSite_slider : TemplatePage
{
    protected void Page_Load(object sender, EventArgs e)
    {
        ContentSlider.ReloadData();

    }
}

and it worked correctly. Can you test it on your installation? The template must be assigned to a document in the content tree and you view the document, right?

Best regards,
Helena Grulichova


Member	jgonzalez-invex - 4/25/2012 10:02:02 AM RE:Content Slider Helena, It works. I needed to change <cms:CMSPortalManager ID="CMSPortalManager1" runat="server" EnableViewState="false" /> by <cms:CMSPageManager ID="CMSPageManager1" runat="server" /> Thanks for all your help. Regards.