login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Sluit knop (Opgelost)

Offline brechtjah - 17/05/2008 21:32
Avatar van brechtjahNieuw lid Hey,
ik kwam onlangs nog eens op de blizzard fan art site en zag daar dat ze afbeeldingen weergaven met sluit knop erbij, die sluit knop staat iedere keer in de rechterhoek van de afbeelding. Dit zou ik ook nog willen maar ik weet niet hoe dat heet dus kan ik er niet op googlen dus kwam ik het hier vragen, de site is:
http://www.blizzard.co.uk/inblizz/fanart/
Als jullie me zoekwoorden kunnen geven of zelfs een deeltje code zou dat nice zijn...

thx

6 antwoorden

Gesponsorde links
Offline Koen - 17/05/2008 21:33
Avatar van Koen PHP expert Greybox
Lightbox
Photobox
...
Offline brechtjah - 17/05/2008 21:51 (laatste wijziging 17/05/2008 21:57)
Avatar van brechtjah Nieuw lid Deze code over de sluitbutton kon ik vinden tussen al de junk in de js file, maar ik zie niet hoe die ervoor zorgt dat die in de hoek van de img staat...
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="lightbox">
  2. 		<a href="#" onclick="hideLightbox(); return false;" title="Click anywhere to close image">
  3. 			<img id="closeButton" />		
  4. 			<img id="lightboxImage" />
  5. 		</a>
  6. 		<div id="lightboxDetails">
  7. 			<div id="lightboxCaption"></div>
  8. 			<div id="keyboardMsg"></div>
  9. 		</div>
  10. 	</div>
  11.  
  12. 	// preload and create close button image
  13. 	var imgPreloadCloseButton = new Image();
  14.  
  15. 	// if close button image found, 
  16. 	imgPreloadCloseButton.onload=function(){
  17.  
  18. 		var objCloseButton = document.createElement("img");
  19. 		objCloseButton.src = closeButton;
  20. 		objCloseButton.setAttribute('id','closeButton');
  21. 		objCloseButton.style.position = 'absolute';
  22. 		objCloseButton.style.zIndex = '200';
  23. 		objLink.appendChild(objCloseButton);
  24.  
  25. 		return false;
  26. 	}
  27.  
  28. 	imgPreloadCloseButton.src = closeButton;
Offline jerone - 17/05/2008 23:39
Avatar van jerone JS gevorderde Misschien heb j hier wat aan:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="Screenie" class="screenieStyle" style="height: 798px; width: 665px; background-image: url(images/screens/ss089.jpg); cursor: default;">
  2. <img class="closeGifStyle" src="images/menu/closeGif.gif"/>
  3. <img class="fwdGifStyle" src="images/menu/fwdGif.gif"/>
  4. <img class="backGifStyle" src="images/menu/backGif.gif"/>
  5. <div id="Screenie2" class="screenie2Style" style="background-image: url(http://www.blizzard.co.uk/inblizz/fanart/images/screens/ss089.jpg); opacity: 0;"/>
  6. </div>
css code - Bekijk de code zonder highlighting - Klap code in 
  1. .closeGifStyle {ScreenShot.shtml (line 249)
  2. cursor:pointer;
  3. position:absolute;
  4. right:0pt;
  5. top:0pt;
  6. z-index:500;
  7. }
Offline brechtjah - 17/05/2008 23:52 (laatste wijziging 18/05/2008 00:00)
Avatar van brechtjah Nieuw lid Mmm juist,
right: 0;
maar dan moet ik wel van elke afbeelding de grootte weten, even snel zoeken op google voor een javascript hiervoor. Dan kan ik een divtje maken met die width en height.

EDIT: hier:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function getImgSize(id){ 
  2. var pic = document.getElementById(id); 
  3. var h = pic.offsetHeight; 
  4. var w = pic.offsetWidth; 
  5. alert ('The image size is '+w+'*'+h); 
  6. }

Nu nog alles samengooien...
Offline jerone - 17/05/2008 23:58
Avatar van jerone JS gevorderde Je kunt ook gewoon een van de scripts gebruiken die sliphead opnoemde:
Lightbox
Lightbox Plus
ThickBox
sLightBox
LyteBox
Lightbox Gone Wild
Offline brechtjah - 18/05/2008 00:04 (laatste wijziging 18/05/2008 00:32)
Avatar van brechtjah Nieuw lid Oh, met right: 0; blijft hij in de rechterhoek van de pagina, niet in de rechterhoek van de afbeelding -_-
EDIT: kan ik die close img niet relatief tegenover de div met afbeelding plaatsen met right: 0;?
EDIT2:
Dit heb ik eens snel in elkaar gestoken:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  2. 	<head>
  3. 		<style type="text/css">
  4. body {
  5. background-color: #333333;
  6. }
  7. 		</style>
  8. 	</head>
  9.  
  10. 	<body>
  11. 		<div id="Screenie" class="screenieStyle">
  12. 			<div id="Close" style="z-index: 200; position: absolute; text-align: right;">t</div>
  13. <img id="demoImg" src="http://www.goldenstudy.com/bbs/uploadimg//20060228144500426.jpg"> 
  14. <input type="button" onclick="getImgSize('demoImg')" value="Get Image Size"> 
  15. 		</div>
  16. 	</body>
  17. </html>
  18. 		<script type="text/javascript">
  19. function getImgSize(id){ 
  20. var pic = document.getElementById(id); 
  21. var h = pic.offsetHeight; 
  22. var w = pic.offsetWidth; 
  23. alert ('The image size is '+w+'*'+h);
  24. Screenie.style.width=w;
  25. Screenie.style.height=h;
  26. Close.style.width=w;
  27. }
  28. 		</script>
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.168s