Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Применение библиотек > Лайтбокс с рисунком и ссылкой на подробности


Автор: Чoо 28.6.2013, 19:13
Здравствуйте.
Возникла необходимость при клике по миниатюре выводить и увеличенное изображение и ссылку на дополнительный материал, связанный с этой картинкой. Подскажите пожалуйста, чем можно это реализовать (размер картинок 640х480, поэтому масштабирование относительно окна браузера не сильно важно).
Что я хочу получить - иллюстрировано на скриншоте ("подробнее" просто дописал. Конкретно на скрине - не лайтбокс, а pirobox. но сути это не меняет).
Проблема в том, что title уже содержит название картинки, rel используется для вывода инфомрации о текущем изображении "12 из 56", например
user posted image

Автор: ksnk 28.6.2013, 19:42
А кто tiftn в title вставить html с нужными ссылками?

Как вариант - дописать к картинке дополнительный атрибут data-wouldyourliketolearnmore и вставлять его вручную при демонстрациии картинки 

Автор: Чoо 28.6.2013, 20:59
в смысле сделать так?:
Код

<a href="somelink" title='описание <a href="ссылка на подробности">подробнее</a>'><img src="someimg" />

ну в лайтбоксе-то ссылка появится, но изуродуются тултипы. к тому же такой код вроде не валидный. Доп атрибуты тоже валидности не прибавят

Автор: ksnk 28.6.2013, 21:21
Чoо, Нужно что-то менять smile Либо доктайп на doctype html, чтобы дополнительные атрибуты стали валидными, либо разметку, вставив дополнительный span с дополнительной попдсказкой в тег a. Вообще, в документации по любому лайтбоксу всякие сложнонавороенные тултипы обязательно присутствуют.

Автор: Чoо 28.6.2013, 22:05
тоесть если не менять Doctype, то изменить структуру так:
Код

            <a href="bigIMG" class="pirobox_gall" title='description'>
                <img src="smallIMG" />
                <span class="more">link_more</span>            
            </a>

для класса more определить:
Код

.more{
     display:none;
}


а сам лайтбокс чуть подправить, и прочитать там содержимое между тегов span, уже как как дочерних элемент от a href?

Добавлено через 3 минуты и 14 секунд
о. Получилось  smile 
спасибо за помощь

Добавлено через 7 минут и 12 секунд
действительно класс. я дня 2 пытался решить проблему. Начал уже искать другие лайтбоксы, что бы отправить всё в iframe

Автор: akizelokro 1.7.2013, 21:49
Делаешь два дива. В один верстаешь всю основную страницу. Второй див с position:absolute, невидимый или используешь z-index, утоплен под вторым. когда надо, меняешь z-index и вытаскиваешь его поверх основного.И всё прекрасно работает даже в IE 7.
А чтобы не ломалась "логика", добавь для увеличенного изображения ссылку "Показать в отдельном окне". Хотя у тебя и так уже есть "подробно". Либо я не понял, в чём проблема-то.

Этот ответ добавлен с нового Винграда - http://ru.vingrad.com//object-id51cdb68d6ccc190111000002#findElement_E7045_51d1cf3b6ccc19d04e00215a_0

Автор: Чoо 5.7.2013, 02:51
akizelokro, там нужно было сделать вывод в лайтбокс не ссылку на изображение в отдельное окно, а ссылку на другую страницу сайта. 
поэтому, что бы не вводить атрибут data-linktomore я вод целевым элементом сделал неотображаемый блок, с которого и забрал то, что мне нужно отобразить в картинке, увеличенной лайтбоксом.
Но вопрос вобщем-то решен smile

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)