Настройка изображения для ссылки на себя и открыть в Colorbox - PullRequest
Новая
       22

Настройка изображения для ссылки на себя и открыть в Colorbox

3 голосов
/ 20 июля 2011

У меня есть изображение, которое было изменено с помощью CSS, чтобы отобразить его как 100x100px на странице HTML. При нажатии я хочу открыть изображение в палитре цветов, чтобы пользователь мог видеть версию без изменения размера / сжатой, как обычно.

Я разработал, как установить путь к href самому себе (так что это не нужно менять каждый раз) (см. Ниже), хотя не уверен, как заставить работать часть colorbox - я попытался изменить 'each' to 'colorbox' - в соответствии с тем, как вы обычно назначаете colorbox, и он открывается, он просто не загружает изображение в нем: S

Любые указатели были бы хороши - 

<div class="logoImage"><img src="../tym_img_shared/background-2.jpg" alt="Your company logo" /></div>

 $(document).ready(function(){
$('div.logoImage img').each(function(){
    var $this = $(this);
    $this.wrap('<a href="' + $this.attr('src') + '"></a>');
});

});

ОБНОВЛЕНИЕ: если подумать, возможно, было бы проще также установить атрибут 're' ссылки вист, устанавливающей источник?

ОБНОВЛЕНИЕ: 

$(document).ready(function(){
    $('div.logoImage img').each(function(){
        var $this = $(this);
        $this.wrap('<a rel="gallery" href="' + $this.attr('src') + '"></a>');
    });

});

По какой-то причине не работает - но работает, если я жестко закодировал URL и rel?

Ответы [ 2 ]

5 голосов
/ 21 июля 2011

Это сделал трюк ... 

$(document).ready(function(){
  $('.logoImage img').each(function(){
        var anchor = $('<a/>').attr({'href': this.src}).colorbox({height: "90%", title: "Your Company Logo"});
        $(this).wrap(anchor);
  });
});
0 голосов
/ 26 августа 2015

Для тех, кто ищет, вот чистая версия JavaScript без цвета: 

var elements = Array.prototype.slice.call(document.getElementsByTagName('img'));
elements.forEach(function(el, i){
    var newHTML = "<a href='"+ el.src +"'>" + el.outerHTML + "</a>";
    el.outerHTML = newHTML;
});
...