X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> JS вопрос: Как добавить ссылку к картинке?
Rombi
Rombi
Topic Starter сообщение 25.3.2014, 18:45; Ответить: Rombi
Сообщение #1


3TAJIOH
******

Группа: Active User
Сообщений: 1042
Регистрация: 14.6.2010
Из: Самара
Поблагодарили: 244 раза
Репутация:   45  


Хочу сделать лайтбокс для картинок, которые больше определенной ширины.
Но почему-то никак не получается добавить тег A перед img и закрыть его после.
Перепробовал уже и append/prepend и children/parent и html и еще кучу всего.
Подскажите, плиз, как из обычной картинки сделать ссылку-картинку =)

Сообщение отредактировал Rombi - 25.3.2014, 18:47


--------------------
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ultimato
ultimato
сообщение 25.3.2014, 19:38; Ответить: ultimato
Сообщение #2


Новичок
*

Группа: User
Сообщений: 40
Регистрация: 13.7.2012
Поблагодарили: 6 раз
Репутация:   0  


Попробуй так с jQuery :)
Код
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>

<script type="text/javascript" charset="utf8">
  $(document).ready(function(){
    var images = document.getElementsByTagName('img');
    for (var i = 0; i < images.length; i++) {
      var image = images[i];
      var parentElement = image.parentElement;
      var a = document.createElement('a');
      a.href = image.getAttribute('src');
      a.appendChild(image);
      parentElement.appendChild(a);
    }
  });
</script>


--------------------
Создание сайтов на WordPress и OpenCart
Верстка натяжка решение неисправности и.т.


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Tollun
Tollun
сообщение 25.3.2014, 19:51; Ответить: Tollun
Сообщение #3


Старожил
******

Группа: Active User
Сообщений: 1595
Регистрация: 1.10.2009
Из: Хабаровск
Поблагодарили: 394 раза
Репутация:   66  


в ссылки должна быть ссылка из src?


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Rombi
Rombi
Topic Starter сообщение 25.3.2014, 20:06; Ответить: Rombi
Сообщение #4


3TAJIOH
******

Группа: Active User
Сообщений: 1042
Регистрация: 14.6.2010
Из: Самара
Поблагодарили: 244 раза
Репутация:   45  


ultimato, спасибо, помогло.

Tollun, разумеется)


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Tollun
Tollun
сообщение 25.3.2014, 20:08; Ответить: Tollun
Сообщение #5


Старожил
******

Группа: Active User
Сообщений: 1595
Регистрация: 1.10.2009
Из: Хабаровск
Поблагодарили: 394 раза
Репутация:   66  


Код
<script>
$(document).ready(function (){
  $('img').each(function(){
    var url = $(this).attr('src')
    $(this).wrap('<a href="'+ url +'"></a>')
  });
});
</script>


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ultimato
ultimato
сообщение 25.3.2014, 20:08; Ответить: ultimato
Сообщение #6


Новичок
*

Группа: User
Сообщений: 40
Регистрация: 13.7.2012
Поблагодарили: 6 раз
Репутация:   0  


Rombi, рад помочь :)


--------------------
Создание сайтов на WordPress и OpenCart
Верстка натяжка решение неисправности и.т.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Tollun
Tollun
сообщение 25.3.2014, 20:09; Ответить: Tollun
Сообщение #7


Старожил
******

Группа: Active User
Сообщений: 1595
Регистрация: 1.10.2009
Из: Хабаровск
Поблагодарили: 394 раза
Репутация:   66  


ultimato, извините конечно, но это не jquery а каша


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ultimato
ultimato
сообщение 25.3.2014, 20:17; Ответить: ultimato
Сообщение #8


Новичок
*

Группа: User
Сообщений: 40
Регистрация: 13.7.2012
Поблагодарили: 6 раз
Репутация:   0  


Tollun, Ну каждый по своему B)


--------------------
Создание сайтов на WordPress и OpenCart
Верстка натяжка решение неисправности и.т.


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Rombi
Rombi
Topic Starter сообщение 25.3.2014, 20:23; Ответить: Rombi
Сообщение #9


3TAJIOH
******

Группа: Active User
Сообщений: 1042
Регистрация: 14.6.2010
Из: Самара
Поблагодарили: 244 раза
Репутация:   45  


Узнал про функцию wrap =)
Вот мой код, может, кому-нить пригодится)

Код
    var $img = $('.img');
    $('.img').one('load',function(){
        var CurImg = $(this);
        var width  = CurImg.width();
        var src = CurImg.attr("src");

        if (width > 200){
        CurImg.wrap('<a href="'+src+'" rel="photos"></a>');
        }
    
    })
    .each(function(){
        if(this.complete) $(this).trigger('load');
    });


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kRicha
kRicha
сообщение 25.3.2014, 22:13; Ответить: kRicha
Сообщение #10


Завсегдатай
*****

Группа: Active User
Сообщений: 933
Регистрация: 29.6.2010
Из: Киева
Поблагодарили: 222 раза
Репутация:   39  


Rombi, еще можно использовать методы before() и after()
;)


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Как получить от своей группы Вконтакте максимум?
6 VilD 1498 Вчера, 15:31
автор: laser
Открытая тема (нет новых ответов) Как организовать индексацию защищенных pdf с ключами и ссылками
И разместить pdf на внешних жирных ресурсах
1 kirch 648 Вчера, 14:35
автор: kirch
Горячая тема (нет новых ответов) Как заработать новичку?
142 Emeralda 25778 23.5.2018, 17:07
автор: Vlad_Sokolov
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыКак носить смартфоны диагональю 5.5 - 6.4 дюйма?
42 Room 5165 23.5.2018, 13:36
автор: wertu
Открытая тема (нет новых ответов) Как защитить свои данные в общественном Wi-Fi?
7 unazekoff 319 23.5.2018, 13:24
автор: alxpn


 



RSS Текстовая версия Сейчас: 25.5.2018, 5:58
Дизайн