How to use dropdown on top of lightbox (photoswipe) thumbnai

Topic: How to use dropdown on top of lightbox (photoswipe) thumbnail? (Facebook-like photo dropdown)

Ungr pro asked 7 years ago

Hello guys. In the following code im trying to achieve facebook-like dropdown opening on photo thumbnail. Lightbox is opening fine but when I click on dropdown lightbox is still being opened instead of dropdown. There seems to be some event binding on dropdown because when you click it 1st time lightbox is opened. However when you click dropdown 2nd time lightbox is correctly not being opened and instead dropdown menu is. Ive tried using stopPropagation() but that only breaks the function of dropdown... Please help :) Take a look at the following code:

<!-- Lightbox containers -->
<div class="mdb-lightbox-ui"></div>

    <!-- Lightbox gallery -->
    <div class="mdb-lightbox" itemscope="" itemtype="http://schema.org/ImageGallery" data-pswp-uid="1">
        <figure class="view overlay col-md-4" itemprop="associatedMedia" itemscope=""
                itemtype="http://schema.org/ImageObject">
            <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(114).jpg" data-size="1600x1067">
                <!-- Thumbnail-->
                <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(114).jpg" class="img-fluid">
            </a>

            <div>
                <div class="mask cursor-zoom-in p-3 d-flex align-items-end rgba-black-light text-white">
                    <div>
                        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</span>
                    </div>
                    <div class="ml-auto dropdown">
                        <a class="badge badge-light" data-toggle="dropdown"><i class="fa fa-ellipsis-h"></i></a>
                        <div class="dropdown-menu dropdown-menu-right" data-boundary="window">
                            <a class="dropdown-item" href="#">
                                <i class="fa fa-edit"></i> Edit photo
                            </a>
                            <a class="dropdown-item" href="#">
                                <i class="fa fa-folder-minus"></i> Delete photo
                            </a>
                        </div>
                    </div>

                </div>
            </div>
            <figcaption itemprop="caption description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Possimus nobis sit veritatis
                cumque! Placeat voluptate aut pariatur! Nihil molestiae quos explicabo dignissimos quam cupiditate
                sequi corporis eaque corrupti. Vel, est.
            </figcaption>
        </figure>
    </div>

Add comment

Piotr Glejzer staff answered 7 years ago

0 0 Best answer

Hi, I think the reason why it is not will open is that you have 2 :

<div class="mdb-lightbox" itemscope itemtype="http://schema.org/ImageGallery">

I think it will gonna help if you will delete one of these. Best, Piotr

Ungr pro commented 7 years ago

Sorry, that was my mistake when writing a ticket. Currently there is only one .mdb-lightbox <div>.

Also when clicked on dropdown anchor lightbox image is opened instead.

Piotr Glejzer staff commented 7 years ago

Yea it is open when is clicked the first time.. hmm, I think it's a kind of bug. We are very sorry about that. We are gonna think more about that. Have a nice day.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue

User: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: 4.5.10
Device: PC
Browser: Chrome 70
OS: Win 10
Provided sample code: No
Provided link: No

Ungr

Pro User

198Support score
17Questions 11Answers

5Snippets likes 5Snippets