prestashop next and previous image buttons on product page

I'd like to add next and previous buttons to the product image on product page, so that the user can look through all pictures with these buttons, exactly like when the image is opened to fancybox.

How can I get the next and previous images in javascript? Im sure it's simple because all the product images must be called and arranged already since we are on the product page, I just dont know how to get them.

I was thinking about something like this:

function nextImage(){
    document.getElementById('bigpic').src = next image (id?)
}

Thanks!

It can be nicely done with owl.caroulsel jquery script hooked with foreach loop.

Here is code to insert into product.tpl file

 {if isset($images) && count($images) > 0}
        <div class="col-md-12">
            <div id="prod" class="owl-carousel owl-theme">
                {if isset($images)}
                    {foreach from=$images item=image name=thumbnails}
                        <div class="item">
                            {assign var=imageIds value="`$product->id`-`$image.id_image`"}
                            {if !empty($image.legend)}
                                {assign var=imageTitlte value=$image.legend|escape:'htmlall':'UTF-8'}
                            {else}
                                {assign var=imageTitlte value=$product->name|escape:'htmlall':'UTF-8'}
                            {/if}
                                <div id="thumbnail_{$image.id_image}">
                                    <a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html'}" rel="other-views" class="thickbox{if $smarty.foreach.thumbnails.first} shown{/if}" title="{$imageTitlte}">
                                        <img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'large_default')|escape:'html'}" alt="{$imageTitlte}" title="{$imageTitlte}" />
                                    </a>
                                </div>
                        </div>
                    {/foreach}
                {/if}
            </div>
        </div>
    {/if} 

Here is jquery code

 $(document).ready(function(){$("#prod").owlCarousel({loop:true,nav:false,autoplay:false,responsive:{0:{items:1,loop:true,nav:false},600:{items:1,loop:true,nav:false},1000:{items:1,nav:true,loop:true}}});});

And dont forget to insert owl.caroulsel.js and owl.carousel.css files

Main advantages 1. Responsive 2. Touch swiped on mobile 3. Image still can be enlarged