| Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате |
| Форум программистов > JavaScript: Применение библиотек > Лайтбокс с рисунком и ссылкой на подробности |
| Автор: Чoо 28.6.2013, 19:13 |
| Здравствуйте. Возникла необходимость при клике по миниатюре выводить и увеличенное изображение и ссылку на дополнительный материал, связанный с этой картинкой. Подскажите пожалуйста, чем можно это реализовать (размер картинок 640х480, поэтому масштабирование относительно окна браузера не сильно важно). Что я хочу получить - иллюстрировано на скриншоте ("подробнее" просто дописал. Конкретно на скрине - не лайтбокс, а pirobox. но сути это не меняет). Проблема в том, что title уже содержит название картинки, rel используется для вывода инфомрации о текущем изображении "12 из 56", например ![]() |
| Автор: ksnk 28.6.2013, 19:42 |
| А кто tiftn в title вставить html с нужными ссылками? Как вариант - дописать к картинке дополнительный атрибут data-wouldyourliketolearnmore и вставлять его вручную при демонстрациии картинки |
| Автор: Чoо 28.6.2013, 20:59 | ||
в смысле сделать так?:
ну в лайтбоксе-то ссылка появится, но изуродуются тултипы. к тому же такой код вроде не валидный. Доп атрибуты тоже валидности не прибавят |
| Автор: ksnk 28.6.2013, 21:21 |
| Чoо, Нужно что-то менять |
| Автор: Чoо 28.6.2013, 22:05 | ||||
тоесть если не менять Doctype, то изменить структуру так:
для класса more определить:
а сам лайтбокс чуть подправить, и прочитать там содержимое между тегов span, уже как как дочерних элемент от a href? Добавлено через 3 минуты и 14 секунд о. Получилось спасибо за помощь Добавлено через 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 я вод целевым элементом сделал неотображаемый блок, с которого и забрал то, что мне нужно отобразить в картинке, увеличенной лайтбоксом. Но вопрос вобщем-то решен |