vestride / shuffle Goto Github PK

So #24 doesn't happen to people.

Hi,

I'm trying to use Shuffle.js since a few days but I can't get what I want...
I have several images with differents sizes and formats and want all of them organized in a grid...

Here is a JsFiddle of my attempt : http://jsfiddle.net/xd5Ns/embedded/result/

As you can see there is some vertical gap between images...

What I'm doing wrong ?

Hello, how can I prepend blocks into the shuffle container?

This plugin looks awesome! But I'm looking a way to implement pagination. Is there an easy way to do this?

Hi,

I used your plugin and found out that the plugin assumes that jQuery is set to $. This gave issues with my current config as jQuery is not bound to $.

I would suggest that the plugin uses the jQuery keyword instead of the $ as that is more common, with noconflict configs.

So window.jQuery instead of window.$. What do you think? Good suggestion / issue?

(function (factory) {
  if (typeof define === 'function' && define.amd) {
    define(['jquery', 'modernizr'], factory);
  } else {
    factory(window.jQuery, window.Modernizr);
  }
})(function($, Modernizr, undefined) {

Otherwise thanks for this, isotope runs slow and this seems to better take advantage of the css3 transforms and such.

Cheers!

Kenneth

I just installed shuffle through bower, and I am loading it using requirejs.

I get the following error:

Uncaught TypeError: undefined is not a function jquery.shuffle.js:1211

The offending line reads: return this.each(function() {

Without reading anything else, I assume this should be return $(this).each(function() { correct? I am surprised I am the first to report this issue, so perhaps there is something else going on.

HI there,

I'm not sure if this is the right place to ask this question, but I wondered what I would need to do to turn of the 3d transforms.

I'm only using it as a filter. I'd like the results to just fade in and turn off the movement.

Is that possible?

Many thanks,

S

Hi,

I wonder if someone doesn't like to show all grids at fist view, but only the first category grids!
Is there a way to automatically active e.g. the first button on page load ?

Thanks for your awesome plugin

I cant get these two events to be fired. i've tried some console.log here and there but nothing.

So that I can stop getting questions like #5 #18 #22

Hi,
I found a small problem.
If quickly click on the filter buttons, the function is not working properly. This can be seen in your demo site.

_handleItemAnimationEnd : function( callback, item, willBeVisible, evt ) {
...
   if ( !willBeVisible ) {
      item.style.visibility = 'hidden';
    }
}

I have a grid of list items - some include longer text than others. My CSS uses floats and clears every 4th item. I'd prefer a consistent grid with some gaps where necessary, but shuffle.js enables a masonry effect which collapses the grid. Is there any way to disable this?

Many thanks.

I am replacing box content with fadeOut/fadeIn effect using shuffle.transition() with opt.opacity option.
Would be good to have an optional opt.transition_delay for shuffle.transition(), which sets the transition_delay on the element, restores option if the element is shuffle-item.

I used shuffle as a replacement for isotope in one of our theme, I noticed that it has been causing browser crash in ios devices only (ipad ,ipod and iphones). What might be the problem? Your help would be really appreciated.

Hi Vestride,

Can i use multiple selector in one filter?

is work!

var target = "HTML5"
$xxx.shuffle( 'shuffle', target );

but, Is it possible to use multiple selector ?

target = "HTML5,Flash,Red"
target = "HTML5,Flash"
target = "['HTML5','Flash','Red']"
target = "HTML5 Flash Red"
target = ?

Thanks!

Correct me if I am wrong. From what I've seen 'layout.shuffle' will only be triggered when 'shrink.shuffle' is triggered.

Is there a way to trigger 'layout.shuffle' manually even when 'shrink.shuffle' isn't triggered?

Thanks :)

Hi, currently I'm trying to use Shuffle with lazyload plugin (http://msjolund.github.io/autobrowse/), and I find some problems. Are there restrictions from shuffle use?

If css transform support is not available opacity is used to hide elements, unfortunately opacity is supported in ie since 9.

Hi,

First, congrats for your plugin !
I am having an weird issue, after I initilalize the plugins it adds a weird one pixel gap between my last set of thumbnails.

I've noticed that if I remove the vertical scrollbar from the browser with "overflow-y:hidden" then the gap disappear.This is happening just in Chrome, in Firefox works perfectly.
Any idea how can I fix this ?

I'm trying for hours to figure out how can I fix this...
Here is a link with a test page to see exactly what I'm trying to say.

Is it possible to make the columns centered inside main container?

Please check this demo in IE10 or IE11
http://vestride.github.io/Shuffle/bootstrap3-grid/

shuffle displays 2 columns instead of 3 defined with bootstrap classes

Thanks!

Hi.

We use a template which needs protoaculous.1.9.0.min.js to be loaded - but unfortunately the shuffle isn't working with it. When clicking on a filter the whole content container gets a display:none.

Any ideas how to fix that? We already use "noconflict", but it doesn't help...

All works, when we do not load the protoaculous-lib - but unfortunately this is needed. ;o)

When I update from 2.0.1 to 2.1.2, shuffle does not work properly: when I refresh the page all items are on the top left corner but if I resize the window or click on filters, any thumbnail goes to the right position. Here is the piece of code I am using in combination with waitForImages:

jQuery(document).ready(function ($) {

[other stuff...]

    var grid = $('.grid-items');

    function masonry() {

        grid.each(function () {

            var $this = $(this),
                filterOptions = $this.prev('.filter-options'),
                sizer = $this.find('.shuffle-sizer');

            $this.append(loader);

            $this.waitForImages({

                finished: function () {

                    $this.children('.landing-els').remove();

                    $this.shuffle({
                        itemSelector: '.item',
                        sizer: sizer,
                        speed: 500,
                        easing: 'ease-out'
                    });

                    if (filterOptions.length) {

                        var btns = filterOptions.children();
                        btns.on('click', function () {
                            var $this = $(this),
                                parentGrid = filterOptions.next(grid),
                                isActive = $this.hasClass('active'),
                                group = isActive ? 'all' : $this.data('group');

                            // Hide current label, show current label in title
                            if (!isActive) {
                                $('.filter-options .active').removeClass('active');
                            }

                            $this.toggleClass('active');

                            // Filter elements
                            parentGrid.shuffle('shuffle', group);
                        });

                        btns = null;

                    }

                    $this.removeClass('preload');
                    centerOverlay();

                },
                waitForAll: true
            });

        });

    }

    if (grid.length) {

        masonry();

    }

[other stuff...]

});

Any suggestion? Thanks ;)

I loaded a page with an element whose data value is 2072 and changed it to 2083. Then I went to sort, the breakpoint to get the data value in the sort function comes back as 2072 (unchanged). When I refresh the page, it then sorts correctly. How do I reload the values used for the sort without needing a page refresh?

I'm trying to achieve two things with this script.

1] Set the initialSort to title but without having any dropdown menu for users to pick a sort order.
Ideally the sort should always be in alphabetical order of titles according to what I define in the data-title.
So I've added the option:
itemSelector: '.item_artists', // the selector for the items in the grid
initialSort: 'title' // make the grid show artist items in alphabetical order
But I'm not sure how to add a method to make this work, without having a dropdown menu list.

2] Make all the grid items hide on initially loading the page.
Ideally when first loading page, just the filter menu list will display, then once a menu list is clicked the grid items/images will show.
Is this possible to do with ease?

Thanks for this script, it's really useful and fast.

Hello, excuse me i've tried to create gallery with shuufle plugin. . at single page it works fine
but when i insert it into wordpress it .. browser console show me error messages about $.fn ... then i replace all $. entries to jQuery. in shuffle.js file
it will work

can i force work that without change shuffle plugin

PS. thats i insert to wordpress theme

wp_enqueue_script('jquery-shuffle', get_template_directory_uri().'/js/jquery.shuffle.js',array('jquery'));

wp_enqueue_script('js-gallery', get_template_directory_uri().'/js/gallery.js',array('jquery-shuffle')); -- it's my file(customized example ) somwhere i change $ too

Is there a way to remove transform ? as this messes up the design if you are trying to add it to a curent project

Thanks

Hi,

I do some calculation on the body width where the items are placed inside.
Unfortunately your code gets executed before I've resized the body.

Can I trigger a new recalculation in shuffle manually?

e.g. $grid.shuffle('recalc')

Best, Gambo

I've been toying around with the shuffle.js and the viewport script that comes with the package, but haven't been able to get the functionality working properly. Any idea how you'd get something like this setup with the current scripts? Filtering and adding '.in' on those filtered elements can be done easily, but reseting when 'all' is filtered is the tricky part Im running into. I feel like viewport needs to be reset or re-evaluate the current filtered items in the viewport. I thought shuffle('update) + viewport.refresh() would do the trick, but it didn't.

Any advice?

Here's a screenshot of what I got after filtering by color and reducing the screen size.

Hello .. your script is absolutly great! I want use your demo-Script in combination with an simple Accordion-Script.

But the problem is that the itemSelector is "position:absolute" in your script and so my position:relative from the accordion script sont work!

If I overwrite the position:absolute it will be not correctly work.

Is there an option that I can temporary overweite the postion absolute in relative by clicking on the accordion or is there an optionen that the itemSelecor dont must be absolute?

My accordion are divs, that dont be inline or float. The divs are completly 100% width!

The Accordion-Script:
jQuery(document).ready(function(){
jQuery('.accordioncontentvk').hide();
var jQueryopenvk = jQuery();
jQuery('.accordionheadvk').click(function(e){
e.preventDefault();
jQueryopenvk.slideUp();
jQueryopenvk = jQuery(this).closest('div').find('.accordioncontentvk');
jQueryopenvk.not(':animated').slideToggle();
});
})

Thank You very much

Greetings Steffen

I'm trying to use this plugin with bootstrap 3 but after I click a filter button nothing happens.
I also get an JS console error : Uncaught TypeError: undefined is not a function and is pointing to these line: var debouncedLayout = $.throttle( 300, function() {....

The javascript code I used is the exact code from http://vestride.github.io/Shuffle/js/demos/homepage.js

This is the markup:

 <div class="container">
         <div class="filter-options btn-group">
          <button class="btn btn--warning active" data-group="wallpaper">Wallpapers</button>
          <button class="btn btn--warning" data-group="graphics">Graphic Design</button>
          <button class="btn btn--warning" data-group="photography">Photos</button>
          <button class="btn btn--warning" data-group="3d">3D Renders</button>
        </div>
        <div id="grid" class="row">



        <figure class="col-sm-4 picture-item" data-groups='["photography"]'>
        <img class="img-responsive" src="http://placehold.it/400x300" alt="img01"/>
        <figcaption>
            <h2>Nice <span>Lily</span></h2>
            <p>Lily likes to play with crayons and pencils</p>
            <a href="#">View more</a>
        </figcaption>         
    </figure>

     <figure class="col-sm-4 picture-item" data-groups='["photography"]'>
        <img class="img-responsive" src="http://placehold.it/400x300" alt="img01"/>
        <figcaption>
            <h2>Nice <span>Lily</span></h2>
            <p>Lily likes to play with crayons and pencils</p>
            <a href="#">View more</a>
        </figcaption>         
    </figure>


     <figure class="col-sm-4 picture-item">
        <img class="img-responsive" src="http://placehold.it/400x300" alt="img01"/>
        <figcaption>
            <h2>Nice <span>Lily</span></h2>
            <p>Lily likes to play with crayons and pencils</p>
            <a href="#">View more</a>
        </figcaption>         
    </figure>

         <div class="col-sm-4 shuffle__sizer"></div>   

Here is a jsfiddle with all the code. The same error...

Hi,

Why might I have to destroy and enable shuffle in IE8 after it's initial setting in order to get it to layout properly?

    var shuffleItems = $(".boxes"), shuffleSizer = shuffleItems.find('.shuffle-sizer');

    shuffleItems.shuffle({
      itemSelector: '.box',
      sizer: shuffleSizer,
      gutterWidth: 0
    });

    if(ie==8) {
      setTimeout(function () {
        shuffleItems.shuffle('destroy').shuffle();
      }, 100);
    }

This works, but obviously results in a small flash of the bootstrap grid, smushed into the corner, then laid out properly. IE9 is unaffected.

I was wondering if there was anyway to deep link into a page that has a Shuffle grid to a specific filter.

i.e. from home page click on a submenu for Wallpaper and link into the shuffle page and have only the wallpapers showing?

Thanks!

Right now opt.callback is limited only for opts.from === 'layout' and opts.from === 'shrink'.
I am using opt.from optionally to describe my action, but I would like to do some actions after the transitions end.

$grid.shuffle.transition({
    from: 'fadeOut',
    $this: $current,
    opacity: 0,
    callback: appShuffle.testCallback
})

// Example:
$grid.shuffle.transition({
    from: 'fadeOut',
    $this: $current,
    opacity: 0,
    callback: function() {
        $grid.shuffle.transition({
            from: 'fadeIn',
            $this: $current.html($(box).html()),
            opacity: 1
        });
    }
})

Are layoutTransitionEnded and callback.call() limited intentionally?

// Changes - move callback.call outside if {}
complete = function() {
    if (!self.layoutTransitionEnded && opts.from === 'layout') {
        self._fire(Shuffle.EventType.LAYOUT);
        // 
       // opts.callback.call(self);
        self.layoutTransitionEnded = true;
    } else if (!self.shrinkTransitionEnded && opts.from === 'shrink') {
        self.shrinkTransitionEnded = true;
        // 
       // opts.callback.call(self);
    }
    // This is the new line
    opts.callback.call(self);
};

Hi,

I add dynamically items from ajax.But my item's transfrom style is not updated ( webkit-transform: translate3d(0px, 0px, 0px)).

How can I update item's inline style and trigger shuffle ?

Thanks.

On ie9 i have hidden elements on top of visible ones, wouldn't make sense to play with z-index or set them display: none to avoid this kind of issues? On decent browsers of course it works fine :)

Hi Glen. I am just looking into your plugin and really like it.

Have you thought about adding bower.json and a version without Modernizr for easier workflow?

I found this error TypeError: b.prefixed is not a function on minified version, error occur when the jquery.shuffle.min.js is included in the script

Hi there!

What a nice work you've done. First of all, thank you!

Second, I've been trying to put the images close together, without a gap between them. Is that possible?

Thank you and best regards,

Jullie

Hi Glen,

I replaced my previous implementation of Isotope with Shuffle.js because the better performance of the latter. Everything has been working great except for one small issue.

The problem is that the height of the page does not adapt to the reduced height of the #grid container after filtering, making the body extend below the footer:

As I did have this problem with Isotope I don't think its a problem with the CSS. However, I am not a web developer, and I might be wrong of course.

Any suggestions that might point me into the right direction are highly welcome!

Cheers,

Stefan

Everything works beautifully in 2.1.1. I'm testing by using the same layout, same JS code and just switching between release 3.0.0 and 2.1.1:

$('.properties-listing-container').shuffle({
itemSelector: '.property-listing',
columnWidth: 300,
gutterWidth: 20
});

Container is a div with article-elements inside. Article has fixed width of 300px.

v2.1.1 works correctly:

v3.0.0 won't update until around 1160px container width, which results in cutting the last element. Also note the behaviour on second line.

Same thing happens in FF (33) and Chrome on Ubuntu 14.04. Also witnessed on Mac by other devs in my team.

I find the text filter on the demo really helpful. Other than that, what are the other differences with isotope that one should consider?

Hi there,

When you load the example page (http://vestride.github.io/Shuffle/) in the latest version of Firefox it sometimes doesn't load correctly, like so:

I've noted three things about this behavior so far you might find useful:

1. When it doesn't work on page load, clicking a toggle filter or sort button will trigger the grid elements into place.
2. It will sometimes work on page load if you keep refreshing the page.
3. The dates features on the grid element images shoot to the upper right of the window when it doesn't work (as seen in the image above)

I have created this theme and as you can see in screenshot items overlaps when we opens the page for first time or refresh, it get back to normal if we perform filtering function once.

here is the link to working demo: http://thecodeblock.com/wp-content/uploads/themes/deep-purple/

Thank you :)

Hi, I see the example (http://vestride.github.io/Shuffle/adding-removing/). I'm very hookie with javascript. Exist some method to make jquery.shuffle plugin randonize automatically every time I visit the page and every page refresh? How can I do that? Thanks

The javascript lib is not compatible with bootstrap v3.
Using following code the grids are positioned above each other.

jQuery(document).ready(function() {
  var $grid = jQuery('.row'),
      $sizer = $grid.find('.shuffle__sizer');

  $grid.shuffle({
    itemSelector: '.post-grid', //<div class="post-grid col-xs-12 col-sm-6 col-md-4 col-lg-4">
    sizer: $sizer
  });
});

Regards,
Ninos

Hello Vestride,
I tried several attempts but didn't succeed in integrating multiple instances of Shuffle in the same page... I'd like to use 1 instance per carousel slide, as I did with Masonry but as I need filters, I thought your solution was better.
You can see a live example here : http://www.elodesign.com/test/new_elodiefrigot/galerie_test.html
Thx for your help

Just looks all messed up. Simple fix?