ランダム画像グリッドの問題

Question

私は画像グリッドを作成しました（主にブートストラップを使用しています）、そのグリッド内に5行の画像が3行あります。私はそれらを1つの時間にランダムにロードしたいと思いますが、すべてのイメージが使用されるまで繰り返しません。私はこの時点で32の画像の配列を持っています。

私は現在のコード（http://codepen.io/msbtterswrth/pen/MyZXZQ?editors=0010）でテストケースを作成しましたが、そこにはいくつかの注意点があります。発生した後、すべての画像が同一の画像に表示されます（理由はわかりません）。ただし、次の行を変更した場合は動作しますが、頻繁に繰り返されます。

var random_no = Math.floor(Math.random()*32)+1 

へ

変更この

var random_no = Math.floor(Math.random()*total_images)+1 

私はジャバスクリプト/ jqueryのではそれほどよくないと私はきたあらゆる種類のものをしようと最後の2日間を費やしています私が達成した最も近い解決策です。

編集：私はあきらめました。今これを使用して、いくつかのjsはそれの上にタイトルを配置します。 http://tympanus.net/Development/AnimatedResponsiveImageGrid/index2.html

まだまだ答えに興味があり、今後の参考にしてください。

Answer 1

あなたは私が検出された問題があり、このバージョンでテストすることができ、その時々thisオブジェクトを繰り返すと、それは同じ画像のSRCを変更...

setInterval(function() { 
    var $flippers = $("section.culture img"), 
    qtFlippers = $flippers.length; 

    $flippers.eq(Math.floor(Math.random()*qtFlippers)).randomize({ 
     path : 'http://centretek-drupal.centreteksolutions.net/sites/default/files/images/culture-' 
    }); 
}, 500); 


/*jQuery RANDOMIZER*/ 
(function($){ 

    $.fn.randomize = function(options){ 

    var new_src, 
    settings = $.extend({ 
       path : 'http://centretek-drupal.centreteksolutions.net/sites/default/files/images/culture-' 
      }, options); 
    count = 0, 
    src_storage = []; 

    /*this.each(function(){ 
     total_images = get_prop($(this)); 
    });*/ 


     return this.each(function(){ 
    new_src = generate_src(); 
    //console.log($("img")[1].src); 
    for(i=0; i<$("img").length; i++){ 
     if($("img")[i].src == new_src){ 
     //if(document.getElementsByTagName("img")[i].getAttribute("src") == new_src){ 
      new_src = generate_src(); 
      i = 0; 
     } 
    } 
    this.setAttribute("src",new_src); 
}); 

    // function to check for images that maybe repeated . 
    /*function get_prop(current){ 
     var current_src = current.attr('src'); 
     if ($.inArray(current_src , src_storage) === -1) { 
      src_storage.push(current_src); 
     } 
     return src_storage.length; 
    }*/ 

    //function to generate a random number 
    function generate_random(){ 
     var random_no = Math.floor(Math.random()*32)+1 
     return random_no; 
    }; 

    // function to generate a new src for the selected images 
    function generate_src(){ 
     var store_random = generate_random(), 
      new_src; 
     if (store_random >= 10) { 
      new_src = 'http://centretek-drupal.centreteksolutions.net/sites/default/files/images/culture-' + store_random + '.jpg'; 
     } else{ 
      new_src = settings.path + store_random + '.jpg'; 
     } 
     return new_src; 
    } 
    } 

}(jQuery));