Мне нужно добавить 2 разных заголовка для настройки каждого из них в Nivo Lightbox
Пример:
Но похоже, что это невозможно, есть ли способ поставить 2 названия на 1 изображение?
Или так или иначе разрешить это? Кроме того, я хотел бы иметь возможность использовать заголовок в качестве ссылки, но есть много ограничений. Благодарю.
Код:
<a class="image image-full" data-lightbox-gallery="gallery1" href="nivo-lightbox/img/b/grey_antique_q_white_mortar_concave_finish_technique_view_b.jpg" title="Grey Antique Q White Mortar Concave Finish Technique View B">
<img id="sample_board_image" src="nivo-lightbox/img/s/grey_antique_q_white_mortar_concave_finish_technique_view_b.jpg" alt="Grey Antique Q White Mortar Concave Finish Technique View B"></img>
</a>
Должен быть способ добавить более одного стиля в заголовок или любой другой способ добавить этот текст в оверлей в Лайтбокс.
Я на самом деле уже пробовал вставить другой html на лайтбокс nivo, но это дает мне много проблем, контент не отображается правильно, есть ли способ, которым контент подходит для лайтбокса?
Да, вы можете сделать это, указав идентификатор элемента для атрибута title изображения для слайдера nivo и указав идентификатор элемента атрибуту href ссылки для nivo lightbox. Идентификатор элемента должен указывать на элемент с любым содержимым.
nivo lightbox
В лайтбоксе nivo можно показать содержимое html, используя элемент id как значение атрибута href. Поэтому, чтобы отображать изображение с заголовками, изображение и заголовки должны быть частью содержимого html целевого элемента #test
в следующем примере.
<a href="#test" class="image image-full" data-lightbox-gallery="gallery1" href="nivo-lightbox/img/b/grey_antique_q_white_mortar_concave_finish_technique_view_b.jpg" title="Grey Antique Q White Mortar Concave Finish Technique View B">
<img id="sample_board_image" src="nivo-lightbox/img/s/grey_antique_q_white_mortar_concave_finish_technique_view_b.jpg" alt="Grey Antique Q White Mortar Concave Finish Technique View B"></img>
</a>
<div id="test" style="display:none">this is from test
<img id="sample_board_image" src="nivo-lightbox/img/s/grey_antique_q_white_mortar_concave_finish_technique_view_b.jpg" alt="Grey Antique Q White Mortar Concave Finish Technique View B"></img>
<p>some content</p>
<p>a second <a href=#>title</a> as link</p>
</div>
Ползунок nivo
Например, слегка измененная выдержка из демонстрационного кода плагина jquery слайдера nivo,
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. <br/>
<b>and another title!!!!</b>
</div>
</div>
</div>
Таким образом, вы можете добавлять любые элементы html-содержимого и значения класса в элементы для изменения названий по мере необходимости.
РЕДАКТИРОВАТЬ
В ответ на последние комментарии, чтобы nivo lightbox соответствовал изображению содержимого html внутри лайтбокса и разрешению экрана, вам нужно указать атрибуты height="100%"
и width="100%"
. Довольно грубый пример можно найти ниже,
http://jsfiddle.net/45nAc/show/
первое изображение создается из html
HTML
<p><a href="#test" data-lightbox-gallery="gallery1"><img alt="" src="http://farm6.staticflickr.com/5471/9036958611_fa1bb7f827_s.jpg"></a> <a title="Calm Before The Storm (One Shoe Photography Ltd.)" href="http://farm4.staticflickr.com/3824/9041440555_2175b32078_b.jpg" data-lightbox-gallery="gallery1"><img alt="" src="http://farm4.staticflickr.com/3824/9041440555_2175b32078_s.jpg"></a> <a title="Lambs Valley (JMImagesonline.com)" href="http://farm3.staticflickr.com/2870/8985207189_01ea27882d_b.jpg" data-lightbox-gallery="gallery1"><img alt="" src="http://farm3.staticflickr.com/2870/8985207189_01ea27882d_s.jpg"></a> <a title="Grasmere Lake (Phil 'the link' Whittaker (gizto29))" href="http://farm4.staticflickr.com/3677/8962691008_7f489395c9_b.jpg" data-lightbox-gallery="gallery1"><img alt="" src="http://farm4.staticflickr.com/3677/8962691008_7f489395c9_s.jpg"></a></p>
<div id="test" style="display:none">
<img width="100%" height="100%" alt="" src="http://farm6.staticflickr.com/5471/9036958611_fa1bb7f827_b.jpg"/>
<div class="titles">
<p> this is a title1 <br/>
this is a <a href=#>title2</a>
</p>
</div>
</div>
CSS
#test{
width:100%;
height:100%; /*background:url('http://farm6.staticflickr.com/5471/9036958611_fa1bb7f827_b.jpg');*/
}
#test .titles {
text-align:center;
}
.nivo-lightbox-theme-default .nivo-lightbox-ajax, .nivo-lightbox-theme-default .nivo-lightbox-inline{
margin:0 !important;
padding:0 !important;
top:0;
width:100%;
height:100%;
background-color:transparent;
box-shadow:none;
}
Будьте готовы играть с css и добиваться всего, что вам нужно.