Lightbox JS Oppsett

Nicolasn · 2. januar 2007

Trenger litt hjelp angående Lightbox JS. Problemet er at jeg har lastet opp alle filene; Lightbox.css , Lightbox.JS , Loading.gif , Overlay.gif og Close.gif!

Men problemet er at jeg får ikke den skyggeeffetken til å fungere, og har ikke noen peiling på hvorf jeg skal fikse dette hen? Er det i css-filen eller JS-filen?

Jeg klarer bare ikke finne ut hvor jeg skal gå for å fikse dette. Brukt 5 timer på å skjønne hvordan Lightbox fungerte.

Noen som kunne vært snill å hjulpet meg? :blush:

exess15 · 2. januar 2007

Regner med at det er i cs da css står for designet..

/Jan Tore

Nicolasn · 2. januar 2007

Regner med at det er i cs da css står for designet..

/Jan Tore

7624283[/snapback]

Jaha?

Sliker ivertfall CSS filen, men likevell vil ikke skyggen bak bildene vises, selv om jeg har definert hvor CSS skal hente overlay.png bildet.

Klikk for å se/fjerne innholdet nedenfor

#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}	
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }

#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both;} 
#overlay img{ border: none; }

#overlay{ background-image: url(overlay.png); }

* html #overlay{
background-color: #666;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.freewebs.com/wanp0/overlay.png", sizingMethod="scale");
}
[/skjul]

Endret 2. januar 2007 av Nicolasn

eXZire · 2. januar 2007

Hvilken skyggeeffekt er det du snakker om? Lightbox gir da ingen "skyggeeffekt"?

Erik B. · 2. januar 2007

Sitat fra Lightbox sine sider:

To create the 'shadow' effect over the page, you'll need to use a PNG file and some extra CSS. The CSS is a bit messy thanks to IE's unorthodox support of PNG transparency:

#overlay{ background-image: url(overlay.png); }

* html #overlay{
background-color: #000;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
}

Husket å legge til bildene også?

overlay.png:

Endret 2. januar 2007 av erixz

eXZire · 2. januar 2007

Ah, den "skyggeeffekten". Vil heller bare kalle det en overlay jeg da, men trodde ikke det skulle være særlig problem å få den...

Uansett, vil heller anbefale slimbox enn lightbox:

http://www.digitalia.be/software/slimbox

Tar *mye* mindre plass, og har en del bedre features

Endret 2. januar 2007 av eXZire

Nicolasn · 2. januar 2007

Slimbox var enda mere tricky x|

Jesus, faen å dom jeg er :thumbdown:

altså begynner på scrath jeg. Her ligger Lightbox bildene;

Close.gif (X som man kan trykke på og avslutte)

http://www.freewebs.com/wanp0/close.gif

Loading.gif (Bildet som viser når siden laster bildene)

http://www.freewebs.com/wanp0/loading.gif

Overlay.gif (Altså "skyggen" som ligger bak/rundt bildeboksen)

http://www.freewebs.com/wanp0/overlay.png

Her ligger Lightbox-scriptene;

Css Scriptet

http://www.freewebs.com/wanp0/lightbox.css

JS Scriptet

http://www.freewebs.com/wanp0/lightbox.js

Slik ser CSS-Scriptet MITT ut;

Klikk for å se/fjerne innholdet nedenfor


#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}	
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }

#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both;} 
#overlay img{ border: none; }

#overlay{ background-image: url(overlay.png); }

* html #overlay{
background-color: #000;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.freewebs.com/wanp0/overlay.png", sizingMethod="scale");
}

Slik ser JS-Scriptet mitt ut;

Klikk for å se/fjerne innholdet nedenfor

/*
Lightbox JS: Fullsize Image Overlays 
by Lokesh Dhakar - [url=http://www.huddletogether.com]http://www.huddletogether.com[/url]

For more information on this script, visit:
[url=http://huddletogether.com/projects/lightbox/]http://huddletogether.com/projects/lightbox/[/url]

Licensed under the Creative Commons Attribution 2.5 License - [url=http://creativecommons.org/licenses/by/2.5/]http://creativecommons.org/licenses/by/2.5/[/url]
(basically, do anything you want, just leave my name and link)

Table of Contents
-----------------
Configuration

Functions
- getPageScroll()
- getPageSize()
- pause()
- getKey()
- listenKey()
- showLightbox()
- hideLightbox()
- initLightbox()
- addLoadEvent()

Function Calls
- addLoadEvent(initLightbox)

*/



//
// Configuration
//

// If you would like to use a custom loading image or close button reference them in the next two lines.
var loadingImage = 'loading.gif';  
var closeButton = 'close.gif';  





//
// getPageScroll()
// Returns array with x,y page scroll values.
// Core code from - quirksmode.org
//
function getPageScroll(){

var yScroll;

if (self.pageYOffset) {
 yScroll = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop){  // Explorer 6 Strict
 yScroll = document.documentElement.scrollTop;
} else if (document.body) {// all other Explorers
 yScroll = document.body.scrollTop;
}

arrayPageScroll = new Array('',yScroll) 
return arrayPageScroll;
}



//
// getPageSize()
// Returns array with page width, height and window width, height
// Core code from - quirksmode.org
// Edit for Firefox by pHaez
//
function getPageSize(){

var xScroll, yScroll;

if (window.innerHeight && window.scrollMaxY) {	
 xScroll = document.body.scrollWidth;
 yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
 xScroll = document.body.scrollWidth;
 yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
 xScroll = document.body.offsetWidth;
 yScroll = document.body.offsetHeight;
}

var windowWidth, windowHeight;
if (self.innerHeight) {	// all except Explorer
 windowWidth = self.innerWidth;
 windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
 windowWidth = document.documentElement.clientWidth;
 windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
 windowWidth = document.body.clientWidth;
 windowHeight = document.body.clientHeight;
}	

// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
 pageHeight = windowHeight;
} else { 
 pageHeight = yScroll;
}

// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){	
 pageWidth = windowWidth;
} else {
 pageWidth = xScroll;
}


arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
return arrayPageSize;
}


//
// pause(numberMillis)
// Pauses code execution for specified time. Uses busy code, not good.
// Code from [url=http://www.faqts.com/knowledge_base/view.phtml/aid/1602]http://www.faqts.com/knowledge_base/view.phtml/aid/1602[/url]
//
function pause(numberMillis) {
var now = new Date();
var exitTime = now.getTime() + numberMillis;
while (true) {
 now = new Date();
 if (now.getTime() > exitTime)
 	return;
}
}

//
// getKey(key)
// Gets keycode. If 'x' is pressed then it hides the lightbox.
//

function getKey(e){
if (e == null) { // ie
 keycode = event.keyCode;
} else { // mozilla
 keycode = e.which;
}
key = String.fromCharCode(keycode).toLowerCase();

if(key == 'x'){ hideLightbox(); }
}


//
// listenKey()
//
function listenKey () {	document.onkeypress = getKey; }


//
// showLightbox()
// Preloads images. Pleaces new image in lightbox then centers and displays.
//
function showLightbox(objLink)
{
// prep objects
var objOverlay = document.getElementById('overlay');
var objLightbox = document.getElementById('lightbox');
var objCaption = document.getElementById('lightboxCaption');
var objImage = document.getElementById('lightboxImage');
var objLoadingImage = document.getElementById('loadingImage');
var objLightboxDetails = document.getElementById('lightboxDetails');


var arrayPageSize = getPageSize();
var arrayPageScroll = getPageScroll();

// center loadingImage if it exists
if (objLoadingImage) {
 objLoadingImage.style.top = (arrayPageScroll[1] + ((arrayPageSize[3] - 35 - objLoadingImage.height) / 2) + 'px');
 objLoadingImage.style.left = (((arrayPageSize[0] - 20 - objLoadingImage.width) / 2) + 'px');
 objLoadingImage.style.display = 'block';
}

// set height of Overlay to take up whole page and show
objOverlay.style.height = (arrayPageSize[1] + 'px');
objOverlay.style.display = 'block';

// preload image
imgPreload = new Image();

imgPreload.onload=function(){
 objImage.src = objLink.href;

 // center lightbox and make sure that the top and left values are not negative
 // and the image placed outside the viewport
 var lightboxTop = arrayPageScroll[1] + ((arrayPageSize[3] - 35 - imgPreload.height) / 2);
 var lightboxLeft = ((arrayPageSize[0] - 20 - imgPreload.width) / 2);
 
 objLightbox.style.top = (lightboxTop < 0) ? "0px" : lightboxTop + "px";
 objLightbox.style.left = (lightboxLeft < 0) ? "0px" : lightboxLeft + "px";


 objLightboxDetails.style.width = imgPreload.width + 'px';
 
 if(objLink.getAttribute('title')){
 	objCaption.style.display = 'block';
 	//objCaption.style.width = imgPreload.width + 'px';
 	objCaption.innerHTML = objLink.getAttribute('title');
 } else {
 	objCaption.style.display = 'none';
 }
 
 // A small pause between the image loading and displaying is required with IE,
 // this prevents the previous image displaying for a short burst causing flicker.
 if (navigator.appVersion.indexOf("MSIE")!=-1){
 	pause(250);
 } 

 if (objLoadingImage) {	objLoadingImage.style.display = 'none'; }

 // Hide select boxes as they will 'peek' through the image in IE
 selects = document.getElementsByTagName("select");
       for (i = 0; i != selects.length; i++) {
               selects[i].style.visibility = "hidden";
       }


 objLightbox.style.display = 'block';

 // After image is loaded, update the overlay height as the new image might have
 // increased the overall page height.
 arrayPageSize = getPageSize();
 objOverlay.style.height = (arrayPageSize[1] + 'px');
 
 // Check for 'x' keypress
 listenKey();

 return false;
}

imgPreload.src = objLink.href;

}





//
// hideLightbox()
//
function hideLightbox()
{
// get objects
objOverlay = document.getElementById('overlay');
objLightbox = document.getElementById('lightbox');

// hide lightbox and overlay
objOverlay.style.display = 'none';
objLightbox.style.display = 'none';

// make select boxes visible
selects = document.getElementsByTagName("select");
   for (i = 0; i != selects.length; i++) {
 selects[i].style.visibility = "visible";
}

// disable keypress listener
document.onkeypress = '';
}




//
// initLightbox()
// Function runs on window load, going through link tags looking for rel="lightbox".
// These links receive onclick events that enable the lightbox display for their targets.
// The function also inserts html markup at the top of the page which will be used as a
// container for the overlay pattern and the inline image.
//
function initLightbox()
{

if (!document.getElementsByTagName){ return; }
var anchors = document.getElementsByTagName("a");

// loop through all anchor tags
for (var i=0; i<anchors.length; i++){
 var anchor = anchors[i];

 if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "lightbox")){
 	anchor.onclick = function () {showLightbox(this); return false;}
 }
}

// the rest of this code inserts html at the top of the page that looks like this:
//
// <div id="overlay">
//  <a href="#" onclick="hideLightbox(); return false;"><img id="loadingImage" /></a>
//	</div>
// <div id="lightbox">
//  <a href="#" onclick="hideLightbox(); return false;" title="Click anywhere to close image">
//  	<img id="closeButton" />  
//  	<img id="lightboxImage" />
//  </a>
//  <div id="lightboxDetails">
//  	<div id="lightboxCaption"></div>
//  	<div id="keyboardMsg"></div>
//  </div>
// </div>

var objBody = document.getElementsByTagName("body").item(0);

// create overlay div and hardcode some functional styles (aesthetic styles are in CSS file)
var objOverlay = document.createElement("div");
objOverlay.setAttribute('id','overlay');
objOverlay.onclick = function () {hideLightbox(); return false;}
objOverlay.style.display = 'none';
objOverlay.style.position = 'absolute';
objOverlay.style.top = '0';
objOverlay.style.left = '0';
objOverlay.style.zIndex = '90';
 objOverlay.style.width = '100%';
objBody.insertBefore(objOverlay, objBody.firstChild);

var arrayPageSize = getPageSize();
var arrayPageScroll = getPageScroll();

// preload and create loader image
var imgPreloader = new Image();

// if loader image found, create link to hide lightbox and create loadingimage
imgPreloader.onload=function(){

 var objLoadingImageLink = document.createElement("a");
 objLoadingImageLink.setAttribute('href','#');
 objLoadingImageLink.onclick = function () {hideLightbox(); return false;}
 objOverlay.appendChild(objLoadingImageLink);
 
 var objLoadingImage = document.createElement("img");
 objLoadingImage.src = loadingImage;
 objLoadingImage.setAttribute('id','loadingImage');
 objLoadingImage.style.position = 'absolute';
 objLoadingImage.style.zIndex = '150';
 objLoadingImageLink.appendChild(objLoadingImage);

 imgPreloader.onload=function(){};	//	clear onLoad, as IE will flip out w/animated gifs

 return false;
}

imgPreloader.src = loadingImage;

// create lightbox div, same note about styles as above
var objLightbox = document.createElement("div");
objLightbox.setAttribute('id','lightbox');
objLightbox.style.display = 'none';
objLightbox.style.position = 'absolute';
objLightbox.style.zIndex = '100';	
objBody.insertBefore(objLightbox, objOverlay.nextSibling);

// create link
var objLink = document.createElement("a");
objLink.setAttribute('href','#');
objLink.setAttribute('title','Click to close');
objLink.onclick = function () {hideLightbox(); return false;}
objLightbox.appendChild(objLink);

// preload and create close button image
var imgPreloadCloseButton = new Image();

// if close button image found, 
imgPreloadCloseButton.onload=function(){

 var objCloseButton = document.createElement("img");
 objCloseButton.src = closeButton;
 objCloseButton.setAttribute('id','closeButton');
 objCloseButton.style.position = 'absolute';
 objCloseButton.style.zIndex = '200';
 objLink.appendChild(objCloseButton);

 return false;
}

imgPreloadCloseButton.src = closeButton;

// create image
var objImage = document.createElement("img");
objImage.setAttribute('id','lightboxImage');
objLink.appendChild(objImage);

// create details div, a container for the caption and keyboard message
var objLightboxDetails = document.createElement("div");
objLightboxDetails.setAttribute('id','lightboxDetails');
objLightbox.appendChild(objLightboxDetails);

// create caption
var objCaption = document.createElement("div");
objCaption.setAttribute('id','lightboxCaption');
objCaption.style.display = 'none';
objLightboxDetails.appendChild(objCaption);

// create keyboard message
var objKeyboardMsg = document.createElement("div");
objKeyboardMsg.setAttribute('id','keyboardMsg');
objKeyboardMsg.innerHTML = 'press <a href="#" onclick="hideLightbox(); return false;"><kbd>x</kbd></a> to close';
objLightboxDetails.appendChild(objKeyboardMsg);


}




//
// addLoadEvent()
// Adds event to window.onload without overwriting currently assigned onload functions.
// Function found at Simon Willison's weblog - [url=http://simon.incutio.com/]http://simon.incutio.com/[/url]
//
function addLoadEvent(func)
{	
var oldonload = window.onload;
if (typeof window.onload != 'function'){
   	window.onload = func;
} else {
 window.onload = function(){
 oldonload();
 func();
 }
}

}



addLoadEvent(initLightbox);	// run initLightbox onLoad

Slik ser selv html-scriptet ut på selve siden, det som er merket med tykk skrift her, er slik som jeg ble fortalt å gjøre på den engelske framgangsmåten.

Klikk for å se/fjerne innholdet nedenfor

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<BODY BACKGROUND=" ADDRESSE FOR BAKGRUNN">

<title>Wanpo.tk - Welkommen</title>

<style type="text/css">
body{
background-color: black;
text-align: center;
}
#container{
width: 900px;
text-align: left;
margin-left: auto;
margin-right: auto;
}
#header{
background-image: url(http://www.freewebs.com/wanp0/Julebanner.jpg);
border-right: 2px solid #8C7E6A;
border-left: 2px solid #8C7E6A;
border-top: 2px solid #8C7E6A;
border-bottom: 2px solid #8C7E6A;
height: 100px;
width: 900px;
background-repeat: no-repeat;
margin-bottom: 2px;
}
#contentleft{
float: left;
display: inline;
width: 150px;
border-top:1px solid  #8C7E6A;
border-right:1px solid #8C7E6A;
       border-left:1px solid #8C7E6A;
border-bottom: 1px solid #8C7E6A;
       padding-left: 5px;
padding-right: 5px; 
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
margin-bottom: 5px;
}
#content{
float: center;
       padding-left: 5px;
border-right: 1px solid #8C7E6A;
border-left: 1px solid #8C7E6A;
border-top: 1px solid #8C7E6A;
border-bottom: 2px solid #8C7E6A;
float: right;
display: inline;
width: 720px;
border-top: 1px solid #8C7E6A;
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
margin-bottom: 5px;
}
#footer{
clear: both;
border-top: 2px solid #8C7E6A;
text-align: center;
padding: 5px;
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
}
a:link{
text-decoration:none;
color:#990000;
}
a:link{
text-decoration:none;
color:#990000;
}
a:visited{
text-decoration:none;
color:#990000;
}
a:hover{
text-decoration:none;
color:#ECD0A8;
}
.boxSidebar{
margin-bottom: 10px;
}
.entriEs{
margin-bottom: 15px;
border-bottom: 1px solid #FFFFFF;
padding-bottom: 5px;
}
h2.sectiontitle, h2.itemtitle{
float: center;
color:#8C7E6A;
text-decoration:overline;
border-bottom:1px solid #8C7E6A;
font-size: 11px;
font-weight: bold;
letter-spacing: 3px;
}
b{
color: #FF0000;
}
.data{
color: #FF0000;
font-size: 10px;
}
blockquote{
background-color: #000000;
border: 1px inset #000000;
color: #8C7E6A;
padding: 5px;
font-style: italic;
}
ul{
list-style-type: decimal;
 	padding-left: 12px;
 margin-left: 5px; 
line-height: 15px;
color: #FFFFFF;
}
td,th{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
}
input, select, textarea{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FF0000;
background-color: transparent;
border: 1px solid #8C7E6A;
margin-bottom: 2px;
}
/*  comments */
.comments{
margin: 10px 0px 10px 0px;
border-bottom: 1px solid #8C7E6A;
border-top: 1px solid #8C7E6A;
color: #8C7E6A;
padding: 2px 0px 2px 2px;
font-weight: bold;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
letter-spacing: 1px;
text-transform: lowercase;
}
.commentsbody{
border: 1px solid #8C7E6A;
margin-bottom: 10px;
color: #FFFFFF;
padding: 5px;
}
.commentsData{
 font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FF0000;
text-align: left;
}
.delete{
 text-align: right;
}
.sidebar-title{
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #8C7E6A;
text-decoration: underline;
text-align: center;
}

</style>

<div id="container">
   	<div id="header">

<bR>
</div>

 
 	<div id="contentleft">
   <!-- 1 -->
   	<div class="boxSidebar">
     <h2 class="sectiontitle"> <a><img src="http://www.freewebs.com/wanp0/Navigasjonsbar.gif" border="0" /></a></h2>
<b><a href="http://www.freewebs.com/wanp0/Hovedside.htm">HOVEDSIDE</a></li><br>
<b><a href="http://www.freewebs.com/wanp0/Om%20meg.htm">OM MEG</a><b><br>
<b><a href="http://www.freewebs.com/wanp0/Venner.htm">VENNER</a><b><br>
<b><a href="http://www.freewebs.com/wanp0/Kamprelatert.htm">KAMPRELATERT</a></b><br>
<b><a href="http://www.freewebs.com/wanp0/Diverse%20bilder.htm">DIVERSE BILDER</a></b><br>

   	</div>
   	<div class="boxSidebar">
<h2 class="sectiontitle">En Hilsen?</h2>

<!-- BEGIN CBOX - [url=http://www.cbox.ws]http://www.cbox.ws[/url] -->
<div align="center" id="cboxdiv">
<iframe frameborder="0" width="150" height="200" src="http://www3.cbox.ws/box/?boxid=2445770&boxtag=7231&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border: 0px solid;" id="cboxmain"></iframe><br>
<iframe frameborder="0" width="160px" height="80" src="http://www3.cbox.ws/box/?boxid=2445770&boxtag=7231&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border: 0px solid;border-top:0px" id="cboxform"></iframe>
</div>
<!-- END CBOX -->

<br>
<h2 class="sectiontitle">Linker</h2>
<A href="http://www.gutans.net"><IMG src="http://www.freewebs.com/nicolasjkd/Linker/gutansbanner.png"></A>
<bR>
<A href="http://www.iform.no"><IMG src="http://www.freewebs.com/nicolasjkd/Linker/iform.jpg"></a>
<br>
<A href="http://www.linevictoriaa.piczo.com/?cr=5&rfm=y"><IMG src="http://www.freewebs.com/nicolasjkd/Linker/Line%20Victorias%20link.jpg"></A>
<br>
<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()">
<A href="http://www.fitnessprat.no"><IMG src="http://www.freewebs.com/nicolasjkd/Linker/fitnesspratlogo.jpg"></a>
</form>
</div>
<div class="boxSidebar">

<script type='text/javascript'>
</script>              








   	</div>

 	</div>
 
 
 
 <!-- inizio contenuto principale blog -->
 	<div id="content">
 <!-- BEGIN BLOGGER CODE -->
                                  
                                  <!-- BEGIN ENTRIES -->
     <div class="entriEs">
     	<h2 class="itemtitle"><br>Om Meg<br /><div class="dateheader"></div></h2>
     	<div class="itemPost"><div style="clear:both;"></div><div style="text-align: left;">

<!--Start LightboxJS-->
[b]<script type="text/javascript" src="lightbox.js"></script>[/b]
<!--End LightboxJS-->

Tja, hva kan vell sies om meg? 
Jeg har ihverfall en egen evne til og utsette ting lengst mulig, og er jeg på mitt verste 
så kan jeg komme med ca 7 unnskyldninger som faktisk virker.
<br> 
Er til tider ganske morsom, men kan fort blir veldig irriterende for enkelte personer! xD
<bR>
På fritiden min trener jeg, noe som kan fort legges merke til på skolen. Hvor jeg alltid kan finne på å ta en liten høneblund her og der.<bR>
Øøh, digger det meste innen Rapp, R&B/HipHop men kan faktisk høre på noe klassisk musikk xD<br>...Og Trance kan tid til en annen dukke opp på anlegget!<bR>
Mer orker jeg ikke å skrive om, så faack off! xD
<bR>
<bR>
Til slutt vil jeg bare si; Jeg vet jeg er selvdigger, med tanke på kroppsbildene, men det er sånn jeg har blitt...
<bR>
(Hvem sin skyld er det da?(A))Før klaget folk over hvor liten og spinkel jeg var, å nå, klager de fordi jeg har kroppsbilder...<bR>
...Hva gjør jeg feil?
<bR>
<br>
P.S. Jækk! Jeg hater frimerker! 
<BR>
<BR>
[b]<a href="http://www.freewebs.com/nicolasjkd/Om%20meg/3.jpg" rel="lightbox" title="my caption">[/b]
<img src="http://www.freewebs.com/nicolasjkd/Om%20meg/3.jpg"HSPACE=0 VSPACE=0 width="100" height="80" border="1"></a>
<BR>
<BR>
<br /><br /></div><div style="clear:both; padding-bottom: 0.25em;"></div></div>
     	<div class="data">
       Oppdatert 09.12.06 - Kl 20.00 PM</a></span><br />
       
     	</div>
     </div>
   	<!-- END ENTRIES -->

<div class="entriEs">
     	<h2 class="itemtitle"><br><br /><div class="dateheader"></div></h2>
     	<div class="itemPost"><div style="clear:both;"></div><div style="text-align: left;">
<P>
<TABLE cellSpacing=2 cellPadding=2 width="50%" border=0>
<TBODY>
<TR>
<TD> <b>Liker</b></TD>
<TD> </TD>
<TD> </TD>
<TD> <b>Liker Ikke</b></TD></TR>
<TR>
<TD> -</TD>
<TD> Sol</TD>
<TD> -</TD>
<TD> Dårlig vær</TD></TR>
<TR>
<TD> -</TD>
<TD> Trene</TD>
<TD> -</TD>
<TD> Ståopp tidlig</TD></TR>
<TR>
<TD> -</TD>
<TD> Sove</TD>
<TD> -</TD>
<TD> Når mobilen streiker</TD></TR>
<TR>
<TD> -</TD>
<TD> Tekken 5</TD>
<TD> -</TD>
<TD> Mangler filmer</TD></TR>
<TR>
<TD> -</TD>
<TD> Mat</TD>
<TD> -</TD>
<TD> Snø (Til Tider)</TD></TR>
<TR>
<TD> -</TD>
<TD> Gaver</TD>
<TD> -</TD>
<TD> Dårlige stoler</TD></TR>
<TR>
<TD> -</TD>
<TD> Posere</TD>
<TD> -</TD>
<TD> Plagsomme folk</TD></TR>
<TR>
<TD> -</TD>
<TD> Nyse</TD>
<TD> -</TD>
<TD> Fryse på føttene</TD></TR>
<TR>
<TD> -</TD>
<TD> Is</TD>
<TD> -</TD>
<TD> V?re sulten</TD></TR>
<TR>
<TD> -</TD>
<TD> Lyseblå</TD>
<TD> -</TD>
<TD> Miste vannflaska mi</TD></TR>
<TR>
<TD> -</TD>
<TD> Musikk</TD>
<TD> -</TD>
<TD> Kjærlighetssanger</TD></TR>
<TR>
<TD> -</TD>
<TD> Gode dager</TD>
<TD> -</TD>
<TD> Dårlige filmer</TD></TR>
<TR>
<TD> -</TD>
<TD> Tyggis</TD>
<TD> -</TD>
<TD> Nakkevondt</TD></TR>
<TR>
<TD> -</TD>
<TD> Kule folk</TD>
<TD> -</TD>
<TD> Trene mage</TD></TR>
<TR>
<TD> -</TD>
<TD> Nye ting</TD>
<TD> -</TD>
<TD> Jazz</TD></TR>
<TR>
<TD> -</TD>
<TD> Donald</TD>
<TD> -</TD>
<TD> Og være tom for hårvax</TD></TR>
<TR>
<TD> -</TD>
<TD> Bade</TD>
<TD> -</TD>
<TD> Kjede meg</TD></TR></TBODY></TABLE></P>
<br /><br /></div><div style="clear:both; padding-bottom: 0.25em;"></div></div>
     	<div class="data">
       Oppdatert 03.12.06 - Kl 19.10 PM</a></span><br />
       
     	</div>
     </div>
   	<!-- END ENTRIES -->
 	
 <!-- END BLOGGER CODE -->

 	</div>
 <!-- fine contenuto principale blog -->
 
 
 <!-- inizio footer -->
 	<div id="footer">

<!-- Start of StatCounter Code -->
<p align="center"><a href="http://www.statcounter.com/" target="_blank"><img src="http://c20.statcounter.com/counter.php?sc_project=2092157&java=0&security=80de66ae&invisible=0" alt="web stats script" border="0""></a>
<!-- End of StatCounter Code -->
</p>
<br>
Copyright©Mr.Johnsen. All Rights Reserved.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Er det noen som virkelig orker eller kan ta seg tid til å sjekke ut dette og fortelle meg hva jeg gjør galt=( Jeg har prøvd så innmari mye å skjønne, lese rundt på nettet, google det, men jeg finner ingen løsning liksom. Foressten så bruker jeg Freewebs.com som serverplass.

Endret 2. januar 2007 av Nicolasn

Nicolasn · 2. januar 2007

Nei nei, han mener bare på forumet, for å gjøre det litt lettere å se. Kan også gjerne ta en spoiler på det.

7627389[/snapback]

okei, det kan ikke jeg da.. :!:

ZeS · 2. januar 2007

bruk [.skjul] [./skjul] tagene man! herre for et rot (uten . selfølgelig)

Klikk for å se/fjerne innholdet nedenfor

blablabla

Endret 2. januar 2007 av ZeS

enden · 2. januar 2007

Fixed. Trådstarter, smekk meg hvis jeg har gjort noe feil

Så til temaet. I HTML-koden du ahr limt inn kan jeg ikke se at du har lagt inn noe som helst fra lightbox. Du trenger å plassere CSS-en som fulgte lightbox sammen med resten av CSS-en din (mellom style-taggene for å være presis). Videre må du linke til javascriptet. Det står vel hvordan i bruksanvisningen til lightbox. Husker ikke nøyaktig hvordan nå, men det er en linje med <link rel" osv. Da har du en god start i alle fall

Et lite tips vi være å trekke CSS-en ut i en egen fil som du linker tilsvarende javascriptet. Det er mye mer oversiktelig. Hva er forresten denne CBOX-greia du limer inn?

Endret 2. januar 2007 av enden

Nicolasn · 2. januar 2007

Fixed. Trådstarter, smekk meg hvis jeg har gjort noe feil

7628550[/snapback]

Smekker ikke folk uten at de er frekke mot meg :mrgreen:

Er deg evig takknemlig, for som sagt; jeg er noob i huet når det gjelder data og programmering. :love:

Endret 2. januar 2007 av Nicolasn

Nicolasn · 2. januar 2007

Fixed. Trådstarter, smekk meg hvis jeg har gjort noe feil

Så til temaet. I HTML-koden du ahr limt inn kan jeg ikke se at du har lagt inn noe som helst fra lightbox. Du trenger å plassere CSS-en som fulgte lightbox sammen med resten av CSS-en din (mellom style-taggene for å være presis). Videre må du linke til javascriptet. Det står vel hvordan i bruksanvisningen til lightbox. Husker ikke nøyaktig hvordan nå, men det er en linje med <link rel" osv. Da har du en god start i alle fall

Et lite tips vi være å trekke CSS-en ut i en egen fil som du linker tilsvarende javascriptet. Det er mye mer oversiktelig. Hva er forresten denne CBOX-greia du limer inn?

7628550[/snapback]

Tror jeg gir opp hele Lightbox opplegget jeg, er bare den j**** "skyggeeffekten" som jeg ikke får til å fungere.

Den CBOX-greia er en liten shoutebox som jeg har på høyre side

enden · 2. januar 2007

Neida, du trenger ikke gi opp. Det er egentlig ganske enkelt Gi meg linken til der du lastet ned lightbox, så vi snakker samme versjon (det er en del ulike etter hvert). Jeg hjelper deg

Skyggeeffekten mangler sannsynligvis fordi du bruker IE og ikke har lastet inn et lite hack for å fikse en feil som er innebygget i IE... Møkkabrowser

Endret 2. januar 2007 av enden

Nicolasn · 2. januar 2007

Neida, du trenger ikke gi opp. Det er ganske enkelt Gi meg linken til der du lastet ned lightbox, så vi snakker samme versjon (det er en del ulike etter hvert). Jeg hjelper deg

7628687[/snapback]

Her er den

Lightbox JS

Bruker forresten Opera 9.10 :hmm:

Endret 2. januar 2007 av Nicolasn

enden · 2. januar 2007

Et sted mellom <head> og </head> limer du inn følgende:

<script type="text/javascript" src="lightbox.js"></script>

der lightbox.js må være den korrekte siten til js-fila du har lastet opp. Da er selve scriptet på plass og det fungerer litt forkrøplet siden det ikke er stylet på noen måte.

For å stile det må følgende legges til stilarket ditt:

#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}	
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }

#lightbox img{ border: none; } 
#overlay img{ border: none; }

Stilarket er det som er mellom <style> og </style>

Legg det helt nederst rett over </style>

For å hacke det til for IE (anbefales) tar du også med i stilarket

#overlay{ background-image: url(overlay.png); }

* html #overlay{
background-color: #000;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
}

Legg dette under det andre

Verre skal det ikke være. Bildene ligger normalt sammen med js-fila.

Nicolasn · 2. januar 2007

Maaaaaan! :whistle:

I Could kiss you enden :love:

Yee! Tusen takk for hjelpen og for at du hadde tålmodighet med meg.

Nå funker det som fett!

Men bare en ting, hvorfor forsvinner hele siden min med bilder, linker og div når det kommer skygge og det bildet som vises?

Endret 2. januar 2007 av Nicolasn

enden · 3. januar 2007

Forsvinner? Jeg bruker riktignok en annen versjon, men overlay-png-bildet (skyggen som du kaller det) skal være gjennomsiktig slik at du skal se siden i bakgrunnen. Tror du må linke til et eksempel.

Nicolasn · 3. januar 2007

Forsvinner? Jeg bruker riktignok en annen versjon, men overlay-png-bildet (skyggen som du kaller det) skal være gjennomsiktig slik at du skal se siden i bakgrunnen. Tror du må linke til et eksempel.

7632299[/snapback]

Ja, jo, men det skjedde bare en gang for å være mer presis. Overlayen kom slik den skulle og det du kunne se siden min i bakgrunn, men denne ene gangen forsvant alt bak overlayen og bare det eksakte bildet som jeg trykte på ble vist med skyggen.

Endret 3. januar 2007 av Nicolasn

enden · 3. januar 2007

Kan ikke si at jeg har vært borti det. Hvis det ikke har skjedd etter den ene gangen så kan vi sikkert kalle det en glitch

Nicolasn · 3. januar 2007

Kan ikke si at jeg har vært borti det. Hvis det ikke har skjedd etter den ene gangen så kan vi sikkert kalle det en glitch

7632517[/snapback]

Glitch er det samme som glipp? :hrm:

Forresten, hvis skal jeg legge inn slimbox,skal man gjøre det nesten likt som med Lightbox?

Endret 3. januar 2007 av Nicolasn

Lightbox JS Oppsett

Anbefalte innlegg

Lenke til kommentar

Videoannonse

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer