Code

Discussion on Kreatura Slider Plugin for WordPress

Discussion on Kreatura Slider Plugin for WordPress

Cart 104,055 sales

kreatura supports this item

Supported

10027 comments found.

@kreatura can you please give me a few pointers for what I asked? Thanks.

Hi.

I was wondering if you could answer my previous comment. I have a site that is going live in the next couple of days and could do with knowing if the update is imminent.

Thanks!

Sorry we have more projects, the update will come in next week.

OK… Me again. Here is what I found so far: on the Anything Slider(https://github.com/ProLoser/AnythingSlider/wiki/Video) page I have this:
// Set up AnythingSlider
$('#slider').anythingSlider({
  // pause all videos when changing slides
  onSlideInit: function(e, slider) {
    if (jwplayer) {
      $.each(videos, function(i) {
        jwplayer(i).pause(true);
      });
    }
  },
  // Only play a paused video when a slide comes into view
  onSlideComplete: function(slider) {
    if (jwplayer) {
      $.each(videos, function(i, v) {
        // find ID in panel - if there are two videos in the same panel, both will start playing!
        if (slider.$currentPage.find('#' + v[0]).length && jwplayer(v[0]).getState() === 'PAUSED') {
          jwplayer(v[0]).play();
        }
      });
    }
  }
I am using a single jwplayer/slide so half of the second line of code is useless for me at this point. Basically I need to integrate your API calls somehow to do what these guys did with their slider
    cbStart // Calling when you click the slideshow start button.
    cbStop // Calling when click the slideshow stop / pause button.
    cbPause // Calling when slideshow pauses (if pauseOnHover is true).
    cbAnimStop  // Calling when the animation of current layer ends, but the sublayers of this layer still may be animating.
    cbAnimStart // Calling when animation starts.
    cbPrev // Calling when you click the previous button (or if you use keyboard or touch navigation).
    cbNext // Calling when you click the next button (or if you use keyboard or touch navigation).
Can you please give me a few lines of code so that the jwplayer has no issues with the slider’s animation and works together with it? (I am working on two projects that need this function). On these guys’ page I saw that everything works (HTML5, jwplayer, flowplayer, etc…) I also looked at the main plugin’s page (the base plugin) some examples of sliders with videos but I saw they have the same issue. Since my slider shows 5 videos with sound there is a huge issue when changing slides. It would be great if you could help me fix it with the API calls and even greater if you make a tick-box with “pause video on slide change” :D

Sorry for being such a pain and hopefully you will find a fix.

Regards.

In WP plugin by default you cannot use LayerSlider API , only if you rewrite the initialization code.

You could use cbAnimStart function to pause jwplayer.

$(el).layerSlider({
     cbAnimStart : function(){
          here goes your code
     }
});
Two questions: 1. “hacked” the wp plugin by copying the HTML output in the wordpress page (Right click and view the source and manually copy and paste everything there from
<div id="layerslider_1" style="width: 790px; height: 400px;">
up to the coresponding ending div that is usually the first place you see two </div> together>) and adding a jwplayer shortcode using this method: I replaced this :
<img class="ls-s1" src="http://mysite.com/wp-content/uploads/2012/01/blank.png" alt="sublayer" style="position: absolute; top: 0px; left: 0px; slidedirection : right; parallaxin : .45; parallaxout : .45; durationin : 1500; durationout : 1500; easingin : easeInOutQuint; easingout : easeInOutQuint; delayin : 0; delayout : 0;" />
with this
<p id="l5text4" class="ls-s8">[jwplayer config="My Custom Slider" mediaid="123"]</p>
The actual settings in the plugin’s control panel still apply to the slider. This works great except of the following issue: I need the jwplayer instances to pause when slide changes. I found this on AnySlider:(http://jsfiddle.net/Cm479/265/)
// Set up AnythingSlider
$('#slider').anythingSlider({

    // pause all videos when changing slides
    onSlideInit: function(e, slider) {
        if (jwplayer) {
            $.each(videos, function(i) {
                jwplayer(i).pause(true);
            });
        }
    },
Since many users have a pro or free version of the JWPlayer that displays beautifully the YouTube videos is more than annoying for the regular user that visit the website to click pause when changing slider and the “default” expectation is that the jwplayer will pause when changing the slide.

Since I am clueless on how to insert this function to your plugin can you give me an idea?

2. As many asked before: can you please give an ETA to the plugin update.

Many thanks.

Hey there. I would also like to know when you are updating your excellent slider.

The update will come in the next week.

Hi.

I was just about to buy this fantastic plugin but after reading some comments see that it is due for a significant update, specifically with regard to features such as:

1. Fading elements. 2. Reordering layers 3. Multiple backgrounds and 4. Adding some html elements.

Unfortunately, I really can’t buy the plugin until at least 1 & 3 are in place.

According to previous replies to purchasers from you an update should be out very soon i.e. a couple/few days. Is this the case and if not when will the update be ready?

Thanks a lot.

David

1. will be in the updated version :) 2. will be in the updated version :) 3. if you add 1 to P.Level, the sublayer will behave like a background layer 4. will be in the updated version :)

Hi, I just sent in an email through the Code Canyon contact the author form, but I forgot to ask about shortcode support. Does the plugin support shortcodes so that I can place it in a template file rather than from the WP backend/widget area? Thanks.

Hi Kreatura, I’d like to use this slider in a responsive layout, is it possible? There is a way to resize itself? TIA

Not yet, currently you have to add width and height property in pixels.

Any news with the custom html? I really need to insert a jwplayer into a slide. One more thing: does it support shortcodes? Thanks

In the next update we will add a custom html option.

1. Does it work with 100% width? Fullwidth.

2. Can it be set at 960px instead of 1000px ?

You can set the width in pixels.

Thanks! One more question…

Is there any way to Fade in instead of slide?

Not yet, maybe in the next update we will add a fading option.

This is the best slider I’ve seen in a while and am going to get it after writing this.

I wanted to thank you for speeding things up on the demo video when you were just adding images. The amount of times I’ve had to sit through somebody doing that in real-time is scary.

Thank you very much!

Hi,

from checking your demo right now it is only possible to move items horizontally (right/left) and vertically (up/down).

Are you planning to support curved movements in the future?

Would love to see if it would be possible to have a slider like this one:

http://www.apple.com/iphone/

Also the fade out style of images/text would be awesome! ;)

Thanks

http://www.apple.com/iphone/

This works with css3 transformation (rotation). You can do this with some css modifications if you want. I added an example to aour demo page:

http://kreaturamedia.com/layerslider/

If you see the last slide, the Earth is rotating :) I only added some lines to the css:

.ls-active #earth {
    -webkit-transition: all 20s ease-in-out;
    -moz-transition: all 20s ease-in-out;
    -o-transition: all 20s ease-in-out;
    -ms-transition: all 20s ease-in-out;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
}

Hi and great work on an amazing plugin.

I am having trouble getting anything to show. I have created a new user (admin) and gone through the documentation time and time again making sure I have done everything correctly. I am using the Thesis theme framework (client request) and would love to get this working but I am unable to.

The plugin installed correctly, ‘uploads’ folder present and chmod’d ‘777’... I can’t figure this one out. I’ve created a new function to insert the slider right below the header using the following code.

// Custom Slider implementation function slider() { echo '<div><?= do_shortcode(‘[layerslider id=”1”]’); ?></div>'; } add_action('thesis_hook_after_header', 'slider');

Any help would be greatly appreciated.

Hi,

Please send us an email with your url of the website and please create a test user to your wp-admin, so we can help you.

Hello again,

Thank you for the rapid response. I was able to fix my problem by using the following.

function slider_shortcode() {
    $myfunction= '[layerslider id="1"]';
    $myfunction_parsed = do_shortcode($myfunction);
    echo $myfunction_parsed;
}
add_action('thesis_hook_feature_box','slider_shortcode');

Hope this helps others who may be in the same boat I was in.

Thank you!

Hello Again Kreatura,

Please disregard my last comment. Fixed the problem. However, I’ve run into another small problem involving animationout so I sent you an email.

A few questions…

-Any examples showing how it works with video, including code examples?

-Does it work with or include any lightbox functionality? For example, when clicking on an image or a YouTube video in the slider, I would need the ability to view the image of video in a lightbox such as Thickbox or Fancybox.

-Do we have access to all the CSS files for custom styling?

Thanks! Chris

Hi,

1. Yes, there is a video review, what you can find here.

2. No. And in the wordpress version you can use only images with links as sublayers.

3. You can use skins and you can add custom skins.

Hello Kreatura,

How can you get a layer to stop once the animationin is complete? I can get the sublayers to stay with delayout but the main background layer doesn’t. I tried changing all the options to a very high integer; durationout, delayout and slidedelay but none seem to keep the background layer on the screen.

Nice work, in case You will have time, please, make Joomla version too. Thanks

Hi, sorry, but creating Joomla version is not in out future plans.

HI kreatura Very nice plugin, very slick, any way to just alpha / fade things up, instead of slide? Would be nice if some element could be static, but blend up (over other objects over time).... Thx anyway

Thank you for your advice, we are going to think about it.

i just looked at my slideshow in chrome and IE and i see a 2-3 pixel white line between slides when they change to the next slide. This gap isnt showing in firefox

This is a little glitch in some browsers. We recommend to add a background color to the layerslider container (for example, if you are using mostly dark colored layers, add black background color.)

For some reason the delayOut and durationOut settings aren’t working for me. No matter how high or low I set them nothing happens.

I tested, they are working. Adding them to sublayers – there is no problem. But there is a little tricky to adding them to layers.

For example if you have a layer with durationout 4000, but the next layer has a lower value of durationin, then the next layer will animating in 1500ms, and you won’t see the current layer animating out.

So if you want to set a higher value of durationout, you have to set the next layers durationin to the same value.

Same at the delaytimes. :)

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey