ライトボックス2が画像の右側にキャプションを移動したい

Question

data-titleにあるキャプションを画像の右側から画像の右側に移動しようとしています。

HTML/CSSはよくわかりませんが、画像がdiv .lb-outerContainerに含まれていて、キャプションがLightbox CSSの.lb-dataContainerにあるようです。私はouterContainerのからclear: bothを削除して、2つのdivにdisplay: inline-blockを追加しようとしましたが、動作しませんでした。画像は左に移動しましたが、キャプションは上に移動しませんでした。

誰にもアドバイスがありますか？ありがとうございました:)

Answer 1

カスタムCSSスタイリングを配置する必要がありますまた、次の例のコードのようにjsファイル内のdivを追加します。

Find in js file - 

"<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"></a></div></div></div></div>" 


And Replace With(copy without Quats) - 

"<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="new-inner-div"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"></a></div></div></div></div></div>" 


New Style on page - 
    <style> 
     .lightbox { 
     position: absolute; 
     left: 0; 
     width: 100%; 
     z-index: 10000; 
     font-weight: 400; 
     max-width: 100%; 
     margin: 0 auto; 
    } 
    .new-inner-div 
    { 
     max-width: 700px;border: 1px solid red;margin: 0 auto;min-height: 346px; background: #fff; 
    } 
    .lb-outerContainer 
    { 
     width: 50% !important; height: auto !important;float: left; 
    } 
    .lb-dataContainer 
    { 
     float: right;width: 46% !important; 
    } 
     .lb-data .lb-close { 
     display: block; 
     float: left; 
     width: 30px; 
     height: 30px; 
     text-align: right; 
     outline: 0; 
     filter: alpha(Opacity=70); 
     opacity: .7; 
     -webkit-transition: opacity .2s; 
     -moz-transition: opacity .2s; 
     -o-transition: opacity .2s; 
     transition: opacity .2s; 
    } 
    .lb-image 
    { 
    width:100% !important; 
    } 
    </style>