1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

a little js help

Discussion in 'HTML, Graphics & Programming' started by Ginger-Menace, Jan 12, 2018 at 12:36 PM.

  1. Ginger-Menace

    Wise Guy

    Joined: May 9, 2010

    Posts: 1,548

    Location: sheffield

    Hi everyone,

    I need some help if you would.

    i have this 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
    <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
     
  2. touch

    Capodecina

    Joined: Oct 28, 2006

    Posts: 10,082

    Location: Sufferlandria

    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.
     
  3. Ginger-Menace

    Wise Guy

    Joined: May 9, 2010

    Posts: 1,548

    Location: sheffield

    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
     


Share This Page