omplassering av navigeringsknapper på webside

[fotorune]

Har hjemmeside:

http://exterill.com

 

Når man klikker seg inn på et bilde får man opp navigeringsknapper for å bla mellom bildene. Disse knappene beveger seg opp og ned i forhold til høyden på bildet over. Jeg vil ha disse knappene på hver sin side av "close-knappen" (forrigebildeknappen på venstre side og nestebildeknappen på høyre side). Slik at de ikke beveger seg opp og ned.

 

Kan noen hjelpe meg med dette? Jeg kan evt betale for jobben. Koden til websiden (inkl tre testbilder) er lagt ved..

 

Hilsen Rune Hammerstad

exterilldotcom.zip

[MikkelRev]

Åpne style3.css, finn klassene .lb-prev, .lb-next

Endre top til 43px og left til 45%.

 

Åpne index.html

Endre innholdet i hver li til

<a href="#image-1">
   <img src="images/thumbs/01.jpg" alt="image01">
   <span></span>
  </a>
  <div class="lb-overlay" id="image-1">
   <img src="images/full/01.jpg" alt="image01" />
   <p>© fotograf Rune Hammerstad</p>
       <a href="#image-1" class="lb-prev">Prev</a>
       <a href="#image-2" class="lb-next">Next</a>						  
	<a href="#page" class="lb-close">x Close</a>
  </div>

 

 

Forøvrig er dette en svært tungvint måte å gjøre det på. Du hardkoder inn koden for hvert bilde istedetfor å skrive dynamisk kode. Dermed får du mye gjentakende kode, og det blir det veldig tungvint å legge til nye bilder og å endre på layouten.

Endret 23. juni 2013 av MikkelRev

[Wattengård]

I tillegg så har du en bug i javascriptet ditt slik at fullversjonen av bildene lastes samtidig med thumbnailen. Dette gjør at sida laster kjempetreigt, samt at hele poenget med thumbnailen er borte. Du kunne likegodt størrelsesbegrenset fullversjonen med css.

[fotorune]

Åpne style3.css, finn klassene .lb-prev, .lb-next

Endre top til 43px og left til 45%.

 

Åpne index.html

Endre innholdet i hver li til

<a href="#image-1">
   <img src="images/thumbs/01.jpg" alt="image01">
   <span></span>
  </a>
  <div class="lb-overlay" id="image-1">
   <img src="images/full/01.jpg" alt="image01" />
   <p>© fotograf Rune Hammerstad</p>
	<a href="#image-1" class="lb-prev">Prev</a>
	<a href="#image-2" class="lb-next">Next</a>						  
	<a href="#page" class="lb-close">x Close</a>
  </div>

 

 

Forøvrig er dette en svært tungvint måte å gjøre det på. Du hardkoder inn koden for hvert bilde istedetfor å skrive dynamisk kode. Dermed får du mye gjentakende kode, og det blir det veldig tungvint å legge til nye bilder og å endre på layouten.

 

Tusen takk skal du ha Mikkelrev! Det fungerer knallbra :-)

[fotorune]

I tillegg så har du en bug i javascriptet ditt slik at fullversjonen av bildene lastes samtidig med thumbnailen. Dette gjør at sida laster kjempetreigt, samt at hele poenget med thumbnailen er borte. Du kunne likegodt størrelsesbegrenset fullversjonen med css.

 

Har lagt merke til det samme selv, bortsett i fra å vite hvorfor.. Kan du hjelpe meg med problemet?? Finner ikke en gang ut hvor javascript fila har gjemt seg..

[Wattengård]

Beklager, så ikke orntli etter...

 

Det ser ut til at du bruker en ren CSS-lightbox sak. Mye finurlige triksfikserier med pseudo-klasser.

Problemet ditt er at du laster alle bildene umiddelbart.

 

Ville sett meg om etter en annen lightbox.

[fotorune]

Beklager, så ikke orntli etter...

 

Det ser ut til at du bruker en ren CSS-lightbox sak. Mye finurlige triksfikserier med pseudo-klasser.

Problemet ditt er at du laster alle bildene umiddelbart.

 

Ville sett meg om etter en annen lightbox.

 

Aha vet du om noen/hvor jeg finner en bra lightbox som fungerer på samme måte som den jeg har nå? (uten nav-knapper midt i bildene og fullt av dill dall... men gjerne med keyboard-navigering )

[Wattengård]

Tja... Denne er jo ganske lekker

http://dropthebit.com/500/photobox-css3-image-gallery-jquery-plugin/