Галерея + Палитра цветов, работающая в IE, не в других
Я думал, что мне разработали это, но к сожалению это не работает в 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?
ОТРЕДАКТИРУЙТЕ В настоящее время, я вставил работу вокруг. Если браузером является IE, я еще называю код как выше, я использую $ .colorbox ({'href': urloflargeimage}). Это не позволяет группироваться изображений для чего-либо кроме IE, но по крайней мере у меня есть лайтбокс.
2 ответа
Galleria удаляет большую часть содержимого вашего контейнера после получения необходимых данных, но оставляет его скрытым в IE из-за ошибки загрузки. Вот почему ваш взлом работает в IE, но не где-либо еще.
Я не уверен, как работает colorbox, но похоже, что он не может взять обычный массив URL-адресов и назначить его как группу изображений, а затем вызвать каждое окно вручную onclick. Но вы могли бы сделать что-то вроде этого (взломать):
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();
});
});
}
});
В теге скрипта отсутствует кавычка. Это похоже на то, что есть в вашем фактическом источнике? Если так, это может серьезно расстроить Firefox.
В частности,
<script type="text/javascript>
должно быть
<script type="text/javascript">