1

I'm working on a portfolio where you first get presented with thumbnails of every project. When a thumbnail is clicked, content is loaded and shown.

Now, for this content loading I decided to skip ajax and put all information needed into a javascript variable so that when content is fetched I just create a container with jquery and fill it with the information provided in the variable which then is shown to the visitor. So far so good.

What I want to be able to work in is that when the visitor loads up a project, it should at the same time create containers off screen with the adjacent projects. For example, if the visitor clicks up project number 3, it should load up project 1 and 2 (positioned off screen to the left) and also project 4 and 5 (positioned off screen to the right). When the visitor is done looking at the work he or she should just be able to click previous or next and that particular project will slide on screen.

I've been going at how I should structure this to be most efficient for some time now and I can't seem to figure out how to do it. What bugs me the most is how to figure out that if the visitor goes straight to project 1 and decides to click previous, how to serve the last project?

Projects:
1 2 3 4 5 6 7 8 9 10

Bold represents the clicked project, and the italic ones represents which ones that should be loaded with them. And as you understand, for example if next is clicked in this scenario, then 2 becomes active and alas project 4 should be loaded/created.

When the container is created it looks like this:

<div id="projects">
    <article class="curr" data-order="1" id="project1">      
        Content
    </article>
</div>

The idea is to prepend/append new projects with classes .prev / .next to #projects

The variable I'm fetching data from looks like this:

var works = {
    "work":{
        "1":{"id":101,"name":"project-1","title":"Project 1","content":"Text"},
        "2":{"id":201,"name":"project-2","title":"Project 2","content":"Text"},
        "3":{"id":301,"name":"project-3","title":"Project 3","content":"Text"},
        "4":{"id":401,"name":"project-4","title":"Project 4","content":"Text"},
        "5":{"id":501,"name":"project-5","title":"Project 5","content":"Text"},
        "6":{"id":601,"name":"project-6","title":"Project 6","content":"Text"},
        "7":{"id":701,"name":"project-7","title":"Project 7","content":"Text"},
        "8":{"id":801,"name":"project-8","title":"Project 8","content":"Text"},
        "9":{"id":901,"name":"project-9","title":"Project 9","content":"Text"},
        "10":{"id":1001,"name":"project-10","title":"Project 10","content":"Text"},

    }
}

"1", "2" etc represents the order the projects are displayed in. Besides that I have the total number of projects in a separate variable. But other than that, how to approach this in a way that is the most efficient is over my head right now.

Thoughts?

INT
  • 910
  • 4
  • 21
  • 45
  • [JavaScript objects are unordered](http://stackoverflow.com/questions/280713/elements-order-in-a-for-in-loop) so consider a proper array like `var works = [ { id: 101, name: "project-1", ...}, { id: 201, ... }, ... ]` instead of an object with numeric keys. – quietmint Jul 02 '13 at 03:23

2 Answers2

1

If your problem is finding out which projects should be loaded when user opens project project_idx then you can try this

function next(idx) {
    return (idx + 1) % project_count;
}
function prev(idx) {
    return (idx + (project_count - 1)) % project_count;
}

function adjacent(project_idx) {
    return {
        "prev": [prev(prev(project_idx)), prev(project_idx)],
        "next": [next(project_idx), next(next(project_idx))]
    };
}

// assuming project_count = 10 and projects are indexed starting 0
adjacent(0); // -> {prev:[8,9], next:[1,2]}
adjacent(9); // -> {prev:[7,8], next:[0,1]}
adjacent(4); // -> {prev:[2,3], next:[5,6]}
zaquest
  • 2,030
  • 17
  • 25
0

What about a flag to make sure the project was loaded and then load the prev and next project of the current project? That way u don't have a problem clicking prev on the 1st project because the last one will be loaded. Applying this to the zaquest answer then I think you will be ok.

Community
  • 1
  • 1
Rafael Fontes
  • 1,195
  • 11
  • 19