SlidesJS 3 released!

[Nathan Searles]

Hey y'all,

Thanks to everyone that helped test the SlidesJS beta!

SlidesJS 3 has been released and is available at http://slidesjs.com/.

Cheers!

[Sebastian Müller]

I am also looking for this feature. I wonder how a new version can be a downgrade of the older one...? However, great work! Thanks!

Am Samstag, 9. März 2013 22:02:39 UTC+1 schrieb Andrew Weber:

What happened to hoverPause? :( Is there any way I can reproduce this? That was kind of key.

(Don't get me wrong - this is easily the best jQuery slider)

[Nathan Searles]

Hey thanks for the feedback. I'll look into adding that into the new version. For now it'd be pretty easy to do this with a little mouse enter/leave and a trigger click on the play/pause button.

On Saturday, March 9, 2013 1:02:39 PM UTC-8, Andrew Weber wrote:

What happened to hoverPause? :( Is there any way I can reproduce this? That was kind of key.

(Don't get me wrong - this is easily the best jQuery slider)

On Friday, March 8, 2013 6:03:02 PM UTC-6, Nathan Searles wrote:

[Nathan Searles]

A downgrade? Did you miss all the new features? :)

[Jules Mazur]

Why is defining width mandatory now? My site has a fluid layout, do the `width` and `height` options accept percent, or just px?

[Nathan Searles]

What it does is get the aspect ratio from the width and height. It was the simplest solution for setting the height based on what the width is. Because things need to be positioned absolute to make the slideshow work the elements then lose their height which in turn needs to be set using CSS.

When changing the browser size SlidesJS gets the new width and sets the correct height based on the aspect ratio and new width.

So for fluid layout just get the actual width and height of your images or width and height of your slide content and use that and SlidesJS will take care of the rest.

[Andrew Weber]

Ah yes, good idea. I used a timeout to make sure it didn't trigger the play button over and over again. Also wanted to wait a couple seconds so that it didn't immediately move to the next slide after. Here was my final code.

var sliderTimer;

$('#slideshow').on('mouseenter', function(e) {

clearTimeout(sliderTimer);

$('.slidesjs-stop').trigger('click');

}).on('mouseleave', function(e) {

clearTimeout(sliderTimer);

sliderTimer = setTimeout(function () {

  $('.slidesjs-play').trigger('click');

}, 2000);

});

[Missingbone]

Hi, there is any workaround to have the slide automatically restart playing (after a couple seconds) after the user clicks on the pagination buttons but WITHOUT clicking anything else or hovering over images?

btw, thanks for the awesome slide

[Nathan Searles]

Hover pause has been added! http://slidesjs.com/examples/playing/

Check out the play options at http://slidesjs.com/

[Nathan Searles]

Hover pause has been added! http://slidesjs.com/examples/playing/

Check out the play options at http://slidesjs.com/

[Andrew Weber]

Awesome, thank you :)

[Alexander Spiridonov]

That is awesome, thank you for the new version! I found touch-enabled feature quite handy =)

Hope more of previous version's features (such as already mentioned here hoverPause) will be incorporated into new version soon!

I just wondering, can 'crossfade' param of 'effect' settings object take false at all? When I try to set it to false (in attempt to disable crossfading) I get "Cannot read property 'effect' of undefined" error.

[Nathan Searles]

Which version is giving you that error and in which browser? And hoverPause was added to the latest version. Cheers!

[Darren Wood]

Hi,

Thanks for the great work on this script. In the older version it was very simple to include thumbnail pagination (like the Product example in the old version). How can I achieve this with the new version?

Thanks!

D

[Lukas_]

Hey all,

i have a Problem..

i just have to get the Next/Prev Buttons outside the container.

Is it remotely possible to do that in 3.0??

[Rudy Carranza Alvarado]

I have to say that I like this library a lot, very usefull, but I have a problem with the recent version. I know that there is a minified version however the tool I work with always minifies the js therefore I usually download the non minified version, however the new version throws some errors getting minified. For instance, using the online yui minifier (http://refresh-sf.com/yui) it shows 4 error getting this library minified. What tool do you use to minify?

Thanks and regards!!

On Friday, March 8, 2013 6:03:02 PM UTC-6, Nathan Searles wrote:

[David Streever]

Darren, Lukas, apparently, we can use the goto method, but I can't find documentation on that. Christophe very helpfully gave me code which I've pasted below. Unfortuantely, I can't figure out how to implement it :( any ideas?

at the end of the plugin code just replace this:

return $.fn[pluginName] = function (options) {

        return this.each(function () {

        if (!$.data(this, "plugin_" + pluginName)) {

        return $.data(this, "plugin_" + pluginName, new Plugin(this, options));

        }

        });

        };

with this:

return $.fn[pluginName] = function (options) {

            if (typeof options === "string") {

                var args = Array.prototype.slice.call(arguments, 1);

                this.each(function () {

                    var plugin = $.data(this, 'plugin_' + pluginName);

                    plugin[options].apply(plugin, args);

                });

            }

            else {

                return this.each(function () {

                    if (!$.data(this, 'plugin_' + pluginName)) {

                        $.data(this, 'plugin_' + pluginName,

                new Plugin(this, options));

                    }

                });

            }

        };

now you can call the goto method directly with an argument (slide number as integer), eg.

$("#slideshow").slidesjs("goto", intValue);

--
You received this message because you are subscribed to the Google Groups "SlidesJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to slidesjs+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
David Streever
Web Development

Cycling & Community

203/887-9207

[Nathan Searles]

SlidesJS 3 is written in CoffeeScript and minified using https://github.com/mishoo/UglifyJS.

Looking at yui minifier I'm not sure why it's throwing those errors.

Using http://www.jshint.com/ it gives some minor errors but nothing that yui is giving me.

[Nathan Searles]

Currently there isn't any public methods only because it become problematic and a block to completing SlidesJS 3. Public Methods may be added in the feature if I can figure out a solution that dosen't cause other issues.

[Kev]

Hi I cannot seem to add a new topic, don't want to clutter this post with it, my posts ar for some reason being accepted and then it seems instantly deleted?

Been working no problem till about an hour ago...

Cheers
Kevin

[Jonathan Motes]

It seems the slider doesn't seem to lazyload anymore. I noticed there isn't a preload option, so I assume it wasn't included. Any hope we'll get that back? Thanks!

On Friday, March 8, 2013 6:03:02 PM UTC-6, Nathan Searles wrote:

[Дмитрий Владимирович]

How can I add captions in SlidesJS 3! In previous version it was possible!

[Future Web]

Awesome work, thanks!

How do I link to a specific slide? In previous version it was easy: <a href="#3" class="link">3</a>

[ralphd...@gmail.com]

$('#slider).slidesjs({

width: 100,

height: 100,

callback: {

loaded: function(){

// Hide navigation and pagination

$('.slidesjs-navigation, .slidesjs-pagination').hide(0);

}

}

});

$('#slider').on('click', '#myOwnNavigation-First', function(e){

e.preventDefault();

$('#slider').find('.slidesjs-pagination li:first a').trigger('click');

return false;

});

$('#slider').on('click', '#myOwnNavigation-Prev', function(e){

e.preventDefault();

$('#slider').find('.slidesjs-previous').trigger('click');

return false;

});

$('#slider').on('click', '#myOwnNavigation-Next', function(e){

e.preventDefault();

$('#slider').find('.slidesjs-next').trigger('click');

return false;

});

$('#slider').on('click', '#myOwnNavigation-Last', function(e){

e.preventDefault();

$('#slider').find('.slidesjs-pagination li:last a').trigger('click');

return false;

});

[jo...@animalvolcano.com]

Has bigTarget been removed as a feature? I'm not a web developer and don't know how to adjust the code to move to the next slide when clicked. 

Thank you!

[Joshua McFarland]

For slower connections I found the preloadImage setting to be useful. Any simple way to handle this in the new version?

[Andrew Robinson]

I have just implemented (very easily, thankyou) SlidesJS 3 onto a site i'm working on, but there isn't a pause like there was in the old version, I would like people to be able to use the navigation and pagination, but after say 2000 of pagination/navigation not being clicked, to resume normal slideshow routine, is this possible? Thankyou.

[Thom van Ledden]

Does SlidesJS have a deconstructor? in my case i need to make new sliders everytime an user select a new item.
Removing the HTML does not deconstruct all the events created. So when a user does a lot of switches it might fill up the bucket...

Ty for any information on this subject

Op zaterdag 9 maart 2013 01:03:02 UTC+1 schreef Nathan Searles het volgende:

[Dan Svoboda]

I wanted to ask in the script what would I need to input into the code to make the slide show start up automatically again even after someone clicks on the navigation, For example, a user sees the slide show and it starts automatically, they click on the nav buttons and then it stays on that image. How would I tell the slide show to start the auto play after a few seconds?

  <script>
    $(function() {
      $('#slides').slidesjs({
        width: 387,
        height: 224,
        navigation: false,
        start: 1,
        play: {
          auto: true
        }       
      });
    });
  </script>

On Friday, March 8, 2013 6:03:02 PM UTC-6, Nathan Searles wrote:

[Andrew Robinson]

This needs to be implemented fast, it's the only bug/flaw with this slideshow plugin.

[Elena Meghdir]

Yes, I agree.  Our client is requesting the same functionality - that the slideshow auto restart after someone clicks on the navigation, but hasn't clicked in a while.  I've done a lot of searching and tried various suggestions, to no avail. I really want to make this work, rather than going to a new plug-in like Orbit (way too much for what our client's site needs).

Any help in this matter would be HUGELY appreciated!

[王賴]

Hi , Nathan,

May i know about how to set my own images on navigations?

I've seen these 2 line words on website.

previous button: class="slidesjs-previous slidesjs-navigation" next button: class="slidesjs-next slidesjs-navigation"

but, how to use?

Thanks for help^^

[Andy Lang]

I also kind of miss the bigTarget function. Is that something that will be added in the future?
Thanks, Andy

[vasanth kumar]

Hi,

The latest version of SlidesJS is not working in IE 10. Can any one help me..


Thanks in advance..!

[Jochem Geerdink]

I just checked this page in IE10:
http://slidesjs.com/examples/playing/

It worked fine for me.

What issue are you seeing?

[aung...@gmail.com]

Hi anyone,

I found one issue in IE 10. I want the auto play the slides. It is working fine. But i also want when the user click on image, the redirection will go to next window. All browsers are working fine except IE 10. After clicking the image, the auto play have been stopped and then cannot click navigation also. Please help me this issue. Thanks.

html

<div class="container">

    <div id="slides">

       <a href="http://www.google.com" target="_blank">  <img src="img/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/"></a>

  <a href="http://www.google.com" target="_blank"><img src="img/example-slide-2.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/"></a>

    </div>

  </div>

js --

 $('#slides').slidesjs({

        width: 940,

        height: 528,

        play: {

          active: true,

          auto: true,

          interval: 4000,

          swap: true

        }

      });

[Aung Mon]

Hi all,

Please help me. While i am using the autoplay and then click on image, the autoplay is stop and navigation also not working in IE 10. the other browsers are working fine. Thanks.Please help me.

On Thursday, July 25, 2013 4:12:29 AM UTC+8, Jochem Geerdink wrote:

[Aung Mon]

[Guik]

Hi
I have the same problem ? did you find a method or a soluce ? If yes could you share ?
Thanks

[Ben Owen]

I'm wanting to use thumbnails for navigation instead of the bullets, can somebody point me in the right direction?

[Edward Fung]

The hover pause is buggy. 

It works normally but if the mouse enters and leaves the slide div quickly, the slideshow will not pause and switch to next image instead.

Besides, is it possible to add my own mouse hover event while keeping the slidejs hover pause function?

On Saturday, March 16, 2013 2:55:17 AM UTC+8, Nathan Searles wrote:

Hover pause has been added! http://slidesjs.com/examples/playing/

Check out the play options at http://slidesjs.com/

On Monday, March 11, 2013 7:49:50 PM UTC-7, Andrew Weber wrote:

Ah yes, good idea. I used a timeout to make sure it didn't trigger the play button over and over again. Also wanted to wait a couple seconds so that it didn't immediately move to the next slide after. Here was my final code.

var sliderTimer;

$('#slideshow').on('mouseenter', function(e) {

clearTimeout(sliderTimer);

$('.slidesjs-stop').trigger('click');

}).on('mouseleave', function(e) {

clearTimeout(sliderTimer);

sliderTimer = setTimeout(function () {

  $('.slidesjs-play').trigger('click');

}, 2000);

});

On Monday, March 11, 2013 2:22:20 PM UTC-5, Nathan Searles wrote:

Hey thanks for the feedback. I'll look into adding that into the new version. For now it'd be pretty easy to do this with a little mouse enter/leave and a trigger click on the play/pause button.

On Saturday, March 9, 2013 1:02:39 PM UTC-8, Andrew Weber wrote:

What happened to hoverPause? :( Is there any way I can reproduce this? That was kind of key.

(Don't get me wrong - this is easily the best jQuery slider)

[Rohan Deshpande]

Just a note to anyone wanting to use their own pagination with the current version, it‘s pretty easy to get this working. This assumes all your slides are inside of a div with class ’slide'.

Here's a solution:

html

<ul id='slide-controls' class='cf'></ul>

slidejs

pagination: {active:true}

css

.slidesjs-pagination
{
    display:none;
}

custom js

$('.slide').each(function()
        {
            $('#slide-controls').append('<li></li>');
        });

$('#slide-controls li').each(function(index , item)
        {
            $(item).on('click' , function()
            {
                $('.slidesjs-pagination li a').eq(index).trigger('click');
            })

        });

[Leisure Yang]

It's useful,Thank you very much.Good job!

在 2013年3月9日星期六UTC+8上午8时03分02秒，Nathan Searles写道：

[Leisure Yang]

[Cookie]

Hey man~
When I use this plugin.
There have a problem to me. Sometimes the img disappear when play auto. I need to click the navi to active it.Like this:

[m.th...@meincms.ch]

Brilliant Work! 

by the way.. here is an easy way to attache arrow keys to the slider...

i didn't see this at the first glimpse, but it's quite nice to have it on.

$(document).bind('keydown',function(e){

if (e.keyCode == 37) { 

$('.slidesjs-previous').trigger('click');

}

if (e.keyCode == 39) { 

$('.slidesjs-next').trigger('click');

}

/* arrow keys:

37 - left

38 - up

39 - right

40 - down

*/

});

[Abhishek Sharma]

Slidesjs touch image swipe is not working in IE10. Can anyone reply asap.

[Michael Riley]

Does anyone have a solution for the problem of the images disappearing if the browser window is resized while the slideshow is mid-transition?

Thanks.

[Beto Torres]

It's happening to me too, but I noticed that when the next image slide comes in the slideshow behaves normally. I think this just happens while you are re sizing the window manually, once you let go the window it works ok.

[Ricardo Fraile]

I have the problem of images disappearing on iphone.

But for jump the problem (not fix it!), I create an other div previous the main <div id="slides"..> with a z-index inferior and I put on it the same content as the first slide. In the case of the white slide, now, you can see this previous div, which is the background of the id="slides" and is exact as the first slide.

Thanks, 

Regards Nathan, 

[Sheen Perkins]

Hello!

I have been receiving this error when I try to install your plugin:

The package could not be installed. No valid plugins were found.

Plugin install failed.

Please advise.

Thank you!
Sheen

[Jim Gergen]

Wow,

That's all I can think of.  No public methods.  Wow.

Had to drop this rabbit hole for a better solution.

http://css-tricks.com/anythingslider-jquery-plugin/

No public methods.  Problematic - wow.

On Wednesday, March 20, 2013 8:03:31 PM UTC-5, Nathan Searles wrote:

Currently there isn't any public methods only because it become problematic and a block to completing SlidesJS 3. Public Methods may be added in the feature if I can figure out a solution that dosen't cause other issues.

On Wednesday, March 20, 2013 10:16:33 AM UTC-7, David Streever wrote:

Darren, Lukas, apparently, we can use the goto method, but I can't find documentation on that. Christophe very helpfully gave me code which I've pasted below. Unfortuantely, I can't figure out how to implement it :( any ideas?

at the end of the plugin code just replace this:

return $.fn[pluginName] = function (options) {

        return this.each(function () {

        if (!$.data(this, "plugin_" + pluginName)) {

        return $.data(this, "plugin_" + pluginName, new Plugin(this, options));

        }

        });

        };

with this:

return $.fn[pluginName] = function (options) {

            if (typeof options === "string") {

                var args = Array.prototype.slice.call(arguments, 1);

                this.each(function () {

                    var plugin = $.data(this, 'plugin_' + pluginName);

                    plugin[options].apply(plugin, args);

                });

            }

            else {

                return this.each(function () {

                    if (!$.data(this, 'plugin_' + pluginName)) {

                        $.data(this, 'plugin_' + pluginName,

                new Plugin(this, options));

                    }

                });

            }

        };

now you can call the goto method directly with an argument (slide number as integer), eg.

$("#slideshow").slidesjs("goto", intValue);

On Tue, Mar 19, 2013 at 11:04 PM, Darren Wood <dar...@thefold.co.nz> wrote:

Hi,

Thanks for the great work on this script. In the older version it was very simple to include thumbnail pagination (like the Product example in the old version). How can I achieve this with the new version?

Thanks!

D

On Saturday, March 9, 2013 1:03:02 PM UTC+13, Nathan Searles wrote:

Hey y'all,

Thanks to everyone that helped test the SlidesJS beta!

SlidesJS 3 has been released and is available at http://slidesjs.com/.

Cheers!

--
You received this message because you are subscribed to the Google Groups "SlidesJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to slidesjs+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
David Streever
Web Development

Cycling & Community

203/887-9207

[Glaudston Soares]

This seems fair, but is it possible to make it so SlideJS adjust to the image height and width? I'm trying to SlideJS in a script that the size of the images are not constant, so depending on the size of the image the slider looks off, so maybe a width of 100% and a height of auto would be more flexible for something like this.. or if you have a better solution to solve my problem, I appreciate it.

Thanks!

On Monday, March 11, 2013 9:52:57 PM UTC-4, Nathan Searles wrote:

What it does is get the aspect ratio from the width and height. It was the simplest solution for setting the height based on what the width is. Because things need to be positioned absolute to make the slideshow work the elements then lose their height which in turn needs to be set using CSS.

When changing the browser size SlidesJS gets the new width and sets the correct height based on the aspect ratio and new width.

So for fluid layout just get the actual width and height of your images or width and height of your slide content and use that and SlidesJS will take care of the rest.

On Monday, March 11, 2013 6:30:50 PM UTC-7, Jules Mazur wrote:

Why is defining width mandatory now? My site has a fluid layout, do the `width` and `height` options accept percent, or just px?

[bachisio soru]

hi did you have a solution for the thumbnails?

best

[Wen Huang]

Does it support vertical slide scroll yet? 

[Denise Wong]

This was actually a very good snippet!  Do you know how to add a SELECTED state script, once a certain slide has been clicked on?

[Ines Katharina]

Hello

I do have the problem, that I added some vimeo videos with Iframe
But if I switch between the videos they won't stop and continue to play there sound in the background.
I want to know where I have to modify the code to get this fixed.
Thanks for your help

You can see the problem here

http://ineskatharina.de/Projekt5.html

[Colin Ryan]

For anyone with the issue of autoplay not working anymore after a pagination link is clicked, here's a solution with jQuery:

// Show the play/pause buttons first of all (I just hid them with css)

play: {

      active: true,

a.slidesjs-navigation {float: left; position: absolute; left: -9999px; visibility: hidden}

// Then listen for the complete callback and set a timeout to see if the slide hasn't moved (just set the timeout length for your normal slide delay)

callback: {

complete: function(number) {

$('.slidesjs-container').css({width:'100%',height:'500px'});

$('.slidesjs-control').css({width:'100%',height:'500px'});

setTimeout(function(number) {

var activeslide = $('.slidesjs-pagination').find('a.active').attr('data-slidesjs-item');

if (!$('a.slidesjs-playing').length && number != activeslide) // We don't want to skip ahead if the user has already migrated

$('.slidesjs-play').trigger('click');

}, 5000);

}

}

On Tuesday, August 6, 2013 7:11:34 AM UTC-4, Aung Mon wrote:

Hi all,

Please help me. While i am using the autoplay and then click on image, the autoplay is stop and navigation also not working in IE 10. the other browsers are working fine. Thanks.Please help me.

On Thursday, July 25, 2013 4:12:29 AM UTC+8, Jochem Geerdink wrote:

I just checked this page in IE10:
http://slidesjs.com/examples/playing/

It worked fine for me.

What issue are you seeing?

On Saturday, July 20, 2013 3:51:11 AM UTC-7, vasanth kumar wrote:

Hi,

The latest version of SlidesJS is not working in IE 10. Can any one help me..


Thanks in advance..!

[Colin Ryan]

Here's a more reliable version:

complete: function(number) {

if (window.sjstimeout != undefined)

clearTimeout(window.sjstimeout);

$('.slidesjs-container').css({width:'100%',height:'500px'});

$('.slidesjs-control').css({width:'100%',height:'500px'});

window.sjstimeout = setTimeout(function(number) {

if (!$('a.slidesjs-playing').length)

$('.slidesjs-play').trigger('click');

}, 5000);

}

[Charlene Slayton]

Upon resize the next image in the slideshow does not display. I think it might be a height issue.

[Federica Sfregola]

This is great!

I only wonder if there's any way to add captions to the slideshow? In particular, each image should have a different caption.

Thanks!

[Hadassa Golovenshitz]

Hi,

Thanks so much for this great plugin! Is there any way to lazy load images? We're using this on our homepage with about 20 images and I would love to cut the pageload time.

Thanks!

[Dennis Odavar]

Do you have a plan to include the preload option?