Back to Table of Contents

Working with Nop Anywhere Sliders

Working with Nop Anywhere Sliders information. General information on how to setup your banners and sliders.

1. Creating a slider

You can create as many sliders as you want and add each to a place where appropriate. You can have more than one slider on a page and each one of them will work independant from the other. Sliders can be used to change images that are used as links meaning that when clicked will redirect to a given url(page) or just use the plugin in order to add banners that are displayed on your website.

In order to create a new slider go to Plugins -> Nop Anywhere Sliders -> Manage Sliders. Click on the Add new slider button as shown on the image below.

When you click the "Add new slider" button the following page will be opened. You can choose from two main slider types - a Nivo slider, a normal carousel 2D slider or a new 3D carousel slider.

The view when the Nivo slider type is selected. It has its own specific settings. The recommended approach is to set Width and Height values to be as the resolution of the images that will be used in the Nivo slider.
One of the most important settings that you need to know is the theme setting. There are three predefined themes - navigation-inside , navigation-outside, navigation-thumbs.
By default the navigation-inside theme is selected and as the name implies it is styled in a way that the control navigation (1, 2, 3 ..) ,which alows changing the current picture and is styled to show oval buttons instead of numbering, will be shown inside the pictures that are sliding. This theme is appropriate for any sliders that are used as banners as no extra space will be shown below the slider image even if you enable the control navigation.
navigation-outside - this theme is styled to position the control navigation just below the sliding images and is appropriate for example for sliders on the home page.
navigation-thumbs - it is appropriate when instead of using oval buttons (or 1, 2, 3 .) for contol naviagtion you want to use thumbnails of the actual pictures. Note that if you chose this theme then you need to set Enable using thumbs for control navigation setting.

When you select Carousel2D slider the following settings will be displayed. These are the default settings for the carousel 2D slider that you can change to fit your needs.

The view when the Carousel2D slider type is selected. It has its own specific settings. The recommended approach is to set Width and Height values to be as the resolution of the images that will be used in the Carousel 2D slider.

When you select Carousel3D slider the following settings will be displayed. These are the default settings for the carousel 3D slider that you can change to fit your needs.

The view when the Carousel3D slider type is selected. It has its own settings. These are sample settings. If you choose to use the Carousel 3D slider the images that you upload will be automatically resized to the Picture Width and Picture Height set.

Here you can setup the slider you want. In the "Settings" tab you can choose the type of slider that best will suit your needs - a carousel 2D slider or a carousel 3D slider. When changing from Carousel2D and Carousel3D you will see that differenent set of settings will appear which are typical for the type of slider chosen. Choose carefully the System Name as this name will be used later if you plan to integrate manually the slider in your website. Once you have set the settings for your slider you can click the Save and Continue Edit button in order to proceed to the images upload and selecting a widget zone if necessary.

2. Adding a slider to a widget zone

a) Go to Plugins -> Nop Anywhere Sliders-> Manage Sliders

If you have already created a slider you will see it in the list displayed. In order to add it to a specific widget zone you will need to click the Edit link. If no sliders appear on the list you will need first to create one by clicking the Add new slider and then assing it to a given widget zone. In both of the cases you will end up on the following page on which you can edit all the slider details. Click on the Widgets tab.

b) Add the slider to a widget zone

To add the Nop Anywhere Sliders plugin to a widget zone, please follow the steps below:

  1. Go to an existing slider or create a new slider.
  2. Go to the Widgets tab.
  3. From the Widget Zone drop-down select your desired widget zone.
  4. Click the Add new button.

c) Widgets and Categories - you can add a Slider to a category widget zone and then add the Slider to a specific category to make the Slider appear ONLY for this category.

On this page you can choose the categories for which you want your slider to appear. Please note that if you put your slider to a Widget zone that is not a category widget zone then it won't be shown. Also if you are on a category different from the one that the widget is mapped to then the slider won't be shown.

3. Adding and editing pictures of a slider

Once you have a new slider created you can upload images that will be used in the slider. There are two options of doing this.

a) If you plan to use the slider just as banners, meaning that the images will not be used as links and they will not redirect to other pages when clicked, but just sliding and attracting the customer attention to an information you want to emphasize on.

To quick add a picture just click the Upload button and choose the image you want. You can set a display order on which the images will be ordered when sliding (if more than one image). The click the Quick Add button and you will see the newly added image appearing on the list above. This will mean that your image is already a part of your slider.

b) Add a picture to the slider with additional data that will be used by the slider as url, display text, alternate text.

In order to do this click the Add a new slider image link on the top right corner and a new page with a detail information for the slider image will be opened.

c) The create or edit slider image page is shown below.

Here you can upload the image you want to include in your slider and populate the date needed. The Title, Url and Alt (alternate text) properties are localized which is very powerful if you have more than one languages enabled on your site. Thus for example the same image of the slider can redirect to different urls(pages) depending on the language. Once you have uploaded your picture and populate the data you should click the Save or Save and Continue Edit button on the top right corner. If you click the Save button you will be redirected back to the slider details page.

d) Editing a picture of a given slider.

The pictures of a given slider can be easily edited anytime you want. When editing a given slider click on the Pictures tab where you will see a list of all pictures added to the given slider. You can easily delete the image by clicking the Delete button. For quick editing the Display Order and Visible properties of a picture click the Edit button next to the Delete one. Thus you can change inline the order of the image in the list of images or whether this image will be included in the slider or not. The property Visible is useful when you want a certain picture to excluded from the slider without the need to delete. Especially useful when you want to include the picture in the slider again at a later stage.
In order for more detailed editing of the picture including changing the url, display text, title, the image itself you will need to click the Edit link in the last column of the given picture. Then the detailed view for creating or editing a picture will be opened. The view is described in p.2 b) above in this document.

4. Editing a slider

Whenever you want you can edit an existing slider quickly and easily. Just go to Plugins -> Nop Anywhere Sliders -> Manage Sliders where you will see a list of all available sliders. In order to edit it just click on the link Edit on the right of the slider you want to edit. Please see the picture above.