Results 1 to 3 of 3

Thread: Lightbox bad - slimbox good HELP

  1. #1
    Join Date
    Feb 2012
    Location
    Denmark
    Posts
    66
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default Lightbox bad - slimbox good HELP

    Slimbox

    lightbox bad - slimbox good

    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:
    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.

  2. #2
    Join Date
    Feb 2012
    Location
    Denmark
    Posts
    66
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    ..I moved the extra > after rel=lightbox in the first a-tag.. that's not it..

  3. #3
    Join Date
    Feb 2012
    Location
    Denmark
    Posts
    66
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

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

    Code:
    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •