a little js help

[Ginger-Menace]

Hi everyone,

I need some help if you would.

i have this code:

Spoiler: code

<div class="row">
<div class="box">
<div class="col-lg-12">
<hr>
<h2 class="intro-text text-center">Examples of recently completed orders.</h2>
<hr>
<cms: pages masterpage='example-gallery.php' folder='example-image-on-main-page' include_subfolders='0' limit='4' >

<div>
<div class="col-xs-12 col-sm-3 col-md-3 instagram "><a href="<cms:show gg_image />" data-fancybox="instagram" data-caption="<cms:show k_page_title />" data-title="<cms:show k_page_title />" target="blank" alt="instagram image"><div class="img-featured-container"><div class="img-backdrop"></div><div class="description-container"><p class="caption"><cms:show description/></p></div><img src="<cms:show gg_thumb/>" class="img-responsive" alt="instagram image"></div></a></div>
</div>
</cms: pages>

<button id="btn-instafeed-load" class="btn">Load more</button>

</div>
</div>
</div>

im no good at js but im trying to learn!
i need some js that when the button is clicked at adds '4' to the limit (so 4,8,12.....)

Here is the code i have

Spoiler: js code

<script>
document.getElementById("btn-instafeed-load").addEventListener("click", myFunction);

function myFunction() {
document.getElementsByTagName("limit").+4;
}
</script>

The purpose of this is the code in the first spoiler displays 4 cloned images.
what i want is when the button is clicked to change the 'limit='4' to limit='8' and so on.
is this possible?

GM

 

[touch]

I would think that this section:
<cms: pages masterpage='example-gallery.php' folder='example-image-on-main-page' include_subfolders='0' limit='4' >
Is going to be executed server-side where it'll go and get the 4 images and create some html which gets sent to your browser along with all the other html for the page. Effectively, that bit of code no longer exists once the page reaches your browser (where the js runs) so you cant interact with that from js.

The simplest way to do this would be to set the limit to the max you want and then use js to hide them from the page and show 4 more each time the button is clicked. This is pretty much pointless because the idea of loading a few at a time is to reduce the initial page load time.

The correct way to do this is to create a page with nothing on it except the next 4 images then use ajax to load that page into your main page each time the button is clicked.

 

[Ginger-Menace]

thanks for the reply, i had more of a look around and one of the developers of the cms has a solution and i now have it working