лайтбокс не работает, хотя jquery загружен - PullRequest
Новая
       1

лайтбокс не работает, хотя jquery загружен

0 голосов
/ 14 февраля 2012

Я пытаюсь запустить лайтбокс в моей галерее.Jquery работает, так как я протестировал его, имея alert() в функции documet.ready().Но кроме этого лайтбокс, похоже, не работает.Или хотя бы у меня только ссылки работают нормально.Вот мой код: 

<!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>

Я также пытался использовать тег script в теге head, но без разницы, пожалуйста, помогите.

greez almightybob

Ответы [ 2 ]

3 голосов
/ 14 февраля 2012

  • вы кодируете в XHTML (используя самозакрывающиеся теги), но не объявляете тип документа XHTML. отметьте этот вопрос в SO

  • <link>, <meta> и <base> самозакрывающиеся, однако <script> всегда следует закрывать на </script> для обеспечения безопасности, независимо от того, является ли он внешним или внутренним. мой IDE (Aptana Studio 3) делает это таким образом (зная, что он имеет встроенную проверку, по моему мнению, это должно быть "наилучшей практикой")

  • хотя и не уверен, но я думаю, что вы можете опустить @ при выборе лайтбокса с использованием последней версии jQuery: $('a[rel*=lightbox]').lightBox()

  • как давно было 1,4? попробуйте более свежую версию jQuery!

1 голос
/ 14 февраля 2012

У меня была эта проблема раньше, и я решил ее, поставив следующую строку перед конечным тегом body: 

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

Может быть, это поможет вам.

Примечание: для меня это работало с использованием самого последнего jQuery (1.7.1), размещенного на CDN Google, и с Lightbox 2.05 , расположенным здесь . Вы используете другую реализацию Lightbox? Если нет, то вы определенно держитесь за очень старые версии jQuery и Lightbox.

...