jQuery автоматически добавляет href, равный адресу изображения - PullRequest
Новая
       8

jQuery автоматически добавляет href, равный адресу изображения

0 голосов
/ 19 октября 2011

У меня есть div с некоторыми изображениями, которые открываются на лайтбоксе (prettyphoto). Используя один код jquery, я автоматически открыл эти изображения на лайтбоксе, дав атрибут rel всем элементам div. С помощью CSS я выбрал миниатюры ширина / высота.

Теперь мне нужен похожий код, чтобы автоматически добавить ссылку на себя. Это возможно?

Я имею в виду, мне нужно будет только загрузить изображения через бэк-офис, без необходимости загружать миниатюру, затем полноразмерное изображение и, наконец, добавить ссылку.

Вот HTML: 

<div id="tab2" class="tab_content" style="text-align:center">
           <img src="images/img1_thumb.jpg" alt="image1"/>
        </div>

JQuery: 

$(document).ready(function(){

            $('div.tab_content a').attr('rel', 'prettybox[grandsuite]')

            $("div.tab_content a").prettyPhoto({animation_speed:'normal',theme:'facebook',slideshow:false, autoplay_slideshow: false, social_tools:false, show_title:false, overlay_gallery:false});

        });

Спасибо!

1 Ответ

1 голос
/ 19 октября 2011

Хорошо, вам нужно:

  • получить каждый элемент из Dom
  • , получить его атрибут "href"
  • replace "_thumb.jpg"с ".jpg"
  • и, наконец, создайте окружающий элемент с "href", установленным в исходное местоположение изображения

Давайте сделаем это: 

// Wrap all <img> with an <a> tag and set the link target to the image's src
$("div.tab_content img").wrap(function(){
    return '<a href="' + $(this).attr('src').replace('_thumb.jpg', '.jpg') + '"/>';
});
...