Auteur Topic: de links in webpagina openen naast, onder of boven de links (gelezen 8013 keer)

RXje · « **Gepost op:** 17 november 2012, 23:09:03 »

Ik ben een kunstwebsite aan het maken, daarin een pagina met de geschreven titels van de namen kunstwerken, die titels kan ik linken naar de foto's van kunstwerken in dezelfde pagina maar de foto's verbergen dan weer de titels.
Hoe kan ik linken in dezelfde pagina zodanig de afbeelding onder of boven of rechts van de titels wordt geopend?(liefst zonder een extra frame aan te maken)

Firebirdy · « **Reactie #1 Gepost op:** 18 november 2012, 00:42:20 »

Met javascript kan je de volledige pagina manipuleren naar aanleiding van events (zoals het aanklikken van een link)

.

Dat laat je toe om een foto te laden en weer te geven wanneer je een link aanklikt. Je kan als alternatief ook gebruik maken van een lightbox-systeem om je foto weer te geven, kijk bijvoorbeeld even hier voor een demo.

RXje · « **Reactie #2 Gepost op:** 18 november 2012, 00:49:59 »

van javascript heb ik geen kaas gegeten en een lightbox wil ik niet, ikk wil gewoon in html

Firebirdy · « **Reactie #3 Gepost op:** 18 november 2012, 01:30:57 »

Je zou natuurlijk voor elke afbeelding een aparte pagina kunnen maken met daarop de titel, de afbeelding en een 'terug'-knop. Maar aangezien je doelstelling het weergeven van de afbeelding is en niet een detailpagina, lijkt me dat overdreven veel werk, of niet?

Kijk even naar het voorbeeld in bijlage (alles uitpakken in zelfde map en test.html openen), dankzij de jQuery library volstaan een paar lijnen code en een vooraf bepaalde naamgeving om je afbeeldingen te tonen. Je kan het dynamische gedeelte ook weglaten en voor elke link zelf het pad naar de afbeelding toevoegen, als je dat gemakkelijker vindt. Wil gerust helpen met vragen die je zou hebben bij de code of de integratie ervan.

Hoe werkt het nu: bij elke link staat er een nummer in de href, vb #12345. Dat getal wordt gebruikt om de overeenkomstige afbeelding weer te geven wanneer er op de link geklikt wordt. Waar die afbeelding dan weergegeven wordt, wordt met (hier in-line) CSS bepaald, dat kan gelijk waar zijn.

RXje · « **Reactie #4 Gepost op:** 18 november 2012, 11:43:06 »

de link is perfect ,het is dit wat ik wil
hoe verander ik nu zodat ik mijn afbeeldingen kan zien?

Firebirdy · « **Reactie #5 Gepost op:** 18 november 2012, 12:01:27 »

Wel, er is niet veel code, heb je ze al bestudeerd en vergeleken met je bestaande html? Of ben je bezig in een grafische editor, dus zonder de code rechtstreeks aan te passen?

Wat heb je nodig:
- referentie naar jquery library (lijn 4). Dit moet in de <head> tag staan, zoals nu.
- stukje script (lijn 5 tem lijn 15). Dit moet in de <head> tag staan, zoals nu. Je ziet dat er een <img> tag opgebouwd wordt met een src-attribuut, hier kan je het pad wijzigen naar je afbeeldingen. Wanneer alles bijvoorbeeld in een map 'images' staat en alle foto's beginnen met 'kunst_', dan zou lijn 9 er als volgt uit kunnen zien:

Code: [Selecteer]

var newImg = $('<img src="images/kunst_' + imgId + '.jpg">');- je hyperlinks moeten er zo uit zien, met xyz het dynamische gedeelte van de bestandsnaam (vb een ID) (lijn 26-28)

Code: [Selecteer]

<a href="#xyz" class="art-link">- je hebt een div nodig om de afbeelding weer te geven, met id 'art-display' (lijn 30)

De rest is optioneel.

RXje · « **Reactie #6 Gepost op:** 18 november 2012, 12:22:17 »

ik heb deze nu , de foto van zelfportret (als voorbeeld erbij)staat in de map images, de link is ok maar hij toont geen afbeelding wanneer ik op de link klik

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
   <script type="text/javascript">
      $(document).ready(function() {
         $('.art-link').click(function() {
            var imgId = $(this).attr('href').substr(1);
            var newImg = $('<img src="' + imgId + '.jpg">');
            $('#art-display').empty().append(newImg);
            return false;
         });
      });

   </script>
   <style>
      #art-links { float: left; width: 50%; background: yellow; }
      #art-display { margin-left: 50%; border: 3px double orange; }
      .clearfix { clear: both; }
   </style>
</head>
<body>
   <div id="art-container">
      <div id="art-links">
         <a href="#12345" class="art-link">Art 12345</a><br/>
         <a href="#23456" class="art-link">Art 23456</a><br/>
         <a href="#34567" class="art-link">Art 34567</a><br/>
<a href="images\zelfportret.jpg"class="art-link">zelfportret</a>

      </div>
      <div id="art-display"></div>
      <div class="clearfix"></div>
   </div>
</body>
</html>

Firebirdy · « **Reactie #7 Gepost op:** 18 november 2012, 18:27:36 »

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.art-link').click(function() {
var imgId = $(this).attr('href').substr(1);
var newImg = $('<img src="images\\' + imgId + '.jpg">');
$('#art-display').empty().append(newImg);
return false;
});
});

</script>
<style>
#art-links { float: left; width: 50%; background: yellow; }
#art-display { margin-left: 50%; border: 3px double orange; }
.clearfix { clear: both; }
</style>
</head>
<body>
<div id="art-container">
<div id="art-links">
<a href="#12345" class="art-link">Art 12345</a><br/>
<a href="#23456" class="art-link">Art 23456</a><br/>
<a href="#34567" class="art-link">Art 34567</a><br/>
<a href="#zelfportret" class="art-link">zelfportret</a>
</div>
<div id="art-display"></div>
<div class="clearfix"></div>
</div>
</body>
</html>

(verplaats de andere afbeeldingen ook naar de submap 'images')

RXje · « **Reactie #8 Gepost op:** 18 november 2012, 18:58:03 »

ik heb je voorbeeldfoto's in submap images geplaatst, maar zie ze niet als ik op de link klik

Firebirdy · « **Reactie #9 Gepost op:** 18 november 2012, 19:28:25 »

Werkt voor mij? Zie bijlage

RXje · « **Reactie #10 Gepost op:** 18 november 2012, 19:47:21 »

ja alles werkt perfect als ik op je testlink klik, ik kan alles zien in mijn browser
maar bij plaatsen van die htmlcodes in mijn html opmaker, laat die de afbeeldingen niet zien, ook niet als ik klik op bekijken in browser

Firebirdy · « **Reactie #11 Gepost op:** 19 november 2012, 00:16:29 »

Helaas heb ik er het raden naar wat er verkeerd zou kunnen staan, ik weet niet exact wat je waar geplaatst hebt

. Misschien kan je de relevante pagina als bijlage posten?

RXje · « **Reactie #12 Gepost op:** 23 november 2012, 18:40:31 »

beste,
ik heb gisteren gelezen op deze pagina
https://www.zelfstudie.be/tutorial/176/starten-met-jquery.php
de jquery.ps op te slaan in de map waar website staat, heb dit gedaan maar bnog steeds geen afbeeldingen....
hierbij in bijlage de html code van mijn pagina "paintings"
ik zou echt heel graag je voorbeeld kunnen gebruiken maar lukt dus nog steeds niet
groetjes

Firebirdy · « **Reactie #13 Gepost op:** 23 november 2012, 21:48:22 »

Hallo Rxje,

Jouw paintings.html werkt perfect bij mij, op één aanpassing na.
Deze lijn:

Code: [Selecteer]

<a href="#zelfportret.jpg" class="art-link">zelfportret</a>moet dit worden, zoals ik hierboven al gepost had:

Code: [Selecteer]

<a href="#zelfportret" class="art-link">zelfportret</a>
Je moet in dit geval het bestand paintings.html in dezelfde map zetten als de afbeeldingen.

Aparte map met afbeeldingen:

Wil je daarentegen een bestand paintings.html met de afbeeldingen in een submap 'images', dan moet je deze lijn:

Code: [Selecteer]

var newImg = $('<img src="' + imgId + '.jpg">');vervangen door deze lijn:

Code: [Selecteer]

var newImg = $('<img src="images\\' + imgId + '.jpg">');Dit is ook wat ik hierboven al had opgenomen in het voorbeeld

.

Ik heb voor het gemak het aangepaste bestand en de afbeeldingen nog eens toegevoegd.

Tot slot wil ik nog meegeven dat je jquery.js niet per se hoeft op te slaan (maar het mag). Deze lijn zorgt er immers voor dat ze vanaf een andere website ingeladen wordt:

Code: [Selecteer]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Hopelijk raak je hiermee een stapje verder.

RXje · « **Reactie #14 Gepost op:** 23 november 2012, 23:34:10 »

beste, het is gelukt , ik heb je wijzigingen opgevolgd,
nu nog wat opmaak
mag ik je nog vragen, ik wil de tekst "zelfportret" ...in het midden of lager ,maar dan schuift mijn foto mee naar beneden en de kleur veranderen van tekst "zelfportret" ...en de grootte afbeelding..moet ik deze op voorhand of kan ik het nog in editor aanpassen?
je ziet dat ik ook een lijn gemaakt hebt boven en onder de afbeeldingen,ik wil dat de afbeelding getoond wordt tussen die twee lijnen??

alvast bedankt me te helpen, filip

Help!

Menu

Hulp bij posten

Zoeken

Recente topics

Auteur Topic: de links in webpagina openen naast, onder of boven de links (gelezen 8013 keer)

RXje

de links in webpagina openen naast, onder of boven de links

Firebirdy

Re: de links in webpagina openen naast, onder of boven de links

RXje

Re: de links in webpagina openen naast, onder of boven de links

Firebirdy

Re: de links in webpagina openen naast, onder of boven de links

RXje

Re: de links in webpagina openen naast, onder of boven de links

Firebirdy

Re: de links in webpagina openen naast, onder of boven de links

RXje

Re: de links in webpagina openen naast, onder of boven de links

Firebirdy

Re: de links in webpagina openen naast, onder of boven de links

RXje

Re: de links in webpagina openen naast, onder of boven de links

Firebirdy

Re: de links in webpagina openen naast, onder of boven de links

RXje

Re: de links in webpagina openen naast, onder of boven de links

Firebirdy

Re: de links in webpagina openen naast, onder of boven de links

RXje

Re: de links in webpagina openen naast, onder of boven de links

Firebirdy

Re: de links in webpagina openen naast, onder of boven de links

RXje

Re: de links in webpagina openen naast, onder of boven de links