-1

I'm trying to get lightbox to run on my gallery. Jquery works since I tested it by having an alert() in the documet.ready() function. But besides that lightbox doesn't seem to work. Or at least I only the links work normally. Here's my code:

<!DOCTYPE html>    
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">      
<head>     

<title></title>    
<meta charset="UTF-8" />       
<meta name="ROBOTS" content="ALL" />       
<meta name="MSSmartTagsPreventParsing" content="true" />       

<meta name="keywords" content="" />    
<meta name="description" content="" />     

<link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>      

<link href="/fuelcms/assets/css/klang.css?c=943916400" media="all" rel="stylesheet"/>      

<base href="http://localhost/fuelcms/index.php" />     

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />      
<meta name="robots" content="index, follow" />     

<script type="text/javascript" src="assets/js/jquery.js"></script>     
<script type="text/javascript" src="assets/js/lightbox/prototype.js"></script>     
<script type="text/javascript" src="assets/js/lightbox/scriptaculous.js?load=effects,builder"></script>    
<script type="text/javascript" src="assets/js/lightbox/lightbox.js"></script>      
<link rel="stylesheet" href="assets/css/lightbox.css" type="text/css" media="screen" />    

</head>    


<body class="gallery index">       
<!--<div class="header"><ul>       
<li class="first"><a href="http://localhost/fuelcms/index.php/repertoire" title="Repertoire">Repertoire</a></li>       
<li><a href="http://localhost/fuelcms/index.php/about" title="&Uuml;ber uns">&Uuml;ber uns</a></li>    
<li><a href="http://localhost/fuelcms/index.php/kontakt" title="Kontakt">Kontakt</a></li>      
<li><a href="http://localhost/fuelcms/index.php/agenda" title="Agenda">Agenda</a></li>     
<li><a href="http://localhost/fuelcms/index.php/gallery" title="Gallerie">Gallerie</a></li>    
<li class="last"><a href="http://localhost/fuelcms/index.php/links" title="Links">Links</a></li>       
</ul>      
</div>-->      

<ul>       
<li class="first"><a href="http://localhost/fuelcms/index.php/repertoire" title="Repertoire">Repertoire</a></li>       
<li><a href="http://localhost/fuelcms/index.php/about" title="&Uuml;ber uns">&Uuml;ber uns</a></li>    
<li><a href="http://localhost/fuelcms/index.php/kontakt" title="Kontakt">Kontakt</a></li>      
<li><a href="http://localhost/fuelcms/index.php/agenda" title="Agenda">Agenda</a></li>     
<li><a href="http://localhost/fuelcms/index.php/gallery" title="Gallerie">Gallerie</a></li>    
<li class="last"><a href="http://localhost/fuelcms/index.php/links" title="Links">Links</a></li>       
</ul>      

<div class="fullpage">     
<div class="colmask">      
<div class="col3">     

<div class="pagination"><a href="http://localhost/fuelcms/index.php/gallery/index/">&lsaquo; First</a>&nbsp;&nbsp;<a href="http://localhost/fuelcms/index.php/gallery/index/7">&lt;</a>&nbsp;<a href="http://localhost/fuelcms/index.php/gallery/index/6">7</a>&nbsp;<a href="http://localhost/fuelcms/index.php/gallery/index/7">8</a><strong>9</strong></div><br><div class="imagebox"><a rel="lightbox[col]" href="assets/images/fotos_site/Gong.JPG"><img src="http://localhost/fuelcms/assets/images/fotos_site/thumbs/Gong_thumb.jpg" alt=""/></a></div><div class="imagebox"><a rel="lightbox[col]" href="assets/images/fotos_site/Fatamorganaschatten.JPG"><img src="http://localhost/fuelcms/assets/images/fotos_site/thumbs/Fatamorganaschatten_thumb.jpg" alt=""/></a></div><div class="imagebox"><a rel="lightbox[col]" href="assets/images/fotos_site/Bumentopf2.JPG"><img src="http://localhost/fuelcms/assets/images/fotos_site/thumbs/Bumentopf2_thumb.jpg" alt=""/></a></div><div class="imagebox"><a rel="lightbox[col]" href="assets/images/fotos_site/Blumentopfdynamik.JPG"><img src="http://localhost/fuelcms/assets/images/fotos_site/thumbs/Blumentopfdynamik_thumb.jpg" alt=""/></a></div><div class="imagebox"><a rel="lightbox[col]" href="assets/images/fotos_site/Blumentopf.JPG"><img src="http://localhost/fuelcms/assets/images/fotos_site/thumbs/Blumentopf_thumb.jpg" alt=""/></a></div><div class="imagebox"><a rel="lightbox[col]" href="assets/images/fotos_site/Blument1.JPG"><img src="http://localhost/fuelcms/assets/images/fotos_site/thumbs/Blument1_thumb.jpg" alt=""/></a></div></div></div><div class="footer" />    
</body>    
</html>

I've also tried with the script tag in the head tag but no difference, please help.

greez almightybob

almightyBob
  • 152
  • 4
  • 12
  • 1
    Are Those numbers inside the script tag intentional? – Ricardo Souza Feb 13 '12 at 23:07
  • 3
    Why are you using such an old version? [Lightbox 2.05](http://lokeshdhakar.com/projects/lightbox2/#download) is been out for quite some time...Or maybe I'm talking about a different plugin? – elclanrs Feb 13 '12 at 23:07
  • have you tried removing the at sign??? $('a[rel*=lightbox]').lightBox(); – André Alçada Padez Feb 13 '12 at 23:13
  • You have the scripts and css twice, you only need it once. – Fogh Feb 13 '12 at 23:16
  • So i went sensible and updated the jquery and Lightbox. It works now besides the Fact that the Closebutton isn't clickable. I checked in lightbox.js and it is a link thats created. After consulting [link](http://outburst.jloop.com/2009/06/19/lightbox-close-button-not-working/) and doing those changes it still doesn't work. Any further Ideas? I'm updating the code... – almightyBob Feb 14 '12 at 14:06

2 Answers2

3

  • you are coding in XHTML (using self-closing tags) but not declaring the XHTML doctype. check this question in SO

  • <link>,<meta> and <base> are self-closing by itself, however, <script> should always be closed by a </script> for safety measures, regardless if external or internal. my IDE (Aptana Studio 3) does it that way (knowing it has built-in validation, it must be "best-practice" in my opinion)

  • although not sure but i think you can omit the @ when selecting the lightbox using the latest jQuery: $('a[rel*=lightbox]').lightBox()

  • how long ago was 1.4? try a more recent jQuery version!

Community
  • 1
  • 1
Joseph
  • 117,725
  • 30
  • 181
  • 234
1

I've had this problem before and solved it by putting the following right before the ending body tag:

<script>
    $.noConflict();
</script>

Maybe that will help you out.

Note: this worked for me using the most recent jQuery (1.7.1) hosted on Google's CDN, and with Lightbox 2.05 located here. Are you using a different Lightbox implementation? If not, you are definitely holding on to very old versions of both jQuery and Lightbox.

Craine
  • 490
  • 8
  • 17