javascript array + laden pictures

zaterdag 19 februari 2011 14:56

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Hallo,

Ik wil het volgende probleem oplossen, waarbij een goed startpunt welkom is, want ik zit nu al te lang te zoeken en te lezen. ik wil dynamisch plaatjes laden op een HTML pagina met javascript. De plaatjes zitten in een map "pictures". In een array staan de lokale url's naar de plaatjes. Ik denk dat ik dit moet doen door met een loop door de array te gaan, de link zelf eruit moet halen, en dit aan de image id - src toe toevoegen. , dit lukt dus niet.

JavaScript:

<script language="JavaScript" type="text/javascript">
var album = 
      [
        {
          url: 'images/0006787.jpg',
          landscape: false,
        },
        {
          url: 'images/0004713.jpg',
          landscape: false
        },
        {
          url: 'images/0004720.jpg',
          landscape: false
        }
]
</script>

(mm krijg die tags niet voor elkaar) Dus de vraag is hoe ik deze kan laden op een html pagina. Voor sommigen waarschijnlijk heel simpel, voor anderen zoals ik zelf , nog nooit iets gedaan met js, loop ik hier op vast.

Wat aanknopingspunten zou handig zijn, complete oplossingen verwacht ik ook niet.

[ Voor 19% gewijzigd door moto-moi op 19-02-2011 15:21 ]

zaterdag 19 februari 2011 17:14

Acties:

0 Henk 'm!

Creepy

Tactical Espionage Splatterer

Aangezien je vast loopt: wat heb je dan zelf al geprobeerd en wat lukt daar niet mee?

"I had a problem, I solved it with regular expressions. Now I have two problems". That's shows a lack of appreciation for regular expressions: "I know have _star_ problems" --Kevlin Henney

zaterdag 19 februari 2011 20:28

Acties:

0 Henk 'm!

jw_moonshine

misschien kun je eens kijken naar jquery, die heeft mooie oplossingen voor dit soort dingen.

zaterdag 19 februari 2011 22:37

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Het is opdracht die in javascript gedaan moet worden. Tevens moeten de plaatjes dynamisch geladen worden. Dat stukje lukt al wel, alleen dan staan de plaatjes via ID's aangegeven. (dus niet de locaties zoals in de array.)
Ik hoef dan ook geen oplossingen, maar ben alleen zoekende naar een goed startpunt....... (heb ondertussen vierkante ogen, na een paar uur klooien. Ach ja morgenavond weer verder.
hoe geef ik de juiste tags in om code weer te geven?

zondag 20 februari 2011 19:39

Acties:

0 Henk 'm!

FlorisD

Wat je zou kunnen doen om een foto weer te geven is het volgende, met behulp van jQuery:

code:

<!DOCTYPE html>
<html>
<head>
    <title>JS album</title>
    <meta charset="utf-8" />
    
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script language="JavaScript" type="text/javascript">
    var album = 
          [
            {
              url: 'http://code.google.com/images/code_logo.gif',
              landscape: false,
            },
            {
              url: 'http://code.google.com/images/icon_sprite-35.png',
              landscape: false
            },
            {
              url: 'http://tweakimg.net/g/if/v2/header/menu_buttons.png',
              landscape: false
            }
    ];
    
    var albumobj = {
        curr_index: 0,
        $image: null,
        init: function() {
            // Cachen van element
            albumobj.$image = $("#image");
            
            // Eerste afbeelding inladen in IMG-element
            albumobj.$image.attr('src', album[0].url);
            
            // Events voor vorige/volgende
            $("#image_prev").unbind('click').click(function() {
                albumobj.prev();
                
                return false;
            });
            $("#image_next").unbind('click').click(function() {
                albumobj.next();
                
                return false;
            });
        },
        // Volgende afbeelding laden onclick
        next: function() {
            if(albumobj.curr_index == album.length - 1) {
                // Als de laatste foto zichtbaar is, terug naar het begin
                albumobj.curr_index = 0;
                albumobj.$image.attr('src', album[albumobj.curr_index].url);
            } else {
                // Gewoon volgende foto
                albumobj.curr_index++;
                albumobj.$image.attr('src', album[albumobj.curr_index].url);
            }
        },
        // Vorige afbeelding laden onclick
        prev: function() {
            if(albumobj.curr_index == 0) {
                // Als de eerste foto zichtbaar is, spring dan naar het eind
                albumobj.curr_index = album.length - 1;
                albumobj.$image.attr('src', album[albumobj.curr_index].url);
            } else {
                // Gewoon vorige foto
                albumobj.curr_index--;
                albumobj.$image.attr('src', album[albumobj.curr_index].url);
            }
        }
    };
    
    $(document).ready(function() {
        albumobj.init();
    });
    </script>
</head>

<body>
    <img src="" id="image" />
    <a href="#" id="image_prev">Vorige</a>
    <a href="#" id="image_next">Volgende</a>
</body>
</html>

Even snel in elkaar geflanst, dus kunnen hier en daar wat foutjes in zitten (niet getest ook). Maar dit is dus ongeveer wat je zoekt denk ik.

zondag 20 februari 2011 19:40

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Javascript

FlorisD schreef op zondag 20 februari 2011 @ 19:39:
Wat je zou kunnen doen om een foto weer te geven is het volgende, met behulp van jQuery:

...

Even snel in elkaar geflanst, dus kunnen hier en daar wat foutjes in zitten (niet getest ook). Maar dit is dus ongeveer wat je zoekt denk ik.

Met een oplossing voorgekauwd en wel aanleveren schiet de TS niets op en zal er niets van leren

Give a man a fish and feed him for a day. Teach a man how to fish and feed him for a lifetime.

Verwijderd schreef op zaterdag 19 februari 2011 @ 22:37:
hoe geef ik de juiste tags in om code weer te geven?

code tags

[ Voor 34% gewijzigd door RobIII op 20-02-2011 19:41 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

zondag 20 februari 2011 20:21

Acties:

0 Henk 'm!

bindsa

Verwijderd schreef op zaterdag 19 februari 2011 @ 14:56:
ik wil dynamisch plaatjes laden op een HTML pagina met javascript.

Wat wil je precies? Nieuw plaatje laden als er geklikt wordt? In dat geval wil je een functie aan het onclick JavaScript event hangen. In ieder geval, je zult een functie aan een event moeten koppelen en in die functie de plaatjes laden en in het DOM plaatsen.

Zoiets wil je waarschijnlijk. Dat had je trouwens met de volgende zoekwoorden ook zelf kunnen vinden: loading images javascript

maandag 21 februari 2011 08:45

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

Verwijderd schreef op zaterdag 19 februari 2011 @ 22:37:
Het is opdracht die in javascript gedaan moet worden. Tevens moeten de plaatjes dynamisch geladen worden.
[...]

Het lijkt er op dat dit een school opdracht is?

Voor dit soort dingen lijkt me ajax eigenlijk veel beter op z'n plaats. Dan werkt het ook zonder javascript, en kun je via een server-side scripttaal alle images dynamisch van de server halen. Hoef je de images niet in je bron te zetten.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

maandag 21 februari 2011 09:16

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

Huh? Ajax en werken zonder javascript?Jij moet even de definitie van ajax nalezen.

Anyone who gets in between me and my morning coffee should be insecure.

maandag 21 februari 2011 09:35

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

Hmm ik verwoord het inderdaad verkeerd.

Wat ik bedoel; wanneer je AJAX gebruikt, kun je altijd terug vallen op alleen de server-side taal. Heeft de bezoeker javascript? Prima, kun je alles zonder page-refresh inladen. Heeft de bezoeker het niet? Gewoon d.m.v. een page-refresh / POST / GET request de nieuwe data ophalen.

Phas0r schreef op maandag 21 februari 2011 @ 09:44:
AJAX is niks anders dan met javascript asynchrone requests uit voeren, zonder javascript geen AJAX

Klopt, maar door gebruik van een server-side scripttaal kun je wel voor (dynamische) backup zorgen wanneer javascript niet beschikbaar is. Het mooie aan AJAX is dat -- wanneer je het goed doet, bijna altijd -- de content ook zonder javascript beschikbaar is.

Nu is het in dit geval schijnbaar alleen een school opdracht, dus maakt het verder weinig uit...

[ Voor 86% gewijzigd door OkkE op 21-02-2011 10:05 ]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

maandag 21 februari 2011 09:44

Acties:

0 Henk 'm!

Ventieldopje

I'm not your pal, mate!

Je kunt dan niet meer in de achtergrond plaatjes op gaan lepelen, je zult dan dus een statisch plaatje moeten laten zien oid. AJAX is niks anders dan met javascript asynchrone requests uit voeren, zonder javascript geen AJAX

maandag 21 februari 2011 09:46

Acties:

0 Henk 'm!

xyanide

Deze opdracht hebben wij op dit moment ook.
Ik zal je een kort voorbeeldje geven om je op weg te helpen:

JavaScript:

for (image in album) {
var thumbnailImage = document.createElement("img");
thumbnailImage.setAttribute('src', album[image].url);

var thumbDiv = document.createElement("div");
thumbDiv.setAttribute("class", "imageThumb");
thumbDiv.appendChild(thumbnailImage);
mainImageContainer.appendChild(thumbDiv);

Waarbij de mainImageContainer de div is waar alle foto`s in worden geplaatst.

[ Voor 9% gewijzigd door xyanide op 21-02-2011 09:48 ]

dinsdag 22 februari 2011 18:34

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Bedankt voor alle reacties, het laatste voorbeeld helpt mij zeker goed op weg. Gisteravond, had ik (de basis) voor elkaar, en wat ik nou fout deed weet ik niet, maar die code had ik niet gesaved oid, maar foetsie!! en toen lukte het natuurlijk niet............ uur lopen zoeken....... was vannacht te laat, en te vroeg ging de wekker weer............

Onderwerpen