ページロード時にjQuery imgとテキスト操作を有効にする

Question

小さなブートストラップ3サムネイルテキストとimg操作をビルドしました。ページロード時にこれをアクティブにする方法についての質問があります。#anime1がアクティブになります。ページが読み込まれるとき。

これをチェックアウトするmanipulation例。私はそこに表示されているたくさんのサムネイルを見ることができますが、操作を操作すると、選択したnavbarタイトルの表示が必要なすべてが表示されます。

ページロード時にこれをアクティブにするにはどうすればよいですか？

$(function(){ 
    $('#anime1').click(function(){ 

     $('.column').each(function(){ 
      $(this).hide(500); 
     }); 
     $('.columns').each(function(){ 
      $(this).show(500); 

     $('#col1 img').attr('src', 'img/lazy1.png').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col1 h3').text('Grouting!'); 
     $('#col1 p:first').text('Grouting retention text will be displayed here!'); 

     $('#col2 img').attr('src', 'img/lazy1.png').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col2 h3').text('Grouting!'); 
     $('#col2 p:first').text('Grouting retention text will be displayed here!'); 

     $('#col3 img').attr('src', 'img/lazy1.png').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col3 h3').text('Grouting!'); 
     $('#col3 p:first').text('Grouting retention text will be displayed here!'); 

     $('#col4 img').attr('src', 'img/lazy1.png').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col4 h3').text('Grouting!'); 
     $('#col4 p:first').text('Grouting retention text will be displayed here!'); 

     $('#col5 img').attr('src', 'img/lazy1.png').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col5 h3').text('Grouting!'); 
     $('#col5 p:first').text('Grouting retention text will be displayed here!'); 

     $('#col6 img').attr('src', 'img/lazy1.png').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col6 h3').text('Grouting!'); 
     $('#col6 p:first').text('Grouting retention text will be displayed here!'); 
     }); 
    }); 

    $('#anime2').click(function(){ 
     $('.columns').hide(500); 
     $('.column').hide(500); 
    }); 
    $('#anime2').click(function(){ 
     $('.col4').show(500); 

     $('#col4 img').attr('src', 'img/lazy0.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col4 h3').text('Ground Improvements!'); 
     $('#col4 p:first').text('Ground Improvements text will be displayed here!'); 
    }); 

    $('#anime3').click(function(){ 
     $('.column').each(function(){ 
      $(this).show(500); 
     }); 
     $('.columns').each(function(){ 
      $(this).show(500); 
     }); 
     $('#col1 img').attr('src', 'img/lazy1.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col1 h3').text('Earth Retention!'); 
     $('#col1 p:first').text('Earth Retention retention text will be displayed here!'); 

     $('#col2 img').attr('src', 'img/lazy1.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col2 h3').text('Earth Retention!'); 
     $('#col2 p:first').text('Earth Retention retention text will be displayed here!'); 

     $('#col3 img').attr('src', 'img/lazy1.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col3 h3').text('Earth Retention!'); 
     $('#col3 p:first').text('Earth Retention retention text will be displayed here!'); 

     $('#col4 img').attr('src', 'img/lazy1.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col4 h3').text('Earth Retention!'); 
     $('#col4 p:first').text('Earth Retention retention text will be displayed here!'); 

     $('#col5 img').attr('src', 'img/lazy1.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col5 h3').text('Earth Retention!'); 
     $('#col5 p:first').text('Earth Retention retention text will be displayed here!'); 

     $('#col6 img').attr('src', 'img/lazy1.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col6 h3').text('Earth Retention!'); 
     $('#col6 p:first').text('Earth Retention retention text will be displayed here!'); 

     $('#col7 img').attr('src', 'img/lazy1.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col7 h3').text('Earth Retention!'); 
     $('#col7 p:first').text('Earth Retention retention text will be displayed here!'); 

     $('#col8').hide(500); 
    }); 

    $('#anime4').click(function(){ 
     $('.column').each(function(){ 
      $(this).show(500); 
     }); 
     $('.columns').each(function(){ 
      $(this).show(500); 
     }); 
     $('#col1 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col1 h3').text('Structural Support!'); 
     $('#col1 p:first').text('Structural Support text will be displayed here!'); 

     $('#col2 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col2 h3').text('Structural Support!'); 
     $('#col2 p:first').text('Structural Support text will be displayed here!'); 

     $('#col3 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col3 h3').text('Structural Support!'); 
     $('#col3 p:first').text('Structural Support text will be displayed here!'); 

     $('#col4 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col4 h3').text('Structural Support!'); 
     $('#col4 p:first').text('Structural Support text will be displayed here!'); 

     $('#col5 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col5 h3').text('Structural Support!'); 
     $('#col5 p:first').text('Structural Support text will be displayed here!'); 

     $('#col6 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col6 h3').text('Structural Support!'); 
     $('#col6 p:first').text('Structural Support text will be displayed here!'); 

     $('#col7 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col7 h3').text('Structural Support!'); 
     $('#col7 p:first').text('Structural Support text will be displayed here!'); 

     $('#col8 img').attr('src', 'img/lazy.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col8 h3').text('Structural Support!'); 
     $('#col8 p:first').text('Structural Support text will be displayed here!'); 

    }); 

    $('#anime5').click(function(){ 
     $('.column').hide(500); 
     $('.columns').hide(500); 
    }); 
    $('#anime5').click(function(){ 
     $('.col4').show(500); 

     $('#col4 img').attr('src', 'img/lazy0.jpeg').prepend('background-image', 'url(img/lazy.png)'); 
     $('#col4 h3').text('Additional Technologies!'); 
     $('#col4 p:first').text('Additional Technologies text will be displayed here!'); 
    }); 

}); 

サムネイル：

<div class="row"> 
    <div class=" col-xs-12 col-sm-12 col-md-8 col-md-offset-2 col-lg-12"> 
      <ul class="nav nav-pills"> 
       <li role="presentation"><a id="anime1" href="#">Grouting</a></li> 
       <li role="presentation"><a id="anime2" href="#">Ground Improvements</a></li> 
       <li role="presentation"><a id="anime3" href="#">Earth Retention</a></li> 
       <li role="presentation"><a id="anime4" href="#">Structural Support</a></li> 
       <li role="presentation"><a id="anime5" href="#">Additional Technologies</a></li> 
      </ul> 
    </div> 
</div> 

    <div class="row"> 
     <p style="padding: 10px;"></p> 
    </div> 

     <div class="row"> 
      <div id="col1" class="columns col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
       <div class="thumbnail"> 
        <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt=""> 
        <div class="caption"> 
        <h3 class="text-center">Text title, label, etc</h3> 
        <p class="text-center">descritpion here</p> 
        <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p> 
        </div><!--/ caption-end --> 
       </div><!--/ thumbnail-end --> 
      </div> 

      <div id="col2" class="columns col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
       <div class="thumbnail"> 
        <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt=""> 
        <div class="caption"> 
        <h3 class="text-center">Text title, label, etc</h3> 
        <p class="text-center">descritpion here</p> 
        <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p> 
        </div><!--/ caption-end --> 
       </div><!--/ thumbnail-end--> 
      </div> 

      <div id="col3" class="columns col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
       <div class="thumbnail"> 
        <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt=""> 
        <div class="caption"> 
        <h3 class="text-center">Text title, label, etc</h3> 
        <p class="text-center">descritpion here</p> 
        <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p> 
        </div><!--/ caption-end --> 
       </div><!--/ thumbnail-end --> 
      </div> 

      <div id="col4" class="col-xs-2 col-sm-2 col-md-2 col-lg-2 animate_col4"> 
       <div class="thumbnail"> 
        <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt=""> 
        <div class="caption"> 
        <h3 class="text-center">Text title, label, etc</h3> 
        <p class="text-center">Ovo ce da se animira za Additionl technologies.</p> 
        <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p> 
        </div><!--/ caption-end --> 
       </div><!--/ thumbnail-end --> 
      </div> 

      <div id="col5" class="columns col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
       <div class="thumbnail"> 
        <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt=""> 
        <div class="caption"> 
        <h3 class="text-center">Text title, label, etc</h3> 
        <p class="text-center">Ovaj ce da se animira za Ground Impovements!</p> 
        <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p> 
        </div><!--/ caption-end --> 
       </div><!--/ thumbnail-end --> 
      </div> 

      <div id="col6" class="columns col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
       <div class="thumbnail"> 
        <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt=""> 
        <div class="caption"> 
        <h3 class="text-center">Text title, label, etc</h3> 
        <p class="text-center">descritpion here</p> 
        <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p> 
        </div><!--/ caption-end --> 
       </div><!--/ thumbnail-end --> 
      </div> 

      <div id="col7" class="column col-xs-2 col-sm-2 col-md-2 col-md-offset-4 col-lg-2 col-lg-offset-4"> 
       <div class="thumbnail"> 
        <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt=""> 
        <div class="caption"> 
        <h3 class="text-center">Text title, label, etc</h3> 
        <p class="text-center">descritpion here</p> 
        <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p> 
        </div><!--/ caption-end --> 
       </div><!--/ thumbnail-end --> 
      </div> 

      <div id="col8" class="column col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
       <div class="thumbnail"> 
        <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt=""> 
        <div class="caption"> 
        <h3 class="text-center">Text title, label, etc</h3> 
        <p class="text-center">descritpion here</p> 
        <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p> 
        </div><!--/ caption-end --> 
       </div><!--/ thumbnail-end --> 
      </div> 
     </div><!--/ end thumbnai row --> 

Answer 1

ハンドラセレクタにトリガーを追加

$('#anime1').click(function(){ 
    //... all the code you have 
}); 

改定：

$('#anime1').click(function(){ 
    //... all the code you have 
}).trigger('click'); 

EDIT：コメントごとに変更されたコードを。コード

ノートの見直しこれのいくつかは好みであり、いくつかは、やり過ぎかもしれないと、私はそれぞれの変化に私の推論を置く：

• コードは、機能が、維持するために、痛みである可能性が高いですハードコードされたIDのために、コード内のマークアップと同じである必要があります。
• あなたはidを持たないSAMEマークアップを持つ8つの列をすべて使用し、クラスを使用して要素のコードターゲットを有効にすることができます。ここでの利点の1つは、リンクの実際の数は、テキストやイメージなどと同様に変化する可能性があることです。これは、abjectとして文書にプッシュされるか、またはajaxを使用して詳細を取得することができます。
• 私のレビューを簡単にするために、私が指摘したように5つの「グループ」しかないと仮定します。追加のリンクは、コードクライアント側から、またはサーバーから、あなたまで、それらの配列に追加することができます。
• サムネイルにハードコードされたコンテンツを置くのではなく、そのサムネイルをスクリプトから挿入して、その値をスクリプトでハードコーディングします。これは維持するのが難しいでしょう。

あなたのベースのマークアップの例：注記ここにはIDはありません。各の名前を持つ「」タグとdata-thing='にクラス：

<div class="columns col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
    <div class="thumbnail"> 
     <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt=""> 
     <div class="caption"> 
     <h3 class="thumbnail-head text-center">Text title, label, etc</h3> 
     <p class="thumbnail-desc text-center">descritpion here</p> 
     <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p> 
     </div> 
    </div> 
    </div> 

リンクは、物事のカップルを追加しました。このthingを使用して、JavaScriptオブジェクト配列を名前でターゲット設定します（それらを参照してください）。

<ul class="nav nav-pills"> 
    <li role="presentation"><a id="anime1" class="mylinks" data-thing="grout" href="#">Grouting</a></li> 
    <li role="presentation"><a id="anime2" class="mylinks" data-thing="ground" href="#">Ground Improvements</a></li> 
    <li role="presentation"><a id="anime3" class="mylinks" data-thing="earth" href="#">Earth Retention</a></li> 
    <li role="presentation"><a id="anime4" class="mylinks" data-thing="struct" href="#">Structural Support</a></li> 
    <li role="presentation"><a id="anime5" class="mylinks" data-thing="tech" href="#">Additional Technologies</a></li> 
</ul> 

これらはオブジェクトからも注入することができます。

ここにオブジェクトがあります。私は「myApp」で名前を付けました。このオブジェクトでは、私が使用するデータだけでなく、いくつかの機能を見ることができます。全体を通してのインラインコメントを参照してください。

// create my namespace, use any preexisting namespace by that name. 
var myApp = myApp || {}; 

たちの名前空間にいくつかの一般的な機能を追加し、当社の名前空間に

// This is the actual data object, it has some defaults that I use 
myApp.loadObject = { 
    defaultActiveLink: "grout", 
    animateHideDelay: 500, 
    animateShowDelay: 500, 
    defaultColumnCount: 8, 
    // array of "things" that we process (by name) 
    things: [{ 
    name: "grout",// used to lookup 
    linkText: "Grouting",// link text (if we wanted to inject it) 
    // array of links in THIS thing - we use these 
    columnData: [{ 
     "src": 'http://lorempixel.com/140/100/city', 
     "alt": "City", 
     "background": 'url(http://lorempixel.com/140/100/city)', 
     "headtext": 'Grouting0!', 
     "paragraphtext": 'Grouting 0 retention text will be displayed here!' 
    }, { 
     "src": 'http://lorempixel.com/140/100/city', 
     "alt": "City", 
     "background": 'url(http://lorempixel.com/140/100/city)', 
     "headtext": 'Grouting 1!', 
     "paragraphtext": 'Grouting1 retention text will be displayed here!' 
    }, { 
     "src": 'http://lorempixel.com/140/100/city', 
     "alt": "City", 
     "background": 'url(http://lorempixel.com/140/100/city)', 
     "headtext": 'Grouting2!', 
     "paragraphtext": 'Grouting2 retention text will be displayed here!' 
    }] 
    }, { 
    name: "ground", 
    linkText: "Ground Improvements", 
    columnData: [{ 
     "src": 'http://lorempixel.com/140/100/nature', 
     "alt": "Nature", 
     "background": 'url(http://lorempixel.com/140/100/nature)', 
     "headtext": 'Ground Improvements!', 
     "paragraphtext": 'Ground 1 retention text will be displayed here!' 
    }, { 
     "src": 'http://lorempixel.com/140/100/nature', 
     "alt": "Nature", 
     "background": 'url(http://lorempixel.com/140/100/nature)', 
     "headtext": 'Ground Improvements2!', 
     "paragraphtext": 'Improvements 2 retention text will be displayed here!' 
    }, { 
     "src": 'http://lorempixel.com/140/100/nature', 
     "alt": "Nature", 
     "background": 'url(http://lorempixel.com/140/100/nature)', 
     "headtext": 'Ground Improvements3!', 
     "paragraphtext": 'Ground 3 Improvements retention text will be displayed here!' 
    }] 
    }, { 
    name: "earth", 
    linkText: "Earth Retention", 
    columnData: [{ 
     "src": 'http://lorempixel.com/140/100/abstract', 
     "alt": "Abstract", 
     "background": 'url(http://lorempixel.com/140/100/abstract)', 
     "headtext": 'Earth1!', 
     "paragraphtext": 'Earth text will be displayed here!' 
    }, { 
     "src": 'http://lorempixel.com/140/100/abstract', 
     "alt": "Abstract", 
     "background": 'url(http://lorempixel.com/140/100/abstract)', 
     "headtext": 'Mother Earth!', 
     "paragraphtext": 'Mother Earth text will be displayed here!' 
    }, { 
     "src": 'http://lorempixel.com/140/100/abstract', 
     "alt": "Abstract", 
     "background": 'url(http://lorempixel.com/140/100/abstract)', 
     "headtext": 'Earthy!', 
     "paragraphtext": 'Earthy retention text will be displayed here!' 
    }] 
    }, { 
    name: "struct", 
    linkText: "Structural Support", 
    columnData: [{ 
     "src": 'http://lorempixel.com/140/100/cats', 
     "alt": "Cats", 
     "background": 'url(http://lorempixel.com/140/100/cats)', 
     "headtext": 'Stuctural!', 
     "paragraphtext": 'Structural retention text will be displayed here!' 
    }, { 
     "src": 'http://lorempixel.com/140/100/cats', 
     "alt": "Cats", 
     "background": 'url(http://lorempixel.com/140/100/cats)', 
     "headtext": 'Struct!', 
     "paragraphtext": 'Struct retention text will be displayed here!' 
    }, { 
     "src": 'http://lorempixel.com/140/100/cats', 
     "alt": "Cats", 
     "background": 'url(http://lorempixel.com/140/100/cats)', 
     "headtext": 'Struct Last!', 
     "paragraphtext": 'My Struct Last retention text will be displayed here!' 
    }] 
    }, { 
    name: "tech", 
    linkText: "Additional Technologies", 
    columnData: [{ 
     "src": 'http://lorempixel.com/140/100/food', 
     "alt": "Foody", 
     "background": 'url(http://lorempixel.com/140/100/food)', 
     "headtext": 'Tech!', 
     "paragraphtext": 'Tech Tech Tech text will be displayed here!' 
    }] 
    }] 
}; 

データを追加します。

// some generic functions to process my "object" not all these are used so you could clip it down a bit 
myApp.arrayObj = { 
    indexOf: function(myArray, searchTerm, property) { 
    for (var i = 0; i < myArray.length; i++) { 
     if (myArray[i][property] === searchTerm) return i; 
    } 
    return -1; 
    }, 
    indexAllOf: function(myArray, searchTerm, property) { 
    var ai = []; 
    for (var i = 0; i < myArray.length; i++) { 
     if (myArray[i][property] === searchTerm) ai.push(i); 
    } 
    return ai; 
    }, 
    lookup: function(myArray, searchTerm, property, firstOnly) { 
    var found = []; 
    var i = myArray.length; 
    while (i--) { 
     if (myArray[i][property] === searchTerm) { 
     found.push(myArray[i]); 
     if (firstOnly) break; //if only the first 
     } 
    } 
    return found; 
    }, 
    lookupAll: function(myArray, searchTerm, property) { 
    return this.lookup(myArray, searchTerm, property, false); 
    }, 
    remove: function(myArray, searchTerm, property, firstOnly) { 
    for (var i = myArray.length - 1; i >= 0; i--) { 
     if (myArray[i][property] === searchTerm) { 
     myArray.splice(i, 1); 
     if (firstOnly) break; //if only the first term has to be removed 
     } 
    } 
    } 
}; 

は、私たちの名前空間（も一つだけにいくつかのカスタム機能を追加... ）

// custom functions 
myApp.func = { 
    /* activate the default specified by name */ 
    setDefault: function() { 
    var activeDefault = myApp.loadObject.defaultActiveLink; 
    var defaultIndex = myApp.arrayObj.indexOf(myApp.loadObject.things, activeDefault, "name"); 
    defaultIndex = !!activeDefault ? defaultIndex : 0; 
    $('.nav-pills').find('.mylinks').eq(defaultIndex).trigger('click'); 
    } 
}; 

標準的なjQueryのものですが、これは私たちが呼び出すカスタム関数でなければなりません。 これは基本的にすべてのコードがやったことありません：

// process on click, injecting the appropriate text 
$('.nav-pills').on('click', '.mylinks', function() { 
    // hide using the default hide delay in the object 
    $('.columns').hide(myApp.loadObject.animateHideDelay); 
    var thingtype = $(this).data('thing');// added to the link 
    var thing = myApp.arrayObj.lookup(myApp.loadObject.things, thingtype, "name", true);//lookup by name 
    var columns = $('.columns');// all the columns 
    // process the links,showing them 
    $.each(thing[0].columnData, function(index, item) { 
    // cache to not do multiple DOM searches 
    var tn = columns.eq(index).find('.thumbnail'); 
    var cap = tn.find('.caption'); 
    tn.find('img.img-thumbnail').attr('src', item.src).attr('alt', item.alt).prepend('background-image', item.background); 
    cap.find('h3.thumbnail-head').text(item.headtext); 
    cap.find('p.thumbnail-desc').text(item.paragraphtext); 
    // show this one 
    $('.columns').eq(index).show(myApp.loadObject.animateShowDelay); 
    }); 
}); 

$(function() { 
    // activate the default specified by name 
    myApp.func.setDefault(); 
}); 

Answer 2

まあ、最も簡単なのは1は結合事象の後に準備ができて、文書内

$("#anime1").click(); 

だろうが、これは内容をアニメーション化します。

Answer 3

グローバルスコープ内で#anime1がクリックされたときに呼び出される匿名関数を移動し、名前を付けます。その後、ドキュメントの準備ができたらそれを呼び出します。

$(function(){ 

    $('#anime1').click(loadAnime1); 

    // Other click handlers 

}); 

function loadAnime1(){ 
    $('.column').each(function(){ 
    $(this).hide(500); 
    }); 
    $('.columns').each(function(){ 
    $(this).show(500); 

    $('#col1 img').attr('src', 'http://lorempixel.com/140/100/city').prepend('background-image', 'url(http://lorempixel.com/140/100/city)'); 
    $('#col1 h3').text('Grouting!'); 
    $('#col1 p:first').text('Grouting retention text will be displayed here!'); 

    $('#col2 img').attr('src', 'http://lorempixel.com/140/100/city').prepend('background-image', 'url(http://lorempixel.com/140/100/city)'); 
    $('#col2 h3').text('Grouting!'); 
    $('#col2 p:first').text('Grouting retention text will be displayed here!'); 

    $('#col3 img').attr('src', 'http://lorempixel.com/140/100/city').prepend('background-image', 'url(http://lorempixel.com/140/100/city)'); 
    $('#col3 h3').text('Grouting!'); 
    $('#col3 p:first').text('Grouting retention text will be displayed here!'); 

    $('#col4 img').attr('src', 'http://lorempixel.com/140/100/city').prepend('background-image', 'url(http://lorempixel.com/140/100/city)'); 
    $('#col4 h3').text('Grouting!'); 
    $('#col4 p:first').text('Grouting retention text will be displayed here!'); 

    $('#col5 img').attr('src', 'http://lorempixel.com/140/100/city').prepend('background-image', 'url(http://lorempixel.com/140/100/city)'); 
    $('#col5 h3').text('Grouting!'); 
    $('#col5 p:first').text('Grouting retention text will be displayed here!'); 

    $('#col6 img').attr('src', 'http://lorempixel.com/140/100/city').prepend('background-image', 'url(http://lorempixel.com/140/100/city)'); 
    $('#col6 h3').text('Grouting!'); 
    $('#col6 p:first').text('Grouting retention text will be displayed here!'); 
    }); 
} 

$(document).ready(function() { 
    loadAnime1(); 
})