Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.67/18: Рейтинг темы: голосов - 18, средняя оценка - 4.67
 Аватар для wbread
0 / 0 / 0
Регистрация: 01.05.2014
Сообщений: 6

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

01.05.2014, 15:32. Показов 3741. Ответов 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
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
01.05.2014, 15:32
Ответы с готовыми решениями:

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

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

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

7
22 / 22 / 4
Регистрация: 10.04.2011
Сообщений: 248
02.05.2014, 01:03
Можете попробовать это http://highslide.com/
0
 Аватар для wbread
0 / 0 / 0
Регистрация: 01.05.2014
Сообщений: 6
02.05.2014, 01:12  [ТС]
спасибо за плагин но это не то что мне надо.
мне надо из :
HTML5
1
<img src="https://www.cyberforum.ru/images/full-image.jpg" width="50%" />
сделать:
HTML5
1
2
3
<a href="https://www.cyberforum.ru/images/full-image.jpg">
    <img  rel="lightbox" src="https://www.cyberforum.ru/images/thumbnail.jpg" width="100%" />
</a>
0
22 / 22 / 4
Регистрация: 10.04.2011
Сообщений: 248
02.05.2014, 01:25
Могут быть ошибки, но если с ходу прикинуть, то получается так
JavaScript
1
2
3
4
5
var newUrl = "https://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
 Аватар для Lazy_Den
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
02.05.2014, 01:46
Лучший ответ Сообщение было отмечено 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  [ТС]
спасибо второй способ подошел, все работает, но есть теперь одно но..
некоторые картинки идут превьюшками с ссылками класса 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
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
02.05.2014, 12:22
Лучший ответ Сообщение было отмечено 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  [ТС]
спасибо все работает отлично
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
02.05.2014, 12:54
Помогаю со студенческими работами здесь

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

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

Поисковая оптимизация ссылок
У меня все ссылки ссылаются на функции 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;TEXTAREA id=&quot;TextAccembler&quot; ROWS=3...

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


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

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Новые блоги и статьи
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha
Etyuhibosecyu 20.11.2025
Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух
kumehtar 18.11.2025
Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .
Создание Single Page Application на фреймах
krapotkin 16.11.2025
Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru