X
GO
en-UScy-GB

LightBox

Features   >   Short Codes   >   LightBox

Album Group


4 People Scenery

3Sightseeing

3Live entertainment

SOURCE CODE 
<div class="row">
    <div class="col-sm-4">
        <div class="photo_box box_border_padding LightBox_image_group"> <a title=" People Scenery 1" href="/Portals/25/Photo6.jpg" data-effect="mfp-zoom-in">
            <div class="pic_box"> <img alt="" src="/portals/25/Photo6.jpg" />
                <div class="ico"> <span class="glyphicons glyph-sort"></span> </div>
                <div class="shade"></div>
            </div>
            </a> <a title=" People Scenery 2" href="/Portals/25/Photo2.jpg"></a> <a title=" People Scenery 3" href="/Portals/25/Photo5.jpg"></a> <a title=" People Scenery 4" href="/Portals/25/Photo8.jpg"></a>
            <div class="text_sytle_5">
                <h3><span>4</span> People Scenery</h3>
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="photo_box box_border_padding LightBox_image_group"> <a title=" People Scenery 1" href="/Portals/25/Photo2.jpg" data-effect="mfp-newspaper">
            <div class="pic_box"> <img alt="" src="/portals/25/Photo6.jpg" />
                <div class="ico"> <span class="glyphicons glyph-sort"></span> </div>
                <div class="shade"></div>
            </div>
            </a> <a title=" People Scenery 2" href="/Portals/25/Photo5.jpg"></a> <a title=" People Scenery 3" href="/Portals/25/Photo8.jpg"></a>
            <div class="text_sytle_5">
                <h3><span>3</span>Sightseeing</h3>
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="photo_box box_border_padding LightBox_image_group"> <a title=" People Scenery 1" href="/Portals/25/Photo5.jpg" data-effect="mfp-move-horizontal">
            <div class="pic_box"> <img alt="" src="/portals/25/Photo6.jpg" />
                <div class="ico"> <span class="glyphicons glyph-sort"></span> </div>
                <div class="shade"></div>
            </div>
            </a> <a title=" People Scenery 2" href="/Portals/25/Photo2.jpg"></a> <a title=" People Scenery 3" href="/Portals/25/Photo8.jpg"></a>
            <div class="text_sytle_5">
                <h3><span>3</span>Live entertainment</h3>
            </div>
        </div>
    </div>
</div>


Single Image


SOURCE CODE 
<div class="row">
    <div class="col-sm-4">
        <div class="photo_box"> <a title="Single Image 1" class="LightBox_image" href="/Portals/25/Photo8.jpg" data-effect="mfp-move-from-top">
            <div class="pic_box"> <img alt="" src="/portals/25/Photo8.jpg" />
                <div class="ico"> <span class="glyphicons glyph-search"></span> </div>
                <div class="shade"></div>
            </div>
            </a> </div>
    </div>
    <div class="col-sm-4">
        <div class="photo_box"> <a title="Single Image 1" class="LightBox_image" href="/Portals/25/Photo5.jpg" data-effect="mfp-3d-unfold">
            <div class="pic_box"> <img alt="" src="/portals/25/Photo5.jpg" />
                <div class="ico"> <span class="glyphicons glyph-search"></span> </div>
                <div class="shade"></div>
            </div>
            </a> </div>
    </div>
    <div class="col-sm-4">
        <div class="photo_box"> <a title="Single Image 1" class="LightBox_image" href="/Portals/25/Photo2.jpg" data-effect="mfp-zoom-out">
            <div class="pic_box"> <img alt="" src="/portals/25/Photo2.jpg" />
                <div class="ico"> <span class="glyphicons glyph-search"></span> </div>
                <div class="shade"></div>
            </div>
            </a> </div>
    </div>
</div>


Image Gallery


SOURCE CODE 
<div class="col-sm-3">
    <div class="photo_box">
        <a href="/Portals/25/Photo8.jpg" class="LightBox_image_gallery1" title="Image Gallery">
            <div class="pic_box"> 
                <img alt="" src="/portals/25/Photo8.jpg" /> 
                <div class="ico">
                    <span class="glyphicons glyph-picture"></span>
                </div> 
                <div class="shade"></div> 
            </div>
        </a> 
    </div>
</div>
<div class="col-sm-3">
    <div class="photo_box">
        <a href="/Portals/25/Photo2.jpg" class="LightBox_image_gallery1" title="Image Gallery">
            <div class="pic_box"> 
                <img alt="" src="/portals/25/Photo2.jpg" /> 
                <div class="ico">
                    <span class="glyphicons glyph-picture"></span>
                </div> 
                <div class="shade"></div> 
            </div>
        </a> 
    </div>
</div>
<div class="col-sm-3">
    <div class="photo_box">
        <a href="/Portals/25/Photo5.jpg" class="LightBox_image_gallery1" title="Image Gallery">
            <div class="pic_box"> 
                <img alt="" src="/portals/25/Photo5.jpg" /> 
                <div class="ico">
                    <span class="glyphicons glyph-picture"></span>
                </div> 
                <div class="shade"></div> 
            </div>
        </a> 
    </div>
</div>
<div class="col-sm-3">
    <div class="photo_box">
        <a href="/Portals/25/Photo6.jpg" class="LightBox_image_gallery1" title="Image Gallery">
            <div class="pic_box"> 
                <img alt="" src="/portals/25/Photo6.jpg" /> 
                <div class="ico">
                    <span class="glyphicons glyph-picture"></span>
                </div> 
                <div class="shade"></div> 
            </div>
        </a> 
    </div>
</div>


Videos & Maps


SOURCE CODE 
<div class="row">
    <div class="col-sm-4">
        <div class="photo_box default_show box_border_padding box_border_radius"> 
            <a href="http://www.youtube.com/watch?v=0O2aH4XLbto" class="LightBox_youtube">
                <div class="pic_box"> <img alt="" src="/portals/25/Photo2.jpg" />
                    <div class="ico ico_no_bg"> <span class="glyphicons glyph-play"></span> </div>
                    <div class="shade"></div>
                </div>
            </a> 
        </div>
    </div>
    <div class="col-sm-4">
        <div class="photo_box default_show box_border_padding box_border_radius"> 
            <a href="https://vimeo.com/45830194" class="LightBox_vimeo">
                <div class="pic_box"> <img alt="" src="/portals/25/Photo5.jpg" />
                    <div class="ico"> <span class="glyphicons glyph-play"></span> </div>
                    <div class="shade"></div>
                </div>
            </a> 
        </div>
    </div>
    <div class="col-sm-4">
        <div class="photo_box default_show box_border_padding box_border_radius"> 
            <a href="https://maps.google.com/maps?q=221B+Baker+Street,+London,+United+Kingdom&amp;hl=en&amp;t=v&amp;hnear=221B+Baker+St,+London+NW1+6XE,+United+Kingdom" class="LightBox_gmaps">
                    <div class="pic_box"> <img alt="" src="/portals/25/map_img1.jpg" />
                <div class="ico ico_no_bg"> <span class="glyphicons glyph-pin"></span> </div>
               <div class="shade"></div>
     </div>
            </a> 
        </div>
    </div>
</div>


Content Ilightbox

Click Here To Pop

Click Here To Pop(1)

This is dummy copy. It is not meant to be read. It has been 123123123 here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.

Click Here To Pop

Click Here To Pop(2)

This is dummy copy. It is not meant to be read. It has been 123123123 here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.
SOURCE CODE 
<a href="#test-popup" class="LightBox_Box"> Click Here To Pop </a> <br />
<div class="white-popup mfp-with-anim mfp-hide" id="test-popup">
    <h3>Click Here To Pop(1)</h3>
    content text ... </div>
<br />
<a href="#test-popup2" class="LightBox_Box Button_default"> Click Here To Pop </a>
<div class="white-popup mfp-with-anim mfp-hide" id="test-popup2">
    <h3>Click Here To Pop(2)</h3>
    content text ... </div>