Galleria + Colorbox работает в IE, а не в других

Question

Я думал, что это сработало, но, к сожалению, это не работает в FF или Chrome. У меня есть список изображений, которые я хотел бы показывать как слайд-шоу с карусели на моей странице. Когда пользователь нажимает на большее изображение, я хотел бы открыть полноразмерное изображение в лайтбокс. Вот код, который работает в IE:

<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script> 
<script src="Scripts/galleria.js" type="text/javascript"></script> 
<script src="Scripts/galleria.classic.js" type="text/javascript"></script> 
<script src="Scripts/jquery.colorbox-min.js" type="text/javascript"></script> 


<script type="text/javascript"> 
$(document).ready(function() { 
    $('a[rel=test]').colorbox(); 

    $('#exteriorSlideShow_gallery').galleria({ 
     max_scale_ratio: 1, 
     image_crop: false, 
     height: 210, 
     transition: 'fade', 
     extend: function() { 
      this.bind(Galleria.LOADFINISH, function(e) { 
       $(e.imageTarget).click(this.proxy(function(e) { 
        e.preventDefault(); 
        $('a[rel=test]').eq(this.active).click(); 
       })); 
      }); 
     } 
    }); 
}); 
</script> 

В приведенном выше описании «this.active» представляет собой индекс изображения, в котором карусель находится в данный момент. Поскольку он находится в том же порядке, отображаются ссылки ниже, это соответствует правильной ссылке, которую я бы нажал.

<div id="exteriorSlideShow_gallery"> 
    <a href="/Images/ORIG1.gif" rel="test"><img src='/Images/THUMB1.gif' /></a> 
    <a href="/Images/ORIG2.gif" rel="test"><img src='/Images/THUMB2.gif' /></a> 
    <a href="/Images/ORIG3.gif" rel="test"><img src='/Images/THUMB3.gif' /></a> 
</div> 

Кто-нибудь знает, почему это не будет работать ничем, кроме IE?

EDIT На данный момент я начал работать. Если браузер IE, я вызываю код, как указано выше, я использую $ .colorbox ({'href': urloflargeimage}). Это не позволяет группировать изображения ни для чего, кроме IE, но, по крайней мере, у меня есть лайтбокс.

Answer 1

Galleria раздевает большую часть содержимого контейнера после захвата необходимых данных, но она оставляет его спрятанным в IE из-за загрузки ошибки. Вот почему ваш хак работает в IE, но не в другом месте.

Я не уверен, как работает colorbox, но похоже, что он не может принимать нормальный массив URL-адресов и назначать его как группу изображений, а затем вызывать каждое окно вручную при нажатии. Но вы могли бы сделать что-то подобное (взломать):

var box = $('a[rel=test]').clone().colorbox(); // save the colorbox array 

$('#exteriorSlideShow_gallery').galleria({ 
    extend: function() { 
     this.bind(Galleria.LOADFINISH, function(e) { 
      var index = this.active; 
      $(e.imageTarget).bind('click', { active: this.active }, function(ev) { 
       box.eq(ev.data.active).click(); 
      }); 
     }); 
    } 
}); 

Answer 2

В теге скрипта отсутствует символ кавычки. Так ли это в вашем реальном источнике? Если это так, это может серьезно расстроить Firefox.

В частности

<script type="text/javascript> 

должен быть

<script type="text/javascript"> 

Answer 3

Я решил это. Вы должны поместить ссылки вне контейнера galleria, отдельно от изображений, а затем щелкнуть их по щелчку изображения. Например:

$(document).ready(function(){ 

Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js'); 
$('a[rel="lightbox"]').colorbox(); 
var targ; 

$("#gallery").galleria({ 
    autoplay: 6000, 
    transitionSpeed: 1000, 
    transitionInitial: 'fade', 
    width: 958, 
    height: 443, 
    imageCrop: 'width', 
    minScaleRatio: 1, 
    extend: function() { 
     this.bind(Galleria.IMAGE, function(e) { 

      $(e.imageTarget).css('cursor','pointer'); 

      $(e.imageTarget).click(this.proxy(function() { 

       targ = $(e.imageTarget).attr('src'); 

       $('a[href="'+targ+'"]').click(); 

      })); 
     }); 
    } 

}); 

});

и HTML выглядит следующим образом:

<div id="gallery"> 
    <img src="images/jqIm4.jpg" /> 
    <img src="images/jqIm5.jpg" /> 
</div> 
<div id="source"> 
    <a href="images/jqIm4.jpg" rel="lightbox"></a> 
    <a href="images/jqIm5.jpg" rel="lightbox"></a>    
</div>