Next/Previous Asset or Image within Entry

Question

I'm looking to create a way to navigate to the next/previous image in an entry's asset range and display only the current asset at one time(starting from first asset).

{% extends '_layout.html' %}

{% block main %}


<div class="tr">
    {{ entry.title }}
  </div>

  <div class="row nav">
        <a href="{{ siteUrl }}"><span class="name">Emily Ashcroft</span></a>

    <a class="head" href="{{ siteUrl }}comm.html">Commissions</a>
    <a class="head" href="{{ siteUrl }}port.html">Portraits</a>
    <a class="head" href="{{ siteUrl }}pers.html">Personal</a>
    <a class="head" href="{{ siteUrl }}CV.html">Info</a>

    </div>


<!-- left side of window links to previous image if there is one, right side links to next image or asset if there is on -->

<a href="{{ siteUrl }}"><div class="left"></div></a>

<a href="{{ siteUrl }}"><div class="right"></div></a>

<div class="container">

<!-- output current asset only -->

        {% for photo in entry.photos %}
  <div class="row">
      <div class="centre">
         <img id="slider" src="{{ photo.first.getUrl() }}" />
      </div>
  </div>

  {% endfor %}

  </div>
{% endblock %}

Click on left side of screen and the previous asset is displayed, click on the right and the next asset is output. I'm struggling to figure if I should use a method similar to paginating links to next/prev entries (but I don't think that would work for assets).

This code is taken from _entry.html page of a section.

Thanks for any help provided.

Answer 1

Given that your assets are within an entry, it seems that a gallery browsing mechanism may fit well. I'd suggest a javascript framework such as Fancybox: http://fancyapps.com/fancybox/

Alternatively and perhaps more in line with your specific question, have a look at this related thread: Best way to access getPrev and getNext asset fields