binnen een div twee afbeeldingen open onclick - Softwareontwikkeling

vrijdag 23 mei 2014 14:12

Acties:

Topicstarter

Ik heb hier al heel wat uurtjes in zitten, maar het wil maar niet lukken op een of andere manier. Helaas ben ik niet goed met javascript/jquery. Maar weet inmiddels wel dat ik het in die hoek moet zoeken.

Wat ik wil is eigenlijk heel simpel. Ik heb een div en daar binnen wil ik een afbeelding tegelijk tonen. Daaronder wil ik gewoon 2 woorden met foto 1 en foto 2. Wanneer je op foto 2 klikt ga je naar foto 2 en klik je op foto 1 dan ga je weer naar foto 1. Ook wil ik graag dat de afbeeldingen klikbaar zijn. Er hoeven verder geen effecten in, maar gewoon zodat de bezoeker makkelijk kan switchen tussen beide afbeeldingen.

Ik heb al geprobeerd om dit met SideLoad te doen. En nog wat andere dingen, die ik helaas niet meer terug kan vinden. Het wil gewoon niet lukken, kan iemand me helpen met een heel simpel klein script?

Hier zit ik nu een beetje mee te klooien, maar ook dit wil niet. En nee ik ga voor dit niet een hele cursus javascript doen.

code:

<script type="text/javascript"
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
$(function(){
    $("a.afbeelding").click(function(e) {
        e.preventDefault();
        $("#imageBox").html('<img src=\""' + this.href + '" />');
    });
})
</script>

<a href="foto1.jpg" class="sideLoad afbeelding">image 1</a>&nbsp;
<a href="foto2.jpg" class="sideLoad afbeelding">image 2</a>

[ Voor 6% gewijzigd door Blueflame_Core op 23-05-2014 14:14 ]

vrijdag 23 mei 2014 14:32

Acties:

HMS

Even Google erbij, en: http://stackoverflow.com/...an-image-in-a-div-changes.

spoiler:

this.href vervangen door $(this).attr('href');

[ Voor 34% gewijzigd door HMS op 23-05-2014 14:34 ]

vrijdag 23 mei 2014 14:33

Acties:

TheNephilim

Wtfuzzle

Ik zie niet wat de class sideLoad zou moeten doen; je voorbeeld zou verder gewoon moeten werken. Alleen mis ik hier je #imageBox wat misschien het probleem zou kunnen zijn?

vrijdag 23 mei 2014 14:35

Acties:

Cor453

Behalve dat je een extra dubbele quote-mark inbouwt, zou het moeten werken. Maak van dit:

code:

1	$("#imageBox").html('<img src=\""' + this.href + '" />');

Even dit:

code:

1	$("#imageBox").html('<img src="' + this.href + '" />');

En natuurlijk $(this).attr("href") gebruiken.

[ Voor 8% gewijzigd door Cor453 op 23-05-2014 14:36 ]

vrijdag 23 mei 2014 14:44

Acties:

Blueflame_Core

Topicstarter

Bijna alles werkt nu zoals ik het wil. Echter zit ik nog even met de vraag... hoe zet je een koppeling/link achter de afbeelding, aangezien deze al een <a href> bevat?

Toch nog ff iets wat voor mij onverklaarbaar is. Als ik de knoppen foto1 en foto2 onder de afbeelding zet in de afbeelding div, en ik klik op foto1 of foto2 dan verschijnt de afbeelding wel, maar verdwijnen de knoppen foto1 en foto2.

[ Voor 133% gewijzigd door Blueflame_Core op 23-05-2014 15:05 ]

vrijdag 23 mei 2014 15:39

Acties:

dingstje

Als het 'onverklaarbaar' is, snap je duidelijk niet wat je aan het doen bent. De jQuery API-docs voor de html() functie verklaren nochtans: "Set the HTML contents of each element in the set of matched elements." M.a.w., op het ogenblik dat jij $("#imageBox").html(...) aanroept, wordt de volledige inhoud van #imageBox, inclusief de knoppen, vervangen door wat je meegeeft als argument.

Here's a crazy idea: zet de knoppen buiten je #imageBox? Indien je #imageBox nu een bepaalde functie heeft i.k.v. layout, kan je die overzetten naar een #imageBoxContainer en dan je #imageBoxContainer rond je #imageBox en je twee knoppen zetten.

Here's another crazy idea: waarom geef je geen identifier aan je <img> element, en pas je vervolgens het 'src' attribuut aan van je image? Dan hoef je geen HTML te bouwen met string concatenation. Hint: API-docs voor de jQuery attr() functie

If you can't beat them, try harder

vrijdag 23 mei 2014 17:01

Acties:

creator1988

Cor453 schreef op vrijdag 23 mei 2014 @ 14:35:
En natuurlijk $(this).attr("href") gebruiken.

Eh, waarom? this point al naar het juiste element, dus om die weer te wrappen in een jQuery object is compleet overkill.

vrijdag 23 mei 2014 18:31

Acties:

Woy

Moderator Devschuur®

Dit is puur clientside, dus ik *trap* PRG -> WEB

“Build a man a fire, and he'll be warm for a day. Set a man on fire, and he'll be warm for the rest of his life.”

vrijdag 23 mei 2014 22:49

Acties:

Blueflame_Core

Topicstarter

Wil het topic toch even afsluiten met een werkend script zodat een ander er ook nog wat aan heeft..

code:

<head>

<script type="text/javascript"
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
$(function(){
    $("a.sideLoad").click(function(e) {
        e.preventDefault();
        $("#imageBox").html('<img src="' + $(this).attr('href') + '" />');
    });
})
</script>

</head>

<body>

<div id="imageboxcontainer">
<div id="imageBox">
<!-- hieronder kun je een afbeelding neerzetten zodat het vak niet leeg is -->
<a href="http://jewebsite.nl" target="_blank"><img src="jeafbeelding.jpg" alt="" border="0" /></a>
</div>
<div id="imageBox_menu">
<a href="afbeelding1.jpg" class="sideLoad">Afbeelding 1</a>
<a href="afbeelding2.jpg" class="sideLoad">Afbeelding 2</a>
</div>
</div>

</body>

woensdag 28 mei 2014 11:52

Acties:

_eXistenZ_

Toppie, en JS moet boven de sluit-tag van je body voor performance.

There is no replacement for displacement!

woensdag 28 mei 2014 13:49

Acties:

TheNephilim

Wtfuzzle

Oh en je kunt een wat recentere jQuery versie gebruiken: 1.11.1 bijvoorbeeld!