Homepage Scrolling images

Hi WX Development,

It is working.
Thanks very much for your time to explain in detail.

Thanks.

I have also got it working and I'm now trying to figure out how to bind the featured products images to the control. Has anyone does this before ? my code so far is as follows:

Slider.ascx

<asp:Repeater ID="dlCatalog" runat="server" OnItemDataBound="dlCatalog_ItemDataBound"
    EnableViewState="false">
    
    <ItemTemplate>
        <div id="slider" class="nivoSlider">      
            <asp:HyperLink ID="hlImageLink" runat="server" />
        </div>
    </ItemTemplate>
</asp:Repeater>

Codebehind:

using System;
using System.Collections;
using System.ComponentModel;
using System.Configuration;
using System.Data;
using System.Text;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using NopSolutions.NopCommerce.BusinessLogic;
using NopSolutions.NopCommerce.BusinessLogic.Categories;
using NopSolutions.NopCommerce.BusinessLogic.Media;
using NopSolutions.NopCommerce.BusinessLogic.Products;
using NopSolutions.NopCommerce.BusinessLogic.SEO;
using NopSolutions.NopCommerce.Common.Utils;
using NopSolutions.NopCommerce.BusinessLogic.Configuration.Settings;
using NopSolutions.NopCommerce.BusinessLogic.Infrastructure;

namespace NopSolutions.NopCommerce.Web.Modules
{
    public partial class Slider : BaseNopFrontendUserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            BindData();               
        }
        private void BindData()
        {
            var products = this.ProductService.GetAllProductsDisplayedOnHomePage();
            if (products.Count > 0)
            {
                dlCatalog.DataSource = products;
                dlCatalog.DataBind();
            }
            else
            {
                this.Visible = false;
            }
        }
        protected void dlCatalog_ItemDataBound(object sender, RepeaterItemEventArgs e)
        {
            if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
            {
                var product = e.Item.DataItem as Product;
                if (product != null)
                {
                    string productURL = SEOHelper.GetProductUrl(product);

                    var hlImageLink = e.Item.FindControl("hlImageLink") as HyperLink;
                    if (hlImageLink != null)
                    {
                        var picture = product.DefaultPicture;
                        if (picture != null)
                            hlImageLink.ImageUrl = this.PictureService.GetPictureUrl(picture, this.SettingManager.GetSettingValueInteger("Media.Product.ThumbnailImageSize", 125), true);
                        else
                            hlImageLink.ImageUrl = this.PictureService.GetDefaultPictureUrl(this.SettingManager.GetSettingValueInteger("Media.Product.ThumbnailImageSize", 125));

                        hlImageLink.NavigateUrl = productURL;
                        hlImageLink.ToolTip = String.Format(GetLocaleResourceString("Media.Product.ImageLinkTitleFormat"), product.LocalizedName);
                        hlImageLink.Text = String.Format(GetLocaleResourceString("Media.Product.ImageAlternateTextFormat"), product.LocalizedName);
                        
                    }

                    var hlProduct = e.Item.FindControl("hlProduct") as HyperLink;
                    if (hlProduct != null)
                    {
                        hlProduct.NavigateUrl = productURL;
                        hlProduct.Text = Server.HtmlEncode(product.LocalizedName);
                    }
                }
            }
        }   

    }
}

its not working because the item template is splitting the div up. I just want one div with several links

we used a simple jquery slider on Deadlywind Paintball

You can also try this.  Was very easy to use, just added the code to the homepagetext area in topics of admin as source code.  Just use whatever pics you want, and can adjust which way the pic slides in.

http://nopcommercetheme.blogspot.com/

I was actually able to implement the nivo slider and link it to the featured products.

Can you show me the way to create the file slider.ascx. Thanks so much.

Tangopdx wrote:

Which version did you do this for, I cannot see how to enter the code in the FDK editor as per the instructions, the <> does not appear in the editor, is this just a case of setting the page to Source and removing everything other than a <>??? bit confussed about these instructions........I'm using 1.90

I'd like to give this method a try.

Rob

xxrobrsvxx wrote:

Been using it since Nop 1.4, and currently with 1.9.

The FCK editor can be in one of two modes, "source" and what I would call "design".  If you do anything in design mode and then shift to source you would see what the design mode created for you.

So, Yes.  You would use source mode.  My code for my homepagetext is below. Erase anything that the editor might have there (in source mode)  You can also add more things above or below.

You can also do this on any category page as wel.  As long as you can use the FCK editor.

Begin code@@@

<object type="application/x-shockwave-flash" data="bcastr4.swf?xml=
      <data>
        <channel>
          <item>
            <link>Category/1-home.aspx</link>
            <image>app_themes/brightGreen/images/slideshow1.jpg</image>
            <title>Products For Home</title>
          </item>
          <item>
            <link>Category/2-industrial.aspx</link>
            <image>app_themes/brightGreen/images/slideshow2.jpg</image>
            <title>Products For Industrial</title>
          </item>
          <item>
            <link>Category/3-restaurant.aspx</link>
            <image>app_themes/brightgreen/images/slideshow3.jpg</image>
            <title>Products For Restaaurant</title>
          </item>
        </channel>
        <config>
             <autoPlayTime>5.5</autoPlayTime>
                <titleBgColor>0x181818</titleBgColor>
                <transform>breathe</transform>
                <btnFocusColor>0x181818</btnFocusColor>
                <isShowTitle>true</isShowTitle>
                <btnHoverColor>0x02B3FF</btnHoverColor>
                <btnFocusColor>0x02B3FF</btnFocusColor>
    <roundCorner>8</roundCorner>
        </config>
      </data>
    "  width="540px" height="250px" wmode="Opaque">
    <param name="movie" value="bcastr4.swf?xml=
      <data>
        <channel>
         <item>
            <link>Category/1-home.aspx</link>
            <image>app_themes/brightGreen/images/slideshow1.jpg</image>
            <title>Products For Home</title>
          </item>
          <item>
            <link>Category/2-industrial.aspx</link>
            <image>app_themes/brightGreen/images/slideshow2.jpg</image>
            <title>Products For Industrial</title>
          </item>
          <item>
            <link>Category/3-restaurant.aspx</link>
            <image>app_themes/brightgreen/images/slideshow3.jpg</image>
            <title>Products For Restaurant</title>
          </item>
        </channel>
        <config>
          <autoPlayTime>5.5</autoPlayTime>
                <titleBgColor>0x181818</titleBgColor>
                <transform>breathe</transform>
                <btnFocusColor>0x181818</btnFocusColor>
                <isShowTitle>true</isShowTitle>
                <btnHoverColor>0x02B3FF</btnHoverColor>
                <btnFocusColor>0x02B3FF</btnFocusColor>
    <roundCorner>8</roundCorner>
        </config>
      </data>" />
      <param name="wmode" value="Opaque" />
</object>

End code@@@l

Thanks, Rob, just installed Mobilyslider on our site after attempting many things and this works great, is simple to use, and it is free. Couldn't be easier!