Attivare jQuery img e manipolazione del testo al caricamento della pagina

Question

Ho creato un piccolo testo di avvio 3 miniature e manipolazione img, ora ho una domanda su come renderlo attivo quando il caricamento della pagina, per essere specifico vorrei che fosse #anime1 attivo quando la pagina viene caricata.

Dai un'occhiata a questo esempio manipulation. Vedrai che ho un po 'di miniature che mostrano solo lì, ma quando interagisci con la manipolazione mostrerà tutto ciò che devi vedere per il titolo selezionato navbar.

Quindi, come posso rendere attivo il caricamento della pagina?

$(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!'); 
    }); 

}); 

Miniatura:

<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

Appendi un trigger per il selettore gestore

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

revised:

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

EDIT: il codice modificato per un commento. Una revisione del codice

Si noti che alcune di queste è la preferenza e alcuni potrebbero essere eccessivo, mi metterà il mio ragionamento su ogni cambiamento:

• Il codice è funzionale, ma che possa essere un dolore per mantenere a causa degli ID hard codificati che devono essere uguali in markup come nel codice.
• È possibile utilizzare semplicemente 8 colonne tutte con il markup SAME senza id, utilizzando le classi per abilitare il targeting per codice degli elementi. Un vantaggio qui è che il numero effettivo di collegamenti potrebbe variare così come il testo, le immagini, ecc. Questo potrebbe essere spinto nel documento come un abject o usare ajax per ottenere di più.
• Per semplicità della mia recensione, assumerò che ci siano solo 5 "gruppi" come indicato. Link aggiuntivi possono essere aggiunti alla matrice di quelli dal lato client del codice o dal server, fino a te.
• Anziché avere contenuti codificati nelle miniature che si sta iniettando dallo script, codificare in modo rigido quei valori nello script. Questo sarà difficile da mantenere.

Esempio di marcatura colonna basato sul tuo: NOTA Nessun id è qui.

<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> 

Links, ha aggiunto un paio di cose: una classe al 'un' tag e data-thing=' con un nome di ciascuno. Useremo questo thing per selezionare come target un array di oggetti JavaScript (cercandoli).

<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> 

Nota questi potrebbero essere iniettati dall'oggetto pure.

Ecco l'oggetto. Lo chiamo distanziato con "myApp". In questo oggetto puoi vedere i dati e alcune funzioni che uso. Vedi i commenti in linea in tutto.

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

aggiungere dati al nostro namespace

// 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!' 
    }] 
    }] 
}; 

aggiungere alcune funzioni generiche al nostro spazio dei nomi:

// 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 
     } 
    } 
    } 
}; 

aggiungere alcune funzioni personalizzate al nostro namespace (bene solo uno ...)

// 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'); 
    } 
}; 

roba standard di jQuery, questa potrebbe essere una funzione personalizzata che chiamiamo pure. Questo fa sostanzialmente quello che ha fatto tutto il codice:

// 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

Beh, la più semplice sarebbe

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

nel documento pronto dopo gli eventi di legame, ma questo sarebbe animare i contenuti.

Answer 3

Sposta la funzione anonima chiamata quando #anime1 fa clic sull'ambito globale e fornisce un nome. Quindi chiamalo su documento pronto.

$(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(); 
})