[JS] Zoek volgende afbeelding

[Currahee]

Momenteel ben ik bezig met de ontwikkeling van een fotowebsite, waarbij na het klikken op een afbeelding de details (fotograaf, bedrijf, tags, besteloptie etc.) van de betreffende foto worden geladen in een lighbox achtige weergave. Wanneer de details opengeklikt zijn moet de gebruiker de mogelijkheid hebben om door te kunnen klikken / swipen naar de volgende foto binnen het album.

Ik loop echter tegen het probleem aan dat ik het niet voor elkaar krijg om het id van de volgende foto binnen de html op te halen. De html ziet er als volgt uit:

HTML:

<div id='photos'>
    <p>
        <img src='1.jpg' id='1' class='gallery' />
        <img src='2.jpg' id='2' class='gallery' />
    </p>
    <p>Een stuk tekst</p>
    <p>
        <img src='3.jpg' id='3' class='gallery' />
    </p>
</div>

Door middel jquery probeer ik hieruit het volgende id af te leiden. Dit gaat goed met onderstaande code voor afbeeldingen die binnen dezelfde <p> tag staan, omdat de next() functie alleen zoekt naar het volgende element binnen dezelfde tag.

JavaScript:

$(document).ready(function () {
    $('body').on('click', '.gallery', function () {
        alert($(this).next().attr('id'));
    });
});

Ik dacht het probleem op te kunnen lossen door aan te geven dat er gezocht moet worden binnen de 'photos' div waarbinnen alle content wordt geladen. Bij deze oplossing krijg ik echter in alle gevallen een 'undefined' terug.

JavaScript:

$(document).ready(function () {
    $('body').on('click', '.gallery', function () {
        alert($(this).closest('#photos').next().attr('id'));
    });
});

Ik heb het gevoel dat ik ergens wat over het hoofd zie, maar ik kan er de vinger niet op leggen. Iemand die me verder op weg kan helpen, zodat altijd het id van de volgende foto wordt geladen, onafhankelijk van binnen welke <p> tag deze staat? Een alternatief is nog om van alle elementen met een .gallery een array te maken en hier vervolgens het volgende item te selecteren, maar volgens mij moet het eenvoudiger kunnen.

JSFiddle: https://jsfiddle.net/dbu7joda/1/

[Accesteam]

Alhoewel ik mijn vraagtekens zet bij de implementatie, zou ik dan naar het id gaan kijken. Als je deze toch incrementeel maakt kan je daar net zo goed gebruik van maken. Zie https://jsfiddle.net/dbu7joda/2/ en dan nog een check of deze bestaat.

In een array wegschrijven is naar mijn mening verreweg de netste oplossing. Kijk anders even naar bestaande open-source image viewers/lightbox implementaties.

[Currahee]

Accesteam schreef op zaterdag 23 mei 2015 @ 20:13:
Alhoewel ik mijn vraagtekens zet bij de implementatie, zou ik dan naar het id gaan kijken. Als je deze toch incrementeel maakt kan je daar net zo goed gebruik van maken. Zie https://jsfiddle.net/dbu7joda/2/ en dan nog een check of deze bestaat.

De id's zijn niet altijd incrementeel, er kan bijvoorbeeld ook een gat tussen zitten, of een hoger id komt voor een lager id. Ik denk dat ik dan toch voor de array optie ga kiezen. Bedankt voor de hulp!

[Guillome]

Onbodyload:

JavaScript:

$images = $(".gallery");
$activeImage = $images.first();

$next = $images.next();
$prev = $images.prev();

?

https://jsfiddle.net/dbu7joda/3/

Of je gebruikt bij onbodyload een eigen incremental js-id en gebruikt die ipv de serverside-id zeg maar

[ Voor 9% gewijzigd door Guillome op 24-05-2015 10:55 ]