Code

Discussion on Ether Grid Slider jQuery Plugin

Discussion on Ether Grid Slider jQuery Plugin

By
Cart 232 sales

onether supports this item

Supported

25 comments found.

Is this compatible with Shopify? Can I add it as codes into the .liquid files or as a file in the Admin?

demo not working

Fixed, thanks!

1. This is supposed to be responsive. In my experience, if you have for instance, six items to slide and they all show on the screen when you arrive on a page, your navigation still appears. This includes a square for pagination which they will not recognize as such and all of this is over top of content. This confuses a visitor into thinking it should slide for more items when in fact, there aren’t more items to slide.

2. If the above 6 items all show on the page as described on arrival, then I re-size the browser, less items will show in a responsive way, correctly. Unfortunately, at this time scrolling will not work to view the other items. Scrolling will only work when you re-size the browser if all items did not show when arriving to a page.

3. When sliding to the last item and not looping, the next button still functions for me / doesn’t hide or grey out. This will make a visitor try it several times while wondering if they are missing more content.

For these reasons, IMO this slider has a very low usability and could easily cause a loss of sales with product sliders.

Scratch the loss of sales. That was referring to a #4 that I removed and now I can’t edit. I hope these things are easy to fix. This item would be very useful to me. :/

re 2. Hmm, slider buttons should work correctly in this case, it was tested against it, can you check if you get any console errors?

These are all valid points, thanks for bringing them up to my attention, they will be taken care of shortly.

thats great news. I will respond about number two in the kind email you sent me.

This library DOES NOT support IE8 as it says it does. I can confirm that several pieces of the code are breaking in IE8. I assume this would be the same or worse in IE7

That’s a bug then,

We handle bug reports via email exclusively – Please email us according to the guide here – http://ether-wp.com/ether-builder/support and we’ll have a look,

Can you please bump this up via email, I’ll have a look shortly and will get back to you in case if in need of any specifics

hi por! I tracked down the issue – I think. Looks like IE8 is bugging out on the Array.forEach() loops – I added this code to the beginning of the script after doc ready to fix it:

if (!Array.prototype.forEach) { Array.prototype.forEach = function (fn, scope) { for (var i = 0, len = this.length; i < len; ++i) { fn.call(scope || this, this[i], i, this); } } }

Hey,

Just letting you know the fix for this issue is already applied and will be included in an official > 1.7.7 releases ;-)

Five stars of excellence for this well designed plugin! :)

Hi,

Its is great jQuery library which made my life is easy.

I got an issue which I’ve been struggling to fix.

Probably it is a bug on JS file.

Below is the issue.

When i pass scroll_axix: x and transition: slide and when i press prev/next from the controller on browser a horizontal scroller appears width of the hidden content area.

I’ve checked on your examples as well, its seems to be the same.

Please assist me on this

Many Thanks

Really, love it! :) Thank you!

Can you customize the grid layout? size/width/column/row of the galleries for example?

Fixed. This slider was exactly what I needed and my issue was resolved so quickly! Thanks again!!!

Thanks so much for your quick reply earlier and for a great slider. I hope you can help me again with a couple more questions: When I set ‘ctrl_arrows’ and ‘ctrl_pag’ to false my slideshow no longer autoplays – how can I fix this?

Also is it possible to use my own custom controls to change slides for the previous and next slides? I know the example shows how to link external controls to specific slides (1,2,3, etc.) but I would like to just have a custom left control and custom right control that I create to change slides…

Thanks again :)

Can I just say I love you? Thanks :bigsmile:

Hello,

I’m not sure what I am doing wrong but I just can not get this slider to work. I am new to JavaScript -can you tell from my code what the problem is? Here is the head:
<head>
<meta charset="utf-8" />
<title>N Designs</title>

<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="js/gridslider/gridslider.css">
<!--[if lt IE 9]> 
<script src="js/html5shiv.js"></script>
<![endif]-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/gridslider/gridslider.js"></script>

<script type="text/javascript">
$(document).ready(function () {

$('.slider').gridslider({
    cols: 3, 
    col_spacing_size: 2,
    rows: 1,
    scroll_speed: 1000,
    grid_height: 'constrain'
    });
});
</script>

</head>
and the code for the slider:
<div class="slider">
        <img src="images/tre.jpg" title="Robert Ford Artist Portfolio" />
        <img src="images/catering.jpg" title="Send-A-Chef Catering" />
        <img src="images/metis.jpg" title="Metis Medical Management" />
        <img src="images/carey.jpg" title="Carey Painting" />
</div><!--end slider-->

Thank you!

Hey,

Try changing gridslider to gridSlider so that: $(’.slider’).gridslider becomes $(’.slider’).gridSlider

That should do the trick. ;-)

I also would like to ask you for the Clients example code please.

my e-mail: potosinachilanga@gmail.com

Sent you a notification about new Ether Grid Slider available. It comes with several predefined examples including two versions of clients slider! ;-)

Wow, that was fast! Thank you! :bigsmile:

Can you provide the code for the first “Clients” example? I thought the included docs would include the code for all the examples.

Done! ;-)

I am at a lost (pardon my ignorance). most JS files I have bought via CC come with detailed instructions. I am not saying your file does not, but I cant follow them.

It seems relatively simple as far as adding the the details to the head tags, creating the directory within the site files. Adding JS 1 .7.1 to my JS folder

Its where to add the rendering files for the JS, am I adding them in the head tag or within the DIV for the client banner

What do I add for the client banner also, I see you don’t have an example of that (where I would just copy and past the script code)

I have added tons of JS to other sites before, just cant seem to figure this one.

I am defiantly sure I have created the directory to add the gridslider details, I have correctly added the path as instructed ion the Head Tag … I have added JS 1 .7.1to my JS folder (I am using the min version, I am sure that aint the issue) ....

I am trying to add the client slider like you have in the example … but the images are all just formed in a UL on my page.

Hey,

Do you have some live example so that I can look at it and give you some guidance? I’d love to help you out with this asap!

PS. Email me at contact.pordesign@gmail.com, this way I’ll will respond waaaay much faster! ;-)

How can i make buttons prev/next disabled when you are in first/last slide?

At the moment you can’t since the default behavour of the slider is to loop indefinitely

However, I see an update coming out pretty soon that will include such option ;-)

I like the look of this but is there iPhone / Android touch capabilities coming at any point?

Coming soon ;-)

Would it be possible to nest one slider within another? Take your classic slider or image feed as an example. Let’s say I have some extra info about a particular photo that’d I’d like to display and to access it the user could scroll up/down – sorta like a vertical slider within each column.

Grid Slider does not interfere in any way with items it is applied to so if you’re asking about 3rd party code then yes.

Additionally we have GridSlider nesting compatibility on our product roadmap in the near future so eventually you will be able to nest grids one in another ;-)

You might consider releasing this as an add-on for your ether builder plugin. It would be great to have this available in the drag and drop content builder for WP.

We will be integrating it in one of upcoming Ether Builder updates ;-)

Great plugin. I too, would purchase this immediately if this was made available as a WordPress Plugin :)

Presumably it will be available both as a standalone WP plugin and integrated with Ether Builder in near future! ;-)

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