I'm wondering if there is a way to alter the script that the initial images that are shown before the rotation begins are NEVER re-used. Basically, I want to show the grid as a single cohesive image of tiles that makes up a picture, then have those images rotate to other images, but not using the originals again. Any ideas?

Hi,

Thanks for the great plugin.

Is it possible to rotate the images in a random order (instead of in order currently), but also making sure 2 of the same images are never pulled at the same time?

Could you point me the code where i can make changes to achieve that? I just need to know how to edit the existing code to pull the images randomly.

Thanks,

Is there a way to add an onhover hook?
For example, I want to overlay some text on an image on a onhover - instead of an animation.

Hi,
I want to create a button for enabling/disabling gridrotator effect. I tried with return false but doesn0t work:

$("#Enable").click(function(){
    $( '#ri-grid' ).gridrotator();
});

$("#Disable").click(function(){
    $( '#ri-grid' ).gridrotator(return false);
});

Thank you so much for help!

ps. I opened a question on Stackoverflow: http://stackoverflow.com/questions/22119094/how-to-disable-or-destroy-a-jquery-plugin-function

Whilst implementing this, my version was showing blanks.
When embedding the example, the issue didn't occur.
To eliminate the options being an issue, I tried using the initiation code for the example on my version and vice versa.
It was still my version that had the issue, so it must be the HTML markup.
Increasing the number of images seemed to help, but duplicating the markup, meant duplicates displayed at the same time.

My workaround is as follows...

window.setInterval(function(){
checkMissingImage();
}, 100);

function checkMissingImage() {
"use strict";
jQuery( "#ri-grid ul li a" ).each(function() {
if (jQuery(this).css('background-image') == "none" ) {
jQuery(this).css('background-image', 'url(img/reserve.png)');
}
});
}

It's probably not very efficient, but hopefully someone might find this useful or provide a better solution.
I've excluded the reserve image from the HTML markup to avoid duplicates.

When turning a iPad from landscape to portrait (or vise vera) the grid don't get resized.
It looks like there is nobody listening to the correct event.
Any hint of how to fix this?

when I scroll the box on iOS the animation is interrupted

this shouldn't be hard coded, let user define his cursor (line 312) :

this.$items.children().css( 'cursor', 'default' ).on( 'click.gridrotator', false );

How can I use 3 different grids on the same page (multiple instances of #ri-grid1 #ri-grid2 #ri-grid3)

Hey, maintainer(s) of codrops/AnimatedResponsiveImageGrid!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library codrops/AnimatedResponsiveImageGrid is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "codrops/AnimatedResponsiveImageGrid",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

"onhover:true" does not make sense if we use , instead the animation should happen when user exits the grid.

Again (line 364) shouldn't hardcode the 'mouseenter' event.

as a workaround use :
self.$items.on( 'mouseleave.gridrotator', function() {

Anyone have any workarounds?

Hi,

I had to spend a lot of time to make it work. In the end I learned this:

1:
In the javascript file, there was this set of options like:
w1024 : { rows : 3, columns : 8 },

For a screen resolution greater than 1024, unless I have number of images that can fill 3 rows completely, the script won't be shuffling the images.

I changed it to:
w1024 : { rows : 1, columns : 6 },

2:
Columns above is set to 6. If I add 6 or less images, it won't shuffle images. At least
one extra image needs to be added for it to work.

Am I right?

We love the grid rotator but are having some issues with images being constantly requested over and over each time they are rotated in.

I'm not seeing similar behavior in the demos so I must be doing something wrong.

You can see working version of what we're struggling with at https://dev.nodeping.com/index4

Any help you can offer would be greatly appreciated.

Thanks.

change
p = Math.floor(Math.random()*this.length);
to
p = Math.floor(Math.random()*a.length);

Thank's

Fade effect not work in firefox 34.0.5 but work fine in chrome.

I'm trying to add more images in runtime. I have tried to replace the image src attributes at runtime, but it doesn't replace it. It seems that it's actually cloning the object. Only way I was able to do is to add new 'li' element and call .gridrotator() again, but the transition is not smooth.

Any suggestion ?

Something seems to be up with the random function and it means that the first image never switches when step equals 1.

Hi, could you please please let me know how to adjust the rows and columns. All my changes to the rows and columns settings seem to get ignored no matter what i do.
I added w1920 : { rows: 6, columns: 8 } but I'm stuck with 4 rows and 8 columns and a blank space.
Thanks for the plugin. I really feel bad asking for more, but i've been cracking my head and can't find a solution

Get project, thank you. I made a Drupal 8 module that makes a page with it and it works great.

The nochange property does not seem to work for me though. How should it be formatted and in what tag should the id go to - li, a, or img?

Thank you.