PetarP PetarP - 7 months ago 6
HTML Question

Activate jQuery img and text manipulation on page load

I have build a small bootstrap 3 thumbnails text and img manipulation, now I have a question on how to make this active when page load, to be specific I would like that

#anime1
be active when page loads.

Check out this manipulation example. You will see that I have a bunch of thumbnails just displaying there, but when you interact with manipulation it will display everything you need to see for selected
navbar
title.

So how can I make this active on page load?

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

});


Thumbnail:

<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

Append a trigger to the handler selector

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

revised:

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