0

I need to add 2 different titles to customize each one of them in the Nivo Lightbox

Example:

http://prntscr.com/23o766

But it's look like is not possible, is there a way to put 2 titles on 1 image?

Or anyway to resolve this? also, I would love to be able to use the title as a link, but there are a lot of limitations. thanks.

Code:

<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>

There's must be a way to add more than 1 style in the title or any other way to add that text in the overlay in the Lightbox.

I actually already tried the insertion of another html on the nivo lightbox, but it gives me a lot of trouble, the content is not showing properly, is there a way the content fits on the lightbox?

http://prntscr.com/23qm97

4

1 に答える 1

0

はい、nivo スライダーの画像の title 属性に要素 ID を指定し、nivo ライトボックスのリンクの href 属性に要素 ID を指定することで、それを行うことができます。要素 ID は、必要なコンテンツを持つ要素を指す必要があります。

nivo ライトボックス

nivo ライトボックスでは、id 要素を href 属性の値として使用することで、html コンテンツを表示できます。したがって、タイトル付きの画像を表示するには、画像とタイトルが#test次の例のターゲット要素の html コンテンツの一部である必要があります。

            <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 プラグインのデモ コードからのわずかに変更された抜粋です。

<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 ライトボックスがライトボックス内の 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 をいじって、必要なことを何でも達成できるように準備してください。

于 2013-11-12T17:10:15.783 に答える