Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.86/7: Рейтинг темы: голосов - 7, средняя оценка - 4.86
wbread
0 / 0 / 0
Регистрация: 01.05.2014
Сообщений: 6
1

Добавление ссылок на картинки без ссылок

01.05.2014, 15:32. Просмотров 1408. Ответов 7
Метки нет (Все метки)

Здравствуйте.
На форуме вставляются картинки любого размера, и что бы они не растягивались за оверлей они автоматически ставятся в размер окна сообщения. Необходимо к каждой такой картинке добавить ссылку в лайтбокс, что бы ее можно было просмотреть в полном размере в всплывающем окне. С JQ не особо дружу, все позабыл что читал.
Все что пришло на ум это пару моментов которые не могу завязать вместе:
Javascript
1
2
3
4
5
6
$(document).ready(function(){
    $('img.bbcode_img').attr('rel','lightbox')
....
    var imgPath = $(this).attr('src');
....
    var newLink = $('<a href="' + imgPath + '" target="_blank">');
Подскажите как написать путный JQ код.
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
01.05.2014, 15:32
Ответы с готовыми решениями:

Сокращение ссылок
Здраствуйте! есть кусок кода для использование для использвования апи функций сервиса сокращения...

Активность ссылок
Есть два объекта карты. Картинки ключ и дверь. Какую функцию нужно написать, чтобы дверь...

Посчитать количество ссылок
Среди всех блочных элементов нужно найти блок содержащий большее количество ссылок! Помогите, сам...

Замена ссылок в div
Привет всем. Смысл таков: Есть див с ссылками на примере покажу с одной. &lt;div id=&quot;content&quot;&gt; &lt;a...

Изменение ссылок с onClick
Всем привет! Мне нужно изменить ссылку с href=&quot;javascript:void(0);&quot; на ссылку, например:...

7
MonStar
22 / 22 / 4
Регистрация: 10.04.2011
Сообщений: 241
02.05.2014, 01:03 2
Можете попробовать это http://highslide.com/
0
wbread
0 / 0 / 0
Регистрация: 01.05.2014
Сообщений: 6
02.05.2014, 01:12  [ТС] 3
спасибо за плагин но это не то что мне надо.
мне надо из :
HTML5
1
<img src="http://www.cyberforum.ru/images/full-image.jpg" width="50%" />
сделать:
HTML5
1
2
3
<a href="http://www.cyberforum.ru/images/full-image.jpg">
    <img  rel="lightbox" src="http://www.cyberforum.ru/images/thumbnail.jpg" width="100%" />
</a>
0
MonStar
22 / 22 / 4
Регистрация: 10.04.2011
Сообщений: 241
02.05.2014, 01:25 4
Могут быть ошибки, но если с ходу прикинуть, то получается так
Javascript
1
2
3
4
5
var newUrl = "http://www.cyberforum.ru/images/thumbnail.jpg";
var image = $("img");
var src = image.width("100%").attr("rel","lightbox").attr("src");
image.attr("src", newUrl);
$("<a></a>").attr("href",src).html(image);
0
02.05.2014, 01:25
Lazy_Den
3035 / 2678 / 1353
Регистрация: 15.01.2014
Сообщений: 5,905
02.05.2014, 01:46 5
Лучший ответ Сообщение было отмечено wbread как решение

Решение

Цитата Сообщение от wbread Посмотреть сообщение
Все что пришло на ум это пару моментов...
Да, в нужном направлении. Единственный вопрос, который у меня появился - это откуда брать ссылки на оригинальные изображения?
Вариант первый. Ссылка изображения атрибута src изменяется, например, регуляркой. Т.е. если бы у вас было '/path/small-image1.jpg', то изменяем на '/path/big-image1.jpg'. Смотрим и проверяем тут.
Javascript
1
2
3
4
5
6
7
function replaceImgPath(p){
    return p.replace(/-thumb/,'');
}
$('.image_block img').each(function(i,el){
    $(el).wrap('<a href="' + replaceImgPath($(el).attr('src')) + '" rel="lightbox" />');
});
$("a[rel=lightbox]").lightBox();
Вариант второй, который, как мне кажется у вас. Картинки изначально уменьшены за счет CSS и "путь к миниатюрке" == "путь к оригиналу". В общем-то, как вы могли догадаться, изменения минимальны. Тестируем тут
Javascript
1
2
3
4
$('.image_block img').each(function(i,el){
    $(el).wrap('<a href="' + $(el).attr('src') + '" rel="lightbox" />');
});
$("a[rel=lightbox]").lightBox();
1
wbread
0 / 0 / 0
Регистрация: 01.05.2014
Сообщений: 6
02.05.2014, 10:41  [ТС] 6
спасибо второй способ подошел, все работает, но есть теперь одно но..
некоторые картинки идут превьюшками с ссылками класса eforum_litelink, и вот что получается:
HTML5
1
2
3
4
<a target="_blank" class="eforum_litelink" href="http://www.************/view/3911529/">
<a rel="lightbox" href="http://www.************/uploads/140216/8v1XTlVe9j_thumb.jpg">
<img class="bbcode_img" alt="8v1XTlVe9j_thumb.jpg" src="http://www.************/uploads/140216/8v1XTlVe9j_thumb.jpg">
</a></a>
HTML5
1
2
3
4
<a target="_blank" class="eforum_litelink" href="http://***********/fp/0cb9394f08b043c38ca5209a6a4216d2">
<a rel="lightbox" href="http://s52.***********/i137/1402/60/19438b516b15t.jpg">
<img class="bbcode_img" alt="19438b516b15t.jpg" src="http://s52.***********/i137/1402/60/19438b516b15t.jpg">
</a></a>
можно ли как то исключить превьюшки из выборки, я не помню такого селектора
0
Lazy_Den
3035 / 2678 / 1353
Регистрация: 15.01.2014
Сообщений: 5,905
02.05.2014, 12:22 7
Лучший ответ Сообщение было отмечено wbread как решение

Решение

Цитата Сообщение от wbread Посмотреть сообщение
можно ли как то исключить превьюшки из выборки
Конечно можно. Просто проверяем в цикле: есть у картинки родительский элемент с классом eforum_litelink или нет.
Javascript
1
2
3
4
5
$('.image_block img').each(function(i,el){
    if(!$(el).parent('.eforum_litelink').length)
    $(el).wrap('<a href="' + $(el).attr('src') + '" rel="lightbox" />');
});
$("a[rel=lightbox]").lightBox();
1
wbread
0 / 0 / 0
Регистрация: 01.05.2014
Сообщений: 6
02.05.2014, 12:54  [ТС] 8
спасибо все работает отлично
0
02.05.2014, 12:54
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
02.05.2014, 12:54

Поисковая оптимизация ссылок
У меня все ссылки ссылаются на функции js. Насколько я понял, таким образом их контент не...

Вставка в textarea ссылок
&lt;html&gt; &lt;head&gt; &lt;title&gt;книги для хакера&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;Ассемблер&lt;/h1&gt; ...

Облако ссылок + фреймы
Всем доброго для! Вот код облака ссылок: &lt;div id=&quot;yoblako&quot;&gt;&lt;a href=&quot;ССЫЛКА НА...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru