Lightbox of foto in pop-up in html

[HwPhotoAll]

Hallo,

Ik hoop dat iemand mij hier op het forum op weg kan helpen...

ik heb een aantal dagen geleden de website http://www.hw-photoall.nl

nu wil ik onze foto's er op gaan zetten. het liefst met lightbox, highslide en anders een foto in een pop-up laten verschijnen.

ik heb al verschillende dingen geprobeerd maar het lukt me maar niet...

Hopend dat iemand mij hier kan helpen...

groet,
HW-PhotoAll

 

[Bufnukkel]

Ik heb deze website voor je opgezocht.

 

[HwPhotoAll]

Ik heb deze website voor je opgezocht.

dank voor je reactie

dat heb ik geprobeerd dan krijg ik de foto op de site en als je er dan op klikt komt tie gewoon in een nieuw venster. maar ik weet ook niet precies waar ik puntje 3 en 5 moet plaatsen.
en de bestanden uit het zipbestand? moeten die allemaal in de map images komen?

 

[Bufnukkel]

Als voorbeeld gebruik ik afbeeldingklein.jpg en afbeeldinggroot.jpg.

De code om de afbeelding te laten zien en om deze bij een klik groter te maken wordt:

<a href="afbeeldinggroot.jpg" rel=”lightbox” title=”Deze tekst komt bij de grote afbeelding te staan”><img src="afbeeldingklein.jpg"></a>

De inhoud van de map "lightbox" moet je als losse bestanden in de map waar de pagina in staat zetten. Dat wordt ook bij de tutorial gebruikt.

Ik ga nu de computer afsluiten, als je nog vragen hebt zal ik morgen voor je kijken.

 

[HwPhotoAll]

Als voorbeeld gebruik ik afbeeldingklein.jpg en afbeeldinggroot.jpg.

De code om de afbeelding te laten zien en om deze bij een klik groter te maken wordt:

<a href="afbeeldinggroot.jpg" rel=”lightbox” title=”Deze tekst komt bij de grote afbeelding te staan”><img src="afbeeldingklein.jpg"></a>

De inhoud van de map "lightbox" moet je als losse bestanden in de map waar de pagina in staat zetten. Dat wordt ook bij de tutorial gebruikt.

Ik ga nu de computer afsluiten, als je nog vragen hebt zal ik morgen voor je kijken.

okej ik zal vandaag of morgen eens verder gaan kijken. alvast bedankt voor je reactie!!

 

[HwPhotoAll]

ik krijg nog steeds geen nieuwe foto geopend in 'lightbox' (ik wil het op deze pagina ook doen: http://www.hw-photoall.nl/Ananda Marchildon.html

en hoe moet ik dat CSS bestand aanpassen? hoe komt dat er uit te zien?

 

[Bufnukkel]

Ik zie dat je maar één versie gebruikt?
Een wat grotere foto die je wat kleiner weergeeft?

Dan wordt het:

<a href="http://www.hw-photoall.nl/images/Ananda_01.jpg" rel=”lightbox” title=”Deze tekst komt bij de grote afbeelding te staan”><img src"http://www.hw-photoall.nl/images/Ananda_01.jpg"></a>

Dat css-bestand hoef je niet aan te passen want die heb je aan het begin al gedownload toch?

 

[HwPhotoAll]

Ik zie dat je maar één versie gebruikt?
Een wat grotere foto die je wat kleiner weergeeft?

Dan wordt het:

<a href="http://www.hw-photoall.nl/images/Ananda_01.jpg" rel=”lightbox” title=”Deze tekst komt bij de grote afbeelding te staan”><img src"http://www.hw-photoall.nl/images/Ananda_01.jpg"></a>

Dat css-bestand hoef je niet aan te passen want die heb je aan het begin al gedownload toch?

sorry ik ben hier echt een leek in maar het lukt absoluut niet...
kan je het bestanda misschien doormailen, PB'en zodat je als je tijd heb er even naar kunt kijken?

mvg
HWPhotoAll

 

[Poppoll]

Kijk eens op http://poppoll.nieuwerkerken-aalst.be/celeb/celebrity.htm
Is een werkend voorbeeld gebaseerd op uw Ananda pagina. Enkel de eerste 3 foto's zijn werkende!!
Jer kan aldaar ook een zip downloaden, welke ik hier niet kon plaatsen..
@helpmij maximum 100kb is toch wat weinig!!

Heb voor het gemak uw images folder hernoemd naar foto.
In de header van uw document moet u knippen en plakken wat tussen
<!--Voor lightbox --> en <!-- einde css scripts lightbox-->
al de scripts en css moet in de root van uw site staan.
de afbeeldingen voor lightbox moeten in een dir images staan in de root van uw site
Verder dient u zoals al eerder aangehaald een link van een kleine naar een groter foto te leggen via:
<a href="foto/Ananda_01Groot.jpg" rel="lightbox" title="hier kan u een omschrijving kwijt"><img style="width: 200px; height: 200px;" alt="" src="foto/Ananda_01.jpg" /></a>

Poppoll

 

[HwPhotoAll]

Kijk eens op http://poppoll.nieuwerkerken-aalst.be/celeb/celebrity.htm
Is een werkend voorbeeld gebaseerd op uw Ananda pagina. Enkel de eerste 3 foto's zijn werkende!!
Jer kan aldaar ook een zip downloaden, welke ik hier niet kon plaatsen..
@helpmij maximum 100kb is toch wat weinig!!

Heb voor het gemak uw images folder hernoemd naar foto.
In de header van uw document moet u knippen en plakken wat tussen
<!--Voor lightbox --> en <!-- einde css scripts lightbox-->
al de scripts en css moet in de root van uw site staan.
de afbeeldingen voor lightbox moeten in een dir images staan in de root van uw site
Verder dient u zoals al eerder aangehaald een link van een kleine naar een groter foto te leggen via:
<a href="foto/Ananda_01Groot.jpg" rel="lightbox" title="hier kan u een omschrijving kwijt"><img style="width: 200px; height: 200px;" alt="" src="foto/Ananda_01.jpg" /></a>

Poppoll

dat lukt al iets beter maar nu krijg ik de foto in het groot onderaan(!?) de pagina :shocked:

 

[Poppoll]

Upload de lightbox.css uit mijn zip bestand.
Ik zie dat je wijzigingen hebt gemaakt aan de huidige, vandaar dat het niet werkt!
PP

 

[HwPhotoAll]

Upload de lightbox.css uit mijn zip bestand.
Ik zie dat je wijzigingen hebt gemaakt aan de huidige, vandaar dat het niet werkt!
PP

Het werkt!!!
als ik nu nieuwe foto's er bij wilt voegen moet ik toch alleen die code waar de foto's in staan toevoegen?

graag wil ik iedereen hartelijk bedanken die mij geholpen heeft met mijn probleem!
Ik waardeer dat zeer!

Mvg
HW-PhotoAll

 

[Bufnukkel]

Sorry dat ik niet eerder kon reageren, was aan het werk.
Ik zie dat het met de extra hulp van Poppell toch nog gelukt is. :thumb:

 

[HwPhotoAll]

Sorry dat ik niet eerder kon reageren, was aan het werk.
Ik zie dat het met de extra hulp van Poppell toch nog gelukt is. :thumb:

okej maakt niet uit
in iedergeval bedankt voor je tijd en hulp! en Poppell natuurlijk ook

 

[Poppoll]

Inderdaad, enkel de code aanpassen voor de foto's.
Let wel als je dat op een andere pagina wil doen, moet je de code uit de <head> ook overnemen in de nieuwe pagina.

<!--Voor lightbox -->
  <link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
  <script type="text/javascript" src="prototype.js"></script>
  <script src="scriptaculous.js?load=effects,builder" type="text/javascript"></script>
  <script type="text/javascript" src="lightbox.js"></script>
  <!-- einde css scripts lightbox -->

Het volgende heeft niets te maken met lightbox maar zou je ook op alle pagina's moeten aanpassen :

<!-- CSS Tabs --> <li id="active"><a rel="tag" id="current" href="../index.html">HOME</a>
  </li>


  <li><a href="../2.%20Pagina%20Royalty/Royalty.html">ROYALTY</a>
  </li>


  <li><a href="Celebrity.html">CELEBRITY</a> </li>


  <li><a href="Natuur.html">NATUUR</a> </li>


  <li><a href="Cultuur.html">CULTUUR</a> </li>


  <li><a href="Bestellen.html">BESTELLEN</a> </li>


  <li><a href="../Biografie/Biografie.html">BIOGRAFIE</a>
  </li>


  <li><a href="Contact.html">CONTACT</a> </li>

Je ziet dat in de eerste li dit staat id="active"
Op de royalty pagina doe je dat weg bij home wordt dus <li> maar zet de id bij de link naar royalty
dat wordt dan:

<!-- CSS Tabs --> <li><a rel="tag" id="current" href="../index.html">HOME</a>
  </li>


  <li id="active"><a href="../2.%20Pagina%20Royalty/Royalty.html">ROYALTY</a>
  </li>

En zo doe je dat op alle pagina's

PP

 

[HwPhotoAll]

waar is dat laatste dan voor Poppol?
als ik nu een nieuwe pagina wil maken dan kopieer ik gewoon de pagina van ananda en zet er andere foto's en tekst op.

 

[Poppoll]

Om de actieve pagina dat grijze vakje te geven in de navigatiebalk zoals op de home pagina.