• مثال ها / Shortcodes 1 / Lightbox

Lightbox

Lightboxes Shortcodes

The lightboxes are driven by Magnific Popup script.

Single Image

Simple popups with different styles.

Default
Project Image
Default with Border
Project Image
With Icon
Project Image
Hover Effect
Project Image

HTML Shortcode 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<div class="row">
    <div class="col-md-3">
        <a class="lightbox" href="/portals/2/img/projects/project.jpg" data-plugin-options="{'type':'image'}">
            <img class="img-responsive" src="/portals/2/img/projects/project.jpg" alt="Project Image" />
        </a>
    </div>
    <div class="col-md-3">
        <a class="img-thumbnail lightbox" href="/portals/2/img/projects/project.jpg" data-plugin-options="{'type':'image'}">
            <img class="img-responsive" src="/portals/2/img/projects/project.jpg" alt="Project Image" />
        </a>
    </div>
    <div class="col-md-3">
        <a class="img-thumbnail lightbox" href="/portals/2/img/projects/project-4.jpg" data-plugin-options="{'type':'image'}">
            <img class="img-responsive" src="/portals/2/img/projects/project-4.jpg" alt="Project Image" />
            <span class="zoom">
                <em class="fa fa-search"></em>
            </span>
        </a>
    </div>
    <div class="col-md-3">
        <a class="img-thumbnail img-thumbnail-hover-icon lightbox" href="/portals/2/img/projects/project-4.jpg" data-plugin-options="{'type':'image'}">
            <img class="img-responsive" src="/portals/2/img/projects/project-4.jpg" alt="Project Image" />
        </a>
    </div>
</div>

Simple Image Gallery

Image gallery in the same group.

Project Project Project

Zoom Image Gallery

Image gallery in the same group.

Project Image Project Image Project Image

HTML Shortcode 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<div class="row">
    <div class="col-md-6">
        <div class="lightbox mb-lg" data-plugin-options="{'delegate': 'a', 'type': 'image', 'gallery': {'enabled': true}}">
            <a class="img-thumbnail mb-xs mr-xs" href="/portals/2/img/projects/project.jpg" title="Project 1">
                <img class="img-responsive" src="/portals/2/img/projects/project.jpg" width="110" height="110" alt="Project" />
            </a>
            <a class="img-thumbnail mb-xs mr-xs" href="/portals/2/img/projects/project-1.jpg" title="Project 2">
                <img class="img-responsive" src="/portals/2/img/projects/project-1.jpg" width="110" height="110" alt="Project" />
            </a>
            <a class="img-thumbnail mb-xs mr-xs" href="/portals/2/img/projects/project-2.jpg" title="Project 3">
                <img class="img-responsive" src="/portals/2/img/projects/project-2.jpg" width="110" height="110" alt="Project" />
            </a>
        </div>
    </div>
    <div class="col-md-6">
        <div class="lightbox" data-plugin-options="{'delegate': 'a', 'type': 'image', 'gallery': {'enabled': true}, 'mainClass': 'mfp-with-zoom', 'zoom': {'enabled': true, 'duration': 300}}">
            <a class="img-thumbnail img-thumbnail-hover-icon mb-xs mr-xs" href="/portals/2/img/projects/project-4.jpg">
                <img class="img-responsive" src="/portals/2/img/projects/project-4.jpg" alt="Project Image" width="110" height="110" />
            </a>
            <a class="img-thumbnail img-thumbnail-hover-icon mb-xs mr-xs" href="/portals/2/img/projects/project-5.jpg">
                <img class="img-responsive" src="/portals/2/img/projects/project-5.jpg" alt="Project Image" width="110" height="110" />
            </a>
            <a class="img-thumbnail img-thumbnail-hover-icon mb-xs mr-xs" href="/Shortcodes/Shortcodes-1/Lightbox/ctl/Edit/mid/img/projects/project-6.jpg">
                <img class="img-responsive" src="/portals/2/img/projects/project-6.jpg" alt="Project Image" width="110" height="110" />
            </a>
        </div>
    </div>
</div>

Zoom Image Gallery + Carousel

HTML Shortcode 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
<div class="lightbox" data-plugin-options="{'delegate': 'a', 'type': 'image', 'gallery': {'enabled': true}, 'mainClass': 'mfp-with-zoom', 'zoom': {'enabled': true, 'duration': 300}}">
    <div class="owl-carousel stage-margin" data-plugin-options="{'items': 6, 'margin': 10, 'loop': false, 'nav': true, 'dots': false, 'stagePadding': 40}">
        <div>
            <a class="img-thumbnail img-thumbnail-hover-icon mb-xs mr-xs" href="/portals/2/img/projects/project-1.jpg">
                <img class="img-responsive" src="/portals/2/img/projects/project-1.jpg" alt="Project Image" />
            </a>
        </div>
        <div>
            <a class="img-thumbnail img-thumbnail-hover-icon mb-xs mr-xs" href="/portals/2/img/projects/project-2.jpg">
                <img class="img-responsive" src="/portals/2/img/projects/project-2.jpg" alt="Project Image" />
            </a>
        </div>
        <div>
            <a class="img-thumbnail img-thumbnail-hover-icon mb-xs mr-xs" href="/portals/2/img/projects/project-3.jpg">
                <img class="img-responsive" src="/portals/2/img/projects/project-3.jpg" alt="Project Image" />
            </a>
        </div>
        <div>
            <a class="img-thumbnail img-thumbnail-hover-icon mb-xs mr-xs" href="/portals/2/img/projects/project-4.jpg">
                <img class="img-responsive" src="/portals/2/img/projects/project-4.jpg" alt="Project Image" />
            </a>
        </div>
        <div>
            <a class="img-thumbnail img-thumbnail-hover-icon mb-xs mr-xs" href="/portals/2/img/projects/project-5.jpg">
                <img class="img-responsive" src="/portals/2/img/projects/project-5.jpg" alt="Project Image" />
            </a>
        </div>
        <div>
            <a class="img-thumbnail img-thumbnail-hover-icon mb-xs mr-xs" href="/portals/2/img/projects/project-6.jpg">
                <img class="img-responsive" src="/portals/2/img/projects/project-6.jpg" alt="Project Image" />
            </a>
        </div>
        <div>
            <a class="img-thumbnail img-thumbnail-hover-icon mb-xs mr-xs" href="/portals/2/img/projects/project-7.jpg">
                <img class="img-responsive" src="/portals/2/img/projects/project-7.jpg" alt="Project Image" />
            </a>
        </div>
        <div>
            <a class="img-thumbnail img-thumbnail-hover-icon mb-xs mr-xs" href="/portals/2/img/projects/project.jpg">
                <img class="img-responsive" src="/portals/2/img/projects/project.jpg" alt="Project Image" />
            </a>
        </div>
    </div>
</div>

Dialog with CSS animation

Animations are added with simple CSS transitions, you can make them look however you wish.

Open with fade-zoom animation Open with fade-slide animation

Dialog example

This is dummy copy. It is not meant to be read. It has been placed 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.

HTML Shortcode 

1
2
3
4
5
6
7
 
<a class="mt-xs mb-xs mr-xs popup-with-zoom-anim btn btn-primary" href="#small-dialog">Open with fade-zoom animation</a>
<a class="mt-xs mb-xs popup-with-move-anim btn btn-primary" href="#small-dialog">Open with fade-slide animation</a>
<!-- Dialog -->
<div id="small-dialog" class="dialog dialog-sm zoom-anim-dialog mfp-hide">
    <h1>Dialog example</h1>
    <p>This is dummy copy. It is not meant to be read. It has been placed 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.</p>
</div>

Popup with video or map

In this example lightboxes are automatically disabled on small screen size and default behavior of link is triggered.

Open YouTube Video
Open Vimeo Video
Open Google Map
Open YouTube Video
Open Vimeo Video
Open Google Map

HTML Shortcode 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<div class="row">
    <div class="col-md-4">
        <a class="mt-xs mb-xs mr-xs popup-youtube btn btn-primary" href="http://www.youtube.com/watch?v=0O2aH4XLbto">Open YouTube Video</a>
    </div>
    <div class="col-md-4">
        <a class="mt-xs mb-xs mr-xs popup-vimeo btn btn-primary" href="https://vimeo.com/45830194">Open Vimeo Video</a>
    </div>
    <div class="col-md-4">
        <a class="mt-xs mb-xs popup-gmaps btn btn-primary" 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">Open Google Map</a>
    </div>
</div>
<hr />
<div class="row">
    <div class="col-md-4">
        <a class="popup-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto">Open YouTube Video</a>
    </div>
    <div class="col-md-4">
        <a class="popup-vimeo" href="https://vimeo.com/45830194">Open Vimeo Video</a>
    </div>
    <div class="col-md-4">
        <a class="popup-gmaps" 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">Open Google Map</a>
    </div>
</div>

Form

Entered data is not lost if you open and close the popup or if you go to another page and then press back browser button.

Open Form

Basic Form

Entered data is not lost if you open and close the popup or if you go to another page and then press back browser button.



HTML Shortcode 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
<a class="popup-with-form btn btn-primary" href="#demo-form">Open Form</a>
<div id="demo-form" class="white-popup-block mfp-hide form-horizontal">
    <div class="row">
        <div class="col-sm-12">
            <h4>Basic Form</h4>
            <p class="mb-lg">Entered data is not lost if you open and close the popup or if you go to another page and then press back browser button.</p>
        </div>
    </div>
    <div class="form-group mt-lg">
        <label class="col-sm-3 control-label">Name</label>
        <div class="col-sm-9">
            <input type="text" name="name" class="form-control" placeholder="Type your name..." />
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">Email</label>
        <div class="col-sm-9">
            <input type="email" name="email" class="form-control" placeholder="Type your email..." />
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">URL</label>
        <div class="col-sm-9">
            <input type="url" name="url" class="form-control" placeholder="Type an URL..." />
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">Comment</label>
        <div class="col-sm-9">
            <textarea rows="5" class="form-control" placeholder="Type your comment..."></textarea>
        </div>
    </div>
    <div class="row mb-lg">
        <div class="col-sm-9 col-sm-offset-3">
            <button class="btn btn-primary">Submit</button>
            <button type="reset" class="btn btn-primary">Reset</button>
        </div>
    </div>
</div>