Galleria + Colorbox работает в IE, а не в других - PullRequest
Новая
       15

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

1 голос
/ 28 июля 2010

Я думал, что у меня все получилось, но, к сожалению, это не работает в 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?1007 *

РЕДАКТИРОВАТЬ В настоящее время я начал работать вокруг.Если браузер IE, я вызываю код, как указано выше, в противном случае я использую $ .colorbox ({'href': urloflargeimage}).Это не позволяет группировать изображения ни для чего, кроме IE, но по крайней мере у меня есть лайтбокс.

Ответы [ 3 ]

1 голос
/ 31 июля 2010

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();
            });
        });
    }
});
1 голос
/ 09 апреля 2011

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

$(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>
0 голосов
/ 28 июля 2010

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

В частности 

<script type="text/javascript>

должно быть 

<script type="text/javascript">
...