Lightbox bad - slimbox good HELP [Archive]

Mejse78

04-24-2012, 01:55 PM

Slimbox

lightbox bad - slimbox good (http://www.dynamicdrive.com/forums/blog.php?b=247)

I'm REALLY PUZZELED..
I can't make the slimbox work in my new setup, and I just don't know why.
The picture just opens up in a new window/tab.

Here's my code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slimbox2.js"></script>

<SCRIPT type="text/javascript" src="js/topmenu/142_jquery.min.js">
/*****SCRIPT FOR BUBBLE****/</SCRIPT>
<LINK rel=stylesheet type=text/css href="css/topmenu/imgbubbles.css">
<LINK rel=stylesheet type=text/css href="css/topmenu/imgbubbles/bubbles.css">

<SCRIPT type="text/javascript" src="js/topmenu/imgbubbles.js">
/*****SCRIPT FOR BUBBLE****/
/***********************************************
* Image Bubbles effect- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</SCRIPT>
<SCRIPT type="text/javascript">
jQuery(document).ready(function($){
$('ul#orbs').imgbubbles({factor:1.55}) //add bubbles effect to UL id="orbs"
})
</SCRIPT>
<SCRIPT type="text/javascript">
jQuery(document).ready(function($){
$('ul#orbs_2').imgbubbles({factor:1.55}) //add bubbles effect to UL id="orbs_2"
})
</SCRIPT>

<SCRIPT language="JavaScript1.2">
/****HIGHLIGHT IMAGE****/
//Highlight image script- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use

function makevisible(cur,which){
strength=(which==0)? 1 : 0.2

if (cur.style.MozOpacity)
cur.style.MozOpacity=strength
else if (cur.filters)
cur.filters.alpha.opacity=strength*100
}

</SCRIPT>

</head>

<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/da_DK/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div id="space" class="border">
<div id="paper">

<div id="banner" align=center>
<img src="images/layout/banner.png" />
</div>

<div id="menu" align="center">
<UL id=orbs class=bubblewrap>
<LI>
<A href="/dw.html"><IMG alt=HJEM src="images/layout/topmenu/hjem.png"></A>

</LI>

<LI>
<A href="/om_mig.html"><IMG alt="OM MIG" src="images/layout/topmenu/ommig.png"></A>

</LI>

<LI>
<A href="/galleri.html"><IMG alt=GALLERI src="images/layout/topmenu/galleri.png"></A>

</LI>

<LI>
<A href="/portefolio.html"><IMG alt=PORTEFOLIO src="images/layout/topmenu/portefolio.png"></A>

</LI>

<LI>
<DIV><A href="/blog.html"><IMG alt=BLOG src="images/layout/topmenu/blog.png"></A>
</DIV>
</LI>
</UL>
</div>

<div id="news">
<h1>Nyheder</h1>

<h2>Relancering</h2>

</div>

<div id="content">

<A title="Dette er blogmenu" href="images/layout/topmenu/blog.png" rel=lightbox-test>><IMG src="images/layout/topmenu/blog.png"></A>
<A title="Dette er gallerimenu" href="images/layout/topmenu/galleri.png" rel=lightbox-test></A>
<A title="Dette er hjemmenu" href="images/layout/topmenu/hjem.png" rel=lightbox-test></A>

</div>

<div id="fb" class="fb-like" data-href="http://www.tegnehulen.dk/index.html" data-send="true" data-layout="button_count" data-width="160" data-show-faces="false"></div>

<div id="footer">
<p class="footer-text">Copyright by MD - Latest update april, 2012</p>
</div>

</div>
</div>

</body>
</html>

AND I checked all the paths - and they line up... :(

Can you see the problem? I would be thankfull for your help.

Mejse78

04-24-2012, 02:23 PM

Okay... I went ahead an deleated properties from my css file, that I don't use (I have Timothy trainings basic css template:

ul { }
ol { list-style-type: decimal; }

ul li { color: #000; font-size:12px; }
ol li { color: #000; font-size:12px; }

dl { }
dt { }
dd { }

table { width: 100%; }

tr { }
.odd { background-color: #eee; }
.even { background-color: #fff; }

th { font-weight: bold; }
thead, th { background: #ccc; }

tbody { }

th, td, caption { }
caption { }

tfoot { }
.tfooter { background-color: #ccc; text-align: center; font-style: italic; }

caption { background: #efefef; }

form { text-align:left; margin:20px; }

label, submit, input, textarea {
border: 0; padding: 0; margin: 0; background: none;
}

label {float: left; width:150px;
text-align: right; display: block;
}

input, textareas
{border: 1px; #000 solid; margin-left: 10px;
}

input {
width: 280px; margin-bottom: 16px;
}

textarea {
width: 280px; height: 150px;
margin-bottom: 16px;
}

select { }
.submit {
width: 90px; height: 25px;
margin-left: 25px;
font-size: 12px;
}

br { clear: left; }

...and now it works!! ?

Can anyone tell me wich one did the trick? - I'm pretty new at this.
:D