Slider Main Page

This is the page that comes when you click on “Crelly Slider” from the left WordPress admin panel. Here you can view, modify or delte the sliders that you have created. If you want to add a new slider, just click on the blue button at the bottom of the page.

home

Add or Edit a Slider

When you create or edit a slider, you will be redirected to a new page. First of all, write a name for the slider (e.g. Home Slider). Automatically an alias and a shortcode will be generated. You will need the shortcode to insert a slider into a page or a post.

Remember that when you finish to add / edit a slider, you have to click “Save changes”!

 

slider-settings

Edit Slides

To add, edit or remove the slides of the slider, click on “Edit Slides” at the top of the page.

main-tabs

A table like this will be shown:

slide-settings

From this table you can change the slide general settings. Over the table there are some tabs. Clicking on them you can select every slider slide. To delete a slide, just click on the red X.
If you want to re-order the slides, just drag the slide tab to the left or right, before or after another slide tab.

Slide Preview Area and Elements (text and images)

In the preview area you can add and position the elements. To add an element, click on the yellow button under the preview area. You have to position the element to it’s final position (the position that will take after the IN ANIMATION) just by dragging it around. If you click on an element, it will be selected (a black border will appear) and it’s settings will be displayed under the preview area.

element

Insert a Slider into a Page or a Post

There are 2 ways to insert Crelly Slider into a page / post.

  • The first (and the easiest) is to use a shortcode. The plugin will automatically generate a shortcode that you can find in the the slider settings tab. Just copy and paste it into a post or a page, like this:
    shortcode
  • The second method is using a php function. Write <?php if(function_exists(‘crellySlider’)) crellySlider(‘your_slider_alias’); ?>. Put the function wherever you want in a theme php file (e.g. index.php).

 

Translate the plugin

The first thing you have to do if you want to translate Crelly Slider is to download and install Poedit. Next, using an FTP program like Filezilla, download on your desktop “crellyslider.pot” that is usually located in yourwebiste\wp-content\plugins\crelly-slider\wordpress\languages\crellyslider.pot. Once you’ve done, open Poedit and select “File” -> “New catalogue from POT file“. Open “crellyslider.pot”. A window like this will be shown. The only thing you have to change is the language. We are going to translate in Italian so I write it_IT. Click OK.

setup-lang

Poedit will ask you to save the file. Save it on your desktop and name it crellyslider-it_IT.

Once you’ve done, you can start translating all the strings. Remember that if you see something like that \” means that the final text will be ” and not \”. The slash is an escape char and must be used if you want to print a “. When you finish, click save. Close Poedit. On your desktop you should now find “crellyslider-it_IT.pot” and “crellyslider-it_IT.mo”. Upload them, using FTP, on yourwebiste\wp-content\languages\crellyslider (you have to manually create the crellyslider folder).

Update the translation:

When a new version of the plugin is released, some strings may have to be updated. The procedure is exactly the same except for this: you don’t have to create a new catalogue  but you have to update the existing one. To do that, open your crellyslider-it_IT.po with poedit and select “Catalogue” -> “Update from POT file…“. Select crellyslider.pot (obviously not the old one, you have to download the updated version). Update the new strings. Then go to “Catalogue” -> “Proprieties” and in Project name and version, change the version to the version you’re translating. Finally upload the updated .po file via FTP.

If you want to send me the translation of Crelly Slider in your language, would be really appreciated. Feel free to contact me at fabiorino@outlook.com or use GitHub.

Plugin APIs

Since the version 1.1.0, Crelly Slider features 7 functions that can be called to control a specific slider. The functions are the following:

  • jQuery(‘.crellyslider-slider-your_slider_alias‘).data(‘crellySlider’).pause();
  • jQuery(‘.crellyslider-slider-your_slider_alias‘).data(‘crellySlider’).resume();
  • jQuery(‘.crellyslider-slider-your_slider_alias‘).data(‘crellySlider’).nextSlide();
  • jQuery(‘.crellyslider-slider-your_slider_alias‘).data(‘crellySlider’).previousSlide();
  • jQuery(‘.crellyslider-slider-your_slider_alias‘).data(‘crellySlider’).changeSlide(new_slide_index);
  • var current_slide = jQuery(‘.crellyslider-slider-your_slider_alias‘).data(‘crellySlider’).getCurrentSlide();
  • var total_slides = jQuery(‘.crellyslider-slider-your_slider_alias‘).data(‘crellySlider’).getTotalSlides();

Example:

<button id="pause-resume">Pause / Resume</button>

<script type="text/javascript">
	var playing = true;	
	(function($) {
	$(document).ready(function() {
		$('#pause-resume').click(function() {
			if(playing) {
				$('.crellyslider-slider-test').data('crellySlider').pause();
				playing = false;
			}
			else {
				$('.crellyslider-slider-test').data('crellySlider').resume();
				playing = true;
			}
		});
	});
	})(jQuery);
</script>